Why use linked products instead of variants?

• Per-color SEO — each color has its own URL and metafields.
• Per-color inventory — stock is managed per product, not under one parent.
• Per-color media — each product has its own gallery, video, lifestyle shots.
• Cleaner Shopify Admin when color catalogs are big.

Setup — step by step

1. Create one product per color

Each color is its own Shopify product. E.g., “Linen Dress — Ivory”, “Linen Dress — Navy”, “Linen Dress — Rose”.

2. Create the metafield definition

1. Shopify admin → Settings → Custom data → Products → Add definition.
2. Namespace: custom — Key: color_group.
3. Type: List of product references.
4. Save.

3. Add the linked products to each product

On every product in the color group, set the custom.color_group metafield. Add all sibling colors (INCLUDING the product itself — so the active swatch is highlighted).

4. Optional — explicit swatch color

Create another metafield: custom.swatch_color, type Single line text. On each color product, set a hex code (#1A1A1A) or CSS color name (navy). If empty, Vesperia falls back to the product’s featured image as the swatch.

How it behaves on the storefront

• Product page — swatches are rendered as anchors; clicking navigates to the linked product’s page.
• Collection cards — swatches are rendered as buttons; clicking swaps the card image AND rewrites all card links to the linked product (no page reload).
• The active swatch (representing the current product) is highlighted with a ring.

Variant options inside the same product

If your products in the group still have Size or other variant options, Vesperia continues to render those as radio buttons next to the linked-product swatches. The two work together.

Disable linked swatches

Just leave the custom.color_group metafield empty on a product. No swatches will be rendered for it.