I am working on a Shopify website, what I have done is, show all the variants of a product as the individual product on the collection page, but what I want help with is, when someone click on the variant image on the collection page, it should open the same variant in the product page
<div class="col-6 col-md-4 custom-variant" data-tag="{{test}}">
<div class="hover-grid-wrapper">
<a href="{{product.url}}">
{%if variant.image.src != blank %}
<img src="{{ variant.image.src | img_url: 'master' }}" alt="" class="img-responsive" />
{% else %}
<div class="product-image pr oh lazyload" data-include="{{pr_url}}/?view=img{{sett_equal}}"><div class="nt_bg_lz nt_fk_lz"{% unless sett_equal %} style="padding-top:{{ 1 | divided_by: images_0.aspect_ratio | times: 100}}%;"{% endunless %}></div></div>
<img src="{{ product.featured_image.src | crop:center | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
{% endif %}
{% assign vTitle = variant.title | split: ' / ' %}
{% assign title = words[0] | capitalize %}
<span class="color-text color-{{color | handle }} {{variant.id}}">{{title}}</span>
</a>
{%- if variant.inventory_quantity <= 0 and variant.inventory_management == 'shopify' -%}{%- assign txt = 'products.product.pre_orders' | t -%}{%- else -%}{%- assign txt = 'products.product.add_to_cart' | t -%}{%- endif -%}
<a href="{{ url_last }}" class="add-to-cart-btn pr_atc_ tc dib js_addtc {{tooltip}} truncate" data-id="{{ variant.id }}" rel="nofollow"><span>+ Quick Add</span></a>
</div>
</div>This is my code