Show swatches on collection pages

Turn on the app embed

1. 1

   Open the theme editor from the Dashboard

   On the Dashboard, under Where swatches appear, find the Collection pages card and click Enable on theme.

   

2. 2

   Switch on Collection swatches

   In the theme editor, open App embeds in the left sidebar and turn on Collection swatches.

   

3. 3

   Save and check your store

   Click Save, then open a collection page on your store. Back on the Dashboard, the Collection pages card now shows On.

Choose where card swatches appear

The embed makes card swatches possible; the app decides where they actually show. In Where it applies, under Product cards:

• Show swatches on product cards turns card swatches on or off for the whole store.
• Show on these pages picks the surfaces: Collection pages, Search results, Home page and Product pages (related products).

What shows on a card by default

Out of the box, each card shows one option: your most used colour option, as small variant photos, up to five per card. Size and other options stay on the product page. All of this can be changed:

Troubleshooting

• Collection swatches is on under App embeds in your published theme, and you clicked Save.
• Show swatches on product cards is on in Where it applies, and the page type is ticked under Show on these pages.
• At least one option has a Collection page style that isn't Hidden in Options.
• The product is inside your coverage in Where it applies.

Some themes build product cards in an unusual way. If swatches land in the wrong spot, or one section of your home page doesn't show them, click Chat with us on the Dashboard and we adjust the placement for your theme.