-
Notifications
You must be signed in to change notification settings - Fork 2
Product Cards and Swatches
jrs8205 edited this page Jul 1, 2026
·
1 revision
When Theme settings → Products → Show color swatches is on, product cards show a row of colour swatches for products that have a colour option.
Swatches appear when every colour value has one of:
- a native Shopify colour or image swatch (set in the product's variant options), or
- a variant image for that colour.
If a product's colours have none of these, the card shows no swatches (by design) rather than empty circles.
Clicking a swatch on a card swaps that card's image and price to the chosen colour without leaving the page, and marks the swatch active.
- Each swatch is still a real link to the product page with that colour selected, so opening it in a new tab (or with JavaScript disabled) works as before.
- While a colour is selected, the card's hover-image swap is paused so hovering cannot reveal a different colour.
No setup is required beyond enabling colour swatches and having colour swatches or variant images on your products.
- Swatch shape (circle or square) and Card swatch size are set in Theme settings → Products. The card size is separate from the larger variant-picker swatch size on the product page.