Color variants & swatches

Show swatches#

1. In the Shopify admin, give the product an option named Color (or Colour, Couleur, Teinte) and create a variant for each color.
2. In the theme editor, open a product page and click Product page.
3. Under Variants, turn on Color swatches for variants and choose a Swatch shape.

Where the swatch colors come from#

1. The swatch set on the option value in Shopify — a color or an image. This is the most precise.
2. Otherwise, a built-in color for common names: noir, blanc, beige, crème, navy, bleu, rouge, bordeaux, vert, kaki, gris, anthracite, rose, jaune, orange, terracotta, marron, cognac, camel, taupe, or, argent.
3. Otherwise, the option value itself read as a CSS color name, such as “navy” or “olive”.

Make the gallery follow the color#

1. In the product’s admin page, upload all its photos in color order: the photos of the first color, then those of the second, and so on.
2. Open each variant and set its image to the first photo of its color.
3. In the theme editor, turn on Hide photos of non-selected colors under Variants.
4. Preview the product and click through each color.

Each photo belongs to the color whose variant image comes before it. Videos and 3D models belong to every color and always stay visible. If a color has no photo of its own, the full gallery stays visible rather than an empty one.