Attaching a product to a product variant using Metafields

Technical Q&A
,

Topic summary

A user is attempting to create clickable product color variants that redirect customers to individual product pages for each color. They’ve set up a variant metafield with content type ‘Products’ and attached specific products to each variant (demonstrated with screenshots of the metafield definition and product attachment).

Current Issue:

  • Clicking on a variant does not trigger any redirect to the corresponding product page
  • Only the metafield setup has been completed so far
  • No custom code has been implemented yet

Store Details Provided:

  • URL: sixteen-official.com (password: dodaly)
  • Test implementation on ‘Butter Leggings, Royal Blue’ product
  • Specifically testing on the ‘Onyx’ color variant

Status: The user is seeking guidance on additional steps or code needed to make the variant-to-product-page linking functional. A community member has requested access details to review the implementation, which have been provided.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to link product color variants to their individual product pages. For example, if a customer selects the ‘brown’ variant, it will take them to that brown items product page. For that, I created a variant metafield of content type ‘Products’. I have attached the product to the variant as follows:

Screenshot 2023-11-29 152219.png
Screenshot 2023-11-29 152219.png807×782 38.4 KB

However, when I click on that variant it does not redirect me to that product page. Basically, nothing is happening. Are there any additional steps or some code which I need to add? I’ve only done this so far.

Here is a screenshot of my metafield definition:

Screenshot 2023-11-29 152543.png
Screenshot 2023-11-29 152543.png742×611 20.2 KB

2

Hi @FrostyByte
Can you share the store URL and password if the store is password protected?
Also share the url where you are implementing the functionality and the code you have done so far.

3

Store URL: sixteen-official.com

Password: dodaly

Product URL where I’ve implemented the metafield: Butter Leggings, Royal Blue (sixteen-official.com)

I’ve implemented it on the first color variant ‘Onyx’. I’ve not added any code as of yet, thats what I needed some guidance on.

Store is still under construction, I was just testing out the variant issue first.