How To Link Product Color Variants To A Different (Corresponding) Page In Emerge Theme

Store Design
,

Topic summary

Goal: Link each color option (swatch) to a separate product page/URL that shows only that color’s images, while ensuring each color still appears in collections. Current issue: all color images are on one product page, creating clutter.

Context/examples: Two example stores demonstrate URLs updating per swatch and images scoped to the selected color.

Proposed approach: Use Shopify metafields to relate products by color, then customize the theme template.

  • Add a product metafield (type: product) to associate corresponding color products.
  • Edit main-product.liquid to output linked products from the metafield (example Liquid loop provided).
  • A screenshot and a brief code snippet are included, but only as a high-level outline.

Key terms: Metafields = custom fields for storing extra product data. main-product.liquid = product page template. Swatch = color selector.

Open questions: No step-by-step implementation details were provided (especially for Emerge or Palo Alto). Another participant requested a detailed, guided setup.

Status: Unresolved; needs a concrete, step-by-step solution and theme-specific instructions.

Summarized with AI on December 27. AI used: gpt-5.
1

Hello.

I am using the Emerge Theme currently and have products with different color variants. I want to create different variant links through which you can switch between different individual products when selecting a different color.

Right now, I have ALL my product images (all colors) in one product page and want to have images displayed only to the corresponding color WHEN the swatch is clicked. Instead, I have too many pictures on one product page due to the amount of color variants. Each color variant should have a separate link with its own corresponding images. At the same time, each color of the product should show in the collection page.

Examples:

https://mnml.la/products/mnml-sweatpants-every-day-sweatpants-m2019-w732-gry

https://www.rockstaroriginal.com/products/rsm-btm-jns-4840-bruce-biker-patch-jean-black-red

You will notice the swatch code in the url change when a different swatch is selected while only displaying images for that variant.

I have seen post regarding this question before but it didnt get solved.

What would be the best way to go about this?

Any response will be deeply appreciated, Thank You.

2

First, add a product metafields, the type is product, so that you can select products in other colors on the product page.
Then modify the code. Add code in main-product.liquid and insert metafields

wo_0-1711693954864.png
wo_0-1711693954864.png720×476 19.4 KB

For example

{% for product in product.metafields.custom.product %}

{% endfor %}

The general idea is this.

1 Like
3

I have a same issue with Palo Alto, Can you help me how to do it step by step? Thank you in advance!