Add swatches to product pages
Product page swatches come from an app block called Color swatches. You add it once to your product template, right above your theme's own variant picker.
Prerequisites
An Online Store 2.0 theme whose product template accepts app blocks.
The app is installed and has finished its first catalog sync.
Add the block
- 1
Open the theme editor from the Dashboard
On the Dashboard, find Where swatches appear. On the Product page card, click Add to product page. The theme editor opens on your product template with the block ready to add.
The Product page card on the Dashboard - 2
Place the block above the variant picker
Add the Color swatches block to the product information section and drag it directly above your theme's Variant picker.
Swatches appear exactly where the block sits, so putting it where the theme's picker is keeps the page layout familiar to shoppers.
The Color swatches block placed above the theme's variant picker - 3
Keep the theme's variant picker
Leave the theme's own Variant picker in the template. The app hides it and uses it behind the scenes to change the selected variant, the price, the images and what goes into the cart.
Warning
Don't delete or hide the theme's variant picker yourself. Without it the theme can't switch variants, and add to cart may add the wrong item.
- 4
Save and check your store
Click Save in the theme editor, then open a product with variants on your store.
Swatches on a live product page
Check that it's live
Back on the Dashboard, the Product page card now shows Active, and its button becomes Edit in theme editor.
| Status | Meaning |
|---|---|
| Active | The Color swatches block is on the product template of your published theme. |
| Not added | The block isn't on the published theme's product template. You may have added it to an unpublished theme or to a different template. |
| Unknown | The app couldn't read your theme. Swatches may still be working; open a product on your store to check. |
How the block behaves
- It only draws swatches for products with variants. A product with a single default variant has nothing to choose, unless it belongs to a product group.
- It follows Where it applies. Products outside your coverage keep the theme's picker.
- If any option on a product uses the Theme default style, the app steps back for that whole product and your theme's picker shows all of its options.
- If the swatches can't load within about two seconds, the theme's own picker comes back, so shoppers are never left without a way to choose.
- If your theme has more than one product template, add the block to every template your products use.
Troubleshooting
If a product page still shows the theme's picker, check:
- The Color swatches block is on the product template of your published theme, and you clicked Save.
- The theme's own variant picker is still in the template.
- The product has variants, not just a single default variant.
- The product is inside your coverage in Where it applies.
- No option on the product is set to Theme default, including through a style rule.
Still not working? Your theme may build its picker in an unusual way. Click Chat with us on the Dashboard and tell us your theme name; we adjust the app for your theme.
Next step
Need help?
Open the app and click Chat with us on the Dashboard for free setup assistance, or contact us with your store address and what you are stuck on.