Similar to a banner, but comprised of custom blocks. Generally used to create the top-most section of a page. Blocks are not available on hero sections in article and collection templates.

Section settings

Horizontal alignment

Horizontally aligns the content left, right or center.

Background image

Set the background image of the hero. If needed, a separate field is offered for a mobile background if you want to use two different ones, depending on the screen size.

Overlay color and opacity

Set the color and opacity of the overlay that goes on top of the background image of the hero. It is recommended to keep the opacity less than 50% to make sure the background image is still visible.

Visibility settings

View documentation on visibility settings

Available blocks


View documentation on breadcrumb block


View documentation on button block


View documentation on heading block

Icon with text

View documentation on text-with-icon block


View documentation on image block

Predictive search

View documentation on predictive search block

Rich text

View documentation on rich text block

Share/print UI

View documentation on share & print icons block


View documentation on spacer block

Align theme

Leave a comment

Please note, comments need to be approved before they are published.