Shades, sizes and color swatches

Shades and sizes are options on a product (Shade, Size), and each combination is a variant with its own price, stock and picture. The theme draws whatever Shopify has.

Add shades as swatches

1. Open the product in Products and go to Variants. Add an option named Shade (or Color) and its values.

2. For each value, select the swatch circle and choose a color, or upload an image of the shade (a close-up of the texture works beautifully).

3. Save. On the product page, the Variant swatches block now shows circles. Values without swatch data show as named buttons, so a catalog you are still finishing looks deliberate.

Give each shade its picture

Upload a picture for each shade in the product's media, then select each variant and choose its picture. When a shopper picks a shade, the gallery moves to it.

Sold out shades

Shades that are sold out stay visible, with a dashed edge and a softer color, and the buy button says sold out. Shoppers can still see the full range.

Swatches on collection pages

In the Collection section, turn on Show color swatches to show small swatches under each product card.

Help shoppers choose

For foundation and concealer, add a Shade lab or Shade finder to the product template: see Shade finder.

Further reading on the iVishwa blog: Help shoppers find their shade online