Attaching a product to a product variant using Metafields

[FrostyByte]

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: 

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: 

[Huptech-Web]

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.

[FrostyByte]

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.