Swatch on collection page

How swatches behave on product cards, and how to add an Add to cart button.

Settings → Swatch on Collection Page controls how swatches behave on product cards — on collection pages and anywhere else your theme uses them.

These settings apply to options you've already switched on for collection pages. By default every option is set to Do not show (Default) — see Show swatches on collection pages.

Customize swatch display settings

Setting	What it does
Show Option Name	Show or hide the name of the swatch option. Usually off — product cards are tight on space.
Show Single Variant Swatch	Display the swatch even when the product only has one variant.
Dynamic Swatch	Show updated product preview (image, price, etc.) when a swatch is selected.
Limit Swatches	Hide extra swatches and show a "More" button.
Use dynamic variant image	Automatically show the variant image when a swatch is selected.

Dynamic Swatch

With it on, clicking a swatch points the whole product card at the variant the shopper picked:

• every link on the card gets ?variant=… added, so clicking through opens the product page with that variant already selected;

• on colour options, the card's title gains the value — Classic Cotton T-shirt becomes Classic Cotton T-shirt - Blue.

With it off, clicking a swatch only marks the selection: the title stays as it is and the card still links to the product's default variant.

The card image is a separate matter. Colour swatches already swap the card image without this setting; Use dynamic variant image below is what extends that to the other styles.

Use dynamic variant image

Colour swatches change the card image on their own. Turn this on and the rest of the styles — button, pill, price tiles, dropdowns — do it too, so a shopper clicking Large or Linen sees that variant's photo rather than the product's default one.

Limit Swatches

Products with twenty colours make a mess of a product card. Turning this on reveals:

• Limit on desktop — how many swatches to show before the "More" button.

• Limit on mobile — the same for narrow screens.

Five on desktop and three on mobile is a reasonable starting point.

With the limit at 5, the preview collapses the rest behind a +1 button.

The Carousel toggle in a style's Appearance settings is the other way to handle long lists — one scrollable line instead of a cut-off list.

Show Add to Cart Button

Turn this on to put an add-to-cart button on your product cards, so shoppers can buy from the grid without opening the product page.

It reveals:

Field	When shoppers see it
Add to Cart label	When the selected variant is in stock. Default Add to cart.
Label After Added to Cart	After the item is added to the cart. Default Added to cart.
Label for Out of Stock Variants	When the variant is not available. Default Sold out.
Enable Ajax Add to Cart	Add to cart without reloading or leaving the page.

With Enable Ajax Add to Cart on, a theme picker appears — Please select your Shopify store theme in dropdown. Choose your theme so the app knows how to open your cart drawer.

Only the themes listed in that dropdown support the Ajax add to cart with a sidebar or popup cart. On other themes the page reloads and then adds the item to the cart.

Save

Click Save at the top of the page.

Related pages

• Show swatches on collection pages

• Out-of-stock styles