Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

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.

Full width image on desktop
Full width image on desktop
Full width image on mobile
Full width image on mobile

Add a full width image section

The Full width image section can be added to any template (except the Checkout). To learn more about sections and templates, see our article about how to use the theme editor.

In the theme editor (Customize):

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

  2. In the side panel, 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.

Full with image on desktop with centered text
Full with image on desktop with centered text

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. Remember to 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.

    These settings help make your text readable and look good over top of your image.
    These settings help make your text readable and look good over top of your image.

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

  6. Remember to 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.

Full width image with button
Full width image with button

In the theme editor (Customize):

  1. Click +Add block and select Button.

    Add button block
    Add button block
  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:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  6. Remember to click Save.

Full width image settings

The Full width image section has the following settings:

Configuration Settings

Image

Select or upload an image to be associated with the current section.

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading text

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Max width of text

Change how wide the heading and text can be at a maximum.

Choose a page from your store to be link to from the section's call to action button.

Add text to be used on the call to action button

You can change the link style to Button or Link with arrow.

Text alignment

Select the position of the headings using the dropdown.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.