Card Swatches

Allow customers to preview Product Swatch Options directly from the product cards, making it simple to display various colors or styles for a single product.

How to enable swatch?

To enable first navigate to your Page Builder (how to launch Page Builder?)

Within the Theme editor, navigate to the Products tab and locate the Product Cards section. From here, you can enable the Show swatch checkbox option.

How to Resize & Style?

To enable first navigate to your Page Builder (how to launch Page Builder?)

Within the Theme editor, navigate to the Products tab and locate the Product Cards section. From here, you can select the different sizes from the Swatch Size dropdown (Small, Medium, Large & XLarge). Select whichever better showcases the product options.

There are two distinct styles available for Swatches: Normal and Flyout.

Normal - Presents the swatch options individually at the center of the product card.

Flyout - Arranges product options to the right of the product card, and upon hovering, unveils the product options with a flyout animation.