Full width image

The Full width image section lets you feature your boldest product and store photography with overlay headings. Enable Parallax scrolling to add a dynamic 3D-like effect to your image.

Set up section

Add this section to your template and re-order its position. You can add this section multiple times with different content and settings.

Steps

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   Learn how to use Context's available templates in our Templates help guide.

2. Under Template, click (+) Add section and select Full width image.

3. Change the order of your sections by using the drag and drop handles ⋮⋮

Set up your image

Upload an Image and fine-tune it by adjusting the Height and Focal point. Add a a Mobile-specific image so this section looks best on all devices.

In the theme editor (Customize):

1. Click on the Full width image section to open the section settings.

2. Click Select image to upload and select an image file.

   There are no required images dimensions. We simply recommend uploaded images have a minimum width of 2048px for optimal quality across all devices.

3. (Optional.) Upload a Mobile image to display only on mobile devices.

   You may want a different image that works best with mobile screen dimensions, for example a portrait shaped image.

4. Adjust the Height and Mobile Height of your slide images between 50% to 100% of the maximum height.

   The Height is the percentage of the screen or window height.

5. Select the Image focal point to choose which section of the image to keep centered within the slide.

   This setting ensures the key part of your image appears when cropping occurs.

6. Choose to enable Parallax scrolling to add a dynamic 3D-like effect.

   Use the Parallax scale to adjust how much the image moves when scrolling past.

7. Click Save.

Change the section headings

Add a section title and promotional text to your overlay your Full width image. The section headings are included as blocks nested within the section.

In the theme editor (Customize):

1. Click the Heading block ("Full width image section") to change section title.

   We recommended a short title of just a few words.

2. Click the Subheading block to add a few sentences below the heading.

   We recommend two or three short sentences.

3. Adjust the Max width of text of your headings using the slider.

   Experiment with this setting to find a clean visual shape for your text.

4. Use the Show/hide button (eye icon) to remove a heading block.

5. Click on the Full width image section to change the Overlay color, Text color, and Overlay opacity.

   

   We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

6. Click Save.

Add a call-to-action button

Add a Button block to link to your collections or products or any other page with a custom label.

In the theme editor (Customize):

1. Click +Add block and select Button.

   

2. Click on the new Button block to open the settings panel.

3. Select or paste a URL for the Link.

4. Change the Link text to display on the button.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

5. (Optional.) Return to the list of sections to change the position of your Button using the drag handles ⋮⋮ of the section section blocks:

   

6. Click Save.

Full width image settings

The Full width image section has the following settings: