How to set up the swatches sections

The swatches section lets customers filter products by color or texture using customizable visual selectors.

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.

Items per row: Adjust the number of cards displayed in a single row.

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

Last row alignment: Select the alignment for the last row if it contains fewer cards than the other rows. Options: Start, Center.

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

Styles

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 swatches section.

Section text color: Choose the color of the heading displayed on the swatches.

Swatch border radius: Adjust the roundness of the swatch borders. Setting this to the maximum value (100) will make the swatches fully rounded (100% border radius).

Swatch border thickness: Set the thickness of the swatch border in pixels.

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

Font scale: Adjust the text scaling for all swatches proportionally, affecting the swatch heading.

Swatch

Heading: Set the title for the swatch.

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

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

Background color: Choose the background color for the swatch.

Border color: Choose the border color for the swatch.