Image hero

Theme section

The Image hero section lets you feature your boldest product and store photography with overlay headings.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or use metafields and dynamic sources.

STEPS

In your theme editor (Customize):

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

   Learn how to use templates in our Templates guide.

2. Under Template, click (+) Add section and select Image hero.

3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Set up 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.

STEPS

In your theme editor (Customize):

1. Click on the Image hero 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 2050px 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. Under Image height, choose to display the image with a Custom or the Original height (without cropping).

5. If Custom height is selected: 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.

   When Custom height is set to 50%, the image will always display at half the height of the customer's screen or window height.

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

7. Click Save.

Section content and style

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

STEPS

In your theme editor (Customize):

1. Click the Heading block 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. Use the Max width of text slider to control the maximum width of the headings.

   Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

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

5. Click on the Image hero section to change the Text container color and Text color.

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

6. (Optional.) Select an Overlay color to display overtop of the image and adjust the Overlay opacity using the slider.

   The Overlay lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

   Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.

7. (Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

   You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide ↗ to learn more.

8. Click Save.

Add call-to-action button

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

STEPS

In your 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.) Use the drag and drop handles ⋮⋮ to change the position of the Button:

   
6. Click Save.

Settings reference

Click on the section to find the following settings:

Setting	Description
Image	Select or upload an image.
Image Height	Set the image height to Custom or Original. Select Original to display your uploaded image without cropping.
Heading	Enter heading text to display as a title on the image.
Subheading text	Enter subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor manual ↗.
Max width of text	Use the slider to control the maximum width and line breaks of the headings.
Link	Choose a page from your store to be link to from the section's call to action button.
Link text	Add text to be used on the call to action button.
Text alignment	Select the position of the headings using the dropdown.

---

Related links Image with text Image with text split Slideshow Video hero