How color swatches work
This page explains the whole picture of color swatches — the small dots that stand for color options. The settings are in the “Product cards” theme settings group. You can see the full flow here first.
Where swatches appear
Section titled “Where swatches appear”- Product cards (listings, collections, search results) — color dots are shown at the bottom of the card. Pressing one swaps the card image to that color’s product image
- Product page — the variant picker (both dropdown and pill styles) shows dots
- Quick view — uses the same variant picker dots as the product page
- Favorites list — no swatches; options are chosen from dropdowns
Where the color comes from
Section titled “Where the color comes from”The theme has no “color name to color” mapping setting. The color is decided automatically, in this order:
- Shopify swatch settings — if a swatch (an image or a color) is set on the product option in the Shopify admin, it is used
- Product images — without a swatch, the variant image for that color is used (or the product’s featured image if there is none)
- The theme’s built-in color dictionary — otherwise, a color is assigned automatically from the color name (common English and Japanese color names)
Which options are treated as “color”
Section titled “Which options are treated as “color””An option is treated as a color when either:
- a Shopify swatch is set on it, or
- its name contains color, colour, 色 or カラー (not case-sensitive)
Shape is set in two places
Section titled “Shape is set in two places”- Product cards — Product card color chip shape in theme settings “Product cards” (circle / square / rounded square / none). “Rounded square” uses the corner radius from the “Buttons” theme settings
- Product page — the Swatch setting of the variant picker block in the “Product information” section (circle / square / none). The bundled product templates (Focus / Modern) and quick view always use circles
Color names are controlled by two settings
Section titled “Color names are controlled by two settings”- Show card color names (theme settings “Product cards”) — names next to the dots on cards
- Show color names on swatches (theme settings “Product cards”) — shows color names beside the swatches when adding to cart from the card. Names appear only when “Show card color names” is also on
While “add to cart from the card” is on
Section titled “While “add to cart from the card” is on”With Add to cart from the card (theme settings “Product cards”) on (the default), cards of products with up to 100 variants switch from the static swatch row to an inline color/size picker. For those products, Maximum swatches shown is not used. Product card color chip shape still applies to the add-to-cart color picker.
Limit of dots shown
Section titled “Limit of dots shown”Maximum swatches shown (2–8, default 4) caps how many color dots are listed on a card. The rest are summarized like “+2”.