How to set up the product catalogs section

2 Columns

3 Columns

4 Columns

The product catalogs section highlights product catalogs or featured items with customizable images and descriptions.

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.

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.

Columns gap: Select the gap size between columns. Options: Extra Small, Small, Medium, Large, Extra Large, Extra Extra Large.

Stack on mobile: Choose whether to stack product catalogs vertically on mobile devices to improve responsiveness.

Image ratio: Select how images should be displayed within the product catalog cards. Options: Adapt to image, Portrait, Fill height.

Horizontal image position: Select the horizontal alignment of the image. Options: Left, Right.

Vertical image position: Select the vertical alignment of the image. Options: Top, Middle, Bottom. Applies to “Adapt to image” and when the image is shorter than the text content of the card.

Styles

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

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

Font scale: Adjust the text scaling for the product catalog, affecting both the heading and description proportionally.

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 product catalogs section.

Card background color: Choose the background color for the product catalog cards.

Card heading color: Choose the color of the heading in the product catalog cards.

Card description color: Choose the color of the description text in the product catalog cards.

Button background color: Choose the background color for the buttons in the product catalog cards.

Button text color: Choose the text color for the buttons in the product catalog cards.

Button border radius: Adjust the roundness of the button corners in the product catalog cards.

Product catalog

Image: Select or upload an image for the product catalog card. You can also browse free images via the “Explore free images” link.

Heading: Set the title for the product catalog card.

Description: Add a brief description for the product catalog card.

Button label: Set the text for the button in the product catalog card.

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