How to set up the featured content section

The featured content section highlights your most important offerings with a visually engaging image and customizable buttons.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.

Text alignment: Select the alignment for text and buttons. Options: Left, Center, Right.

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: Adjust the space between this section and the sections above and below it in pixels.

Styles

Font scale: Adjust the scaling of the text in the featured content section.

Section heading color: Choose the color of the section heading.

Section subheading color: Choose the color of the section subheading.

Section background color: Choose the background color for the featured content section.

Section text color: Choose the color of the section text.

Text

Content: Set the main text content for this section.

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

Image

Image: Select or upload an image for this section.

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.