Image hero

The Image hero section was added in v1.2.0 — Update your theme to access new features.

The Image hero section displays a large image banner with overlaid headings, text, and buttons.

Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.

Set up section

---

In the editor side panel, click (+) Add section and select Image hero. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles

---

Click the section to edit general section styles for colors and spacing, available in all sections:

Section colors

Section width

Section padding

Set up hero image

---

Upload an Image and adjust its Height, Focal point, and color Overlay or Gradient. Add a Mobile-specific image for the best results on smaller screens.

Click Image hero section to find settings

Setting	Description
Image	Select or upload an image to display as the hero image. There are no required images dimensions. We simply recommend uploaded images have a minimum width of 2500px for optimal quality across all devices.
Mobile image	Select or upload an alternate image to display on mobile devices. You may want a different image that works best with mobile screen dimensions, for example a portrait shaped image.
Background link	Select a page or URL to make the entire image a clickable link.
Image animation	Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.

Set image height

---

Under Image height, choose to display the image with a Fixed or Relative height.

• Fixed heights maintain the same pixel height on all screens.

• Relative heights adapt the image height as a percentage of the screen height.

Click Image hero section to find settings

Setting	Description	Options
Desktop height	Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 250 - 750px Relative height 50 - 100% Default: 650px
Mobile height	Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).	Fixed height 150 - 750px Relative height 50 - 100% Default: 450px

Add content blocks

---

Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.

Overline

Add small label heading.

Heading

Add title heading.

Text

Add multiple lines of rich text.

Button

Add buttons with custom styles.

Image

Add images with custom sizes.

Spacer

Add space between blocks.

Divider

Add border between blocks.

Custom Liquid

Add Liquid code block.

Change content layout

---

Change the position and width of the content blocks that overlay the image.

Click Image hero section to find settings

Setting	Description	Options
Content width	Use the sliders to set the maximum width (in pixels) of the section content.	200 - 1000 px Default: 500
Text position	Set the position of the text content for desktop screens.	Top / Middle / Bottom Left / Center / Right
Mobile text position	Set the position of the text content for mobile screens.	Top / Middle / Bottom Left / Center / Right

Section colors

---

The section uses two color schemes. The first color scheme applies a section background color, and the overlay color scheme applies text, button, and overlay tint colors.

Change background color

---

The section background is visible when the section has top and bottom padding or when the section width is page width or full width padded.

In the section settings, select a color scheme (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.

Change overlay colors

---

Under Overlay, select a color scheme to apply text, button, and overlay colors.

The color scheme's background color is used for the tint overlay. If the color scheme has a backgraound gradient, it will replace the solid color background.

Overlay colors with high contrast help keep text readable and accessible for everyone.

Click Image hero section to find settings

Setting	Description	Options
Overlay opacity	Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.	0 - 100 % Default: 20