How to set up the compact banner section

Small variation

Medium variation

Large variation

The compact banner engages users with a sleek, minimal hero banner, perfect for clear messaging.

Settings

Heading: Set the title of the banner.

Subheading: Set a subtitle for the banner.

Heading level: Choose the heading tag (H1, H2, H3, H4, H5, H6).

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

Subheading size: Select the size of the subheading. Options: Extra Small, Small, Medium, Large, Extra Large.

Button label: Set the text that will appear on the button in the banner.

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

Font scale: Adjust the overall text scaling in the banner, affecting both the heading and subheading proportionally.

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.

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

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

Styles

Background image: Set an image as the background of the banner.

Banner background color: Choose the background color of the banner.

Banner heading color: Select the color for the banner heading.

Banner text color: Set the color for the subheading in the banner.

Banner overlay background: Choose a color for the overlay applied on top of the banner background image.

Banner overlay opacity: Adjust the transparency of the overlay background.

Button background color: Set the background color of the button in the banner.

Button text color: Choose the color of the button text.

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