Link a color variant to a separate/independant product page

Technical Q&A

Topic summary

Goal: Keep each color as a separate product, but show color swatches on the product page that link to the corresponding color’s product URL.

Proposed solutions:

  • Metafields + custom code: Use product metafields (custom fields on products) to store related color product references. Build a custom swatch/selector that reads those metafields, displays each related color as a “variant,” and links to its product page. A similar implementation and a live example were linked for reference.
  • App-based approach: Use the Easify Product Options app. Its Option URL feature groups separate listings and shows color swatches that redirect to each product’s page. Multiple screenshots/demos were provided, and setup help was offered.

Notes:

  • Images/screenshots were shared to demonstrate the app’s UI and behavior.
  • No decision or confirmation from the original poster yet; the discussion remains open.

Key considerations:

  • Choose between a code-first method (flexible, requires theme edits) and an app solution (faster setup, external dependency).
  • Ensure a clean mapping of each product to its color counterparts via metafields or the app’s configuration.
Summarized with AI on December 15. AI used: gpt-5.
1

Hello,

I’m fairly new at this. Currently working on configuring my new e-commerce site. My situation is that I have 3 individual products which are the same product but in different colors.

We have chosen to add each color of a product as an individual product therefore we didn’t add them as variants.

We now want to show each variant of the product on the same product page but with color swatches that are linked to the corresponding product page.

So if they click on “green” it will be linked to the green version of that product with corresponding url.

Is it possible to do this ? We really want to keep these product separate as all the pictures would overcrowd the product page.

Any help is greatly appreciated!

2

Hi Marc,

Your best bet to connect them is to use product metafields. Then on your product page, you’ll need a custom selector to obtain the connected products from the metafield itself and have each connected product display as a “variant”. And when they click on the “variant”, they’ll be sent to that product page.

Not the exact problem, but a similar problem. I was able to do this for someone here in the community, here’s that link:
Solved: Need a list of buttons connected to Product metafields - Shopify Community
Accessory Clip for UPPAbaby Cruz V2 – Daloda

If you have any questions Marc, feel free to ask :slightly_smiling_face:

3

Hi @SimplyMarc ,

The Easify Product Options app can help you address your needs. Its Option URL feature allows you to combine listings or group products as variants. In your case, it links your products in different colors while keeping them as separate items. On each product page, a color swatch will be displayed for selection, and clicking on a color will redirect customers to the corresponding product page. Here’s a demo for reference :hugs: :

bl.png
bl.png1163×669 309 KB

EasifyMark_0-1730955779002.png
EasifyMark_0-1730955779002.png2326×1338 259 KB

EasifyMark_1-1730955791866.png
EasifyMark_1-1730955791866.png2326×1338 287 KB

EasifyMark_2-1730955872259.png
EasifyMark_2-1730955872259.png2880×1512 383 KB

If you need assistance with the setup, feel free to reach out to the Easify team for a detailed guide.