Shade Studio: swatches, undertones and photographs

01Create native shade variants

Use a Shopify product option named Shade, Color or Colour. Assign the correct product photograph to each variant. Native Shopify colour swatches take priority. Optional Beauty studio fallback mappings use one name and hex colour per line. Missing colours fall back to readable option names.

Rosewood:#995C61
Murmur:#C3877B
Oxblood:#6A2336

02Create the variant metafields

Under Shopify Settings → Custom data → Variants create the definitions below. Use consistent values so filters remain useful. The application image must be an image file reference.

custom.shade_note       Single-line text
custom.shade_family     Single-line text
custom.undertone        Single-line text
custom.application_image  File reference, images only

03Enable the comparison

Add the Shade Studio block to an applicable product template. The homepage Shade discovery section includes it when a shade product is selected. Shoppers compare two variants, filter by colour family and undertone, inspect stock and switch between product and application photography. Choosing a third shade replaces the oldest comparison.

1. Use photographs with consistent lighting and framing.
2. Provide application images for all shades where possible.
3. Check each selected image belongs to the correct variant.

04Understand the fallbacks

Sold-out shades remain inspectable but cannot be selected for purchase. A missing application photograph falls back to the product photograph with an explanation. Products with size-only options do not show Shade Studio. The guide compares up to 100 variants and links to the complete native product range.