Image hero
Section
Last updated
Section
Last updated
The Image hero section provides a highly-customizable feature for your editorial photos and promotional content. Create a unique section with plenty of content and visual design blocks, multiple buttons, and comprehensive image settings.
In the editor side panel, click (+) Add section and select Image hero. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
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
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.
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
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
The image overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readability.
Choose a Color scheme for the overlay and overlay text
Change the Opacity to make the overlay more or less transparent
Click Image hero section to find settings
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
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.
Adjust the alignment and width of the content blocks.
Click Image hero section to find settings
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
Heading
Text
Overline text
Button
Image
Spacer
Divider
Custom Liquid
