> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/settings/swatch-on-collection-page.md).

# 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.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-df29200a54613391d02b979c8df9a908d0b78813%2Fimage%20(40).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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](/swatch/options/show-swatches-on-collection-pages.md).
{% endhint %}

## 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.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-a3d620ead623d67e2603e4b6074917b0f1346e21%2Fsettings-limit-swatches.png?alt=media" alt="Limit Swatches turned on with Limit on desktop and Limit on mobile set to 5, and the preview showing a +1 More button"><figcaption><p>With the limit at 5, the preview collapses the rest behind a +1 button.</p></figcaption></figure>

The **Carousel** toggle in a style's [Appearance](/swatch/appearance/customize-a-swatch-style.md) 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.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-4d8eba6ed97030d3764252e50f04ca8fe49975ce%2Fimage%20(41).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
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.
{% endhint %}

## Save

Click **Save** at the top of the page.

## Related pages

* [Show swatches on collection pages](/swatch/options/show-swatches-on-collection-pages.md)
* [Out-of-stock styles](/swatch/appearance/out-of-stock-styles.md)