How to set up the hero section

The Hero section grabs attention with a visually striking design and customizable text overlays.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Content width (px): Set the width of the content inside the hero section in pixels.

Content position: Choose the horizontal position of the content within the hero section. Options: Left, Center.

Content alignment: Choose the text alignment within the content area. Options: Left, Center.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.

Font scale: Adjust the overall scaling of text in the hero section, affecting both headings and descriptions proportionally.

Styles

Background image: Select or upload an image for the hero section background. You can also browse free images via the Explore free images link.

Hero background color: Choose the background color for the hero section.

Hero heading color: Choose the color of the heading text in the hero section.

Hero text color: Choose the color of the body text in the hero section.

Hero overlay background: Set the background color for the overlay applied to the hero section.

Hero overlay opacity: Adjust the opacity level of the overlay applied to the hero section.

Content overlay background: Set the background color for the overlay applied specifically to the content area within the hero section.

Content overlay opacity: Adjust the opacity level of the overlay applied specifically to the content area within the hero section.

Heading

Heading: Set the main title for the hero section.

Heading level: Select the heading tag (H1–H6) to define the importance of the heading.

Heading size: Select the display size for the heading. Options: Extra Small, Small, Medium, Large, Extra Large.

Text

Content: Set the text content for this section.

Text size: Select the size of the text. Options: Extra Small, Small, Medium, Large, Extra Large.

Buttons

Primary button label: Set the text for the primary button.

Primary button link: Set the destination for the primary button link (page, collection, product, external link, etc.).

Secondary button label: Set the text for the secondary button.

Secondary button link: Set the destination for the secondary button link (page, collection, product, external link, etc.).

Styles

Primary button background color: Choose the background color for the primary button.

Primary button text color: Choose the text color for the primary button.

Secondary button background color: Choose the background color for the secondary button.

Secondary button text color: Choose the text color for the secondary button.

Button border radius: Adjust the roundness of the button corners.