How do I add links to variants of products in a product card (displayed on landing page and collections page) on Shopify?

Question

On the landing page and collections page, below each product, I want the color variants to link to the variant with the color selected eg if I click on the red color, it takes me to the product page with the red variant selected. I managed to add the color variants but I don't know how to link them to the variants. The products also have sizes as they are clothes, so I want the XS size to be selected by default.

When the red variant is clicked, takes to the product page with variants with XS and Red selected. When the black variant is clicked, takes to the product page with variants XS and Black selected. When the black variant is clicked, takes to the product page with variants XS and White selected.

How do I dynamically add a link that redirects to the product page with XS + color clicked?

Source: https://cropshopboutique.com/

The code I have for the colors so far are:

color-option-row.liquid

<div class="product-option-row flex justify-between flex-column flex-row-ns tc tl-ns mb4">
  <div class="option-values">
    {% for value in option.values %}
      {% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}

<a href="{{ product.url }}?variant={{ variant.id }}">
  <label for="{{ radio_id }}">
    {% if force_colors == true %}
      {% include 'option-color' with color: value %}
    {% else %}
      {{ value }}
    {% endif %}
  </label>
</a>
    {% endfor %}
  </div>
</div>

color-variant-hover.liquid

{% assign has_multiple_variants = false %}
{% if product.variants.size > 1 %}
  {% assign has_multiple_variants = true %}
{% endif %}

{% assign has_multiple_options = false %}
{% if product.options.size > 1 %}
  {% assign has_multiple_options = true %}
{% endif %}

{% assign has_selected_variant = false %}
{% if product.selected_variant != nil %}
  {% assign has_selected_variant = true %}
{% endif %}

{% if has_multiple_variants %}
  {% include 'get-variants-with-quantity-json' with product: product %}
{% endif %}

{% assign can_add_to_cart = false %}
{% if has_selected_variant and product.selected_variant.available %}
  {% assign can_add_to_cart = true %}
{% elsif has_multiple_variants == false and product.available %}
  {% assign can_add_to_cart = true %}
{% endif %}

  {% if has_multiple_options or has_multiple_variants %}
    {% for option in product.options_with_values %}
      {% assign option_name = 'option' | append: option.position %}

      {% assign selected = false %}
      {% if has_selected_variant %}
        {% assign selected = product.selected_variant[option_name] %}
      {% endif %}

      {% assign default_variant = product.selected_or_first_available_variant %}

      {% if option.name == 'Color' %}
      <div class="option-colors">
        {% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
      </div>

      {% elsif option.name == 'Pattern' %}
      <div class="option-patterns">
        {% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
      </div>

      {% else %}
      <div class="dn">
        {% include 'color-option-row' with option: option, option_name: option_name, type: 'select', selected: selected %}
      </div>
      {% endif %}
    {% endfor %}
  {% endif %}

  <input class="js-variant-id" type="hidden" name="id" value="{{ default_variant.id }}">

featured-products.liquid

<div class="product-card fl w-50 w-25-l mb3 ph1 ph3-m ph3-l">
  {% include 'product-card' %}
  {% include 'color-variant-hover' %}
</div>

Answer 1

Try to update your color-option-row.liquid to the following:

<div class="product-option-row flex justify-between flex-column flex-row-ns tc tl-ns mb4">
  <div class="option-values">
    {% for value in option.values %}
      {% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}

{%- for variant in product.variants -%}
  {%- if variant.title contains value -%}
    {%- assign productColorOptionURL = product.url | append: "?variant=" | append: variant.id -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}

<a href="{{ productColorOptionURL }}">
  <label for="{{ radio_id }}">
    {% if force_colors == true %}
      {% include 'option-color' with color: value %}
    {% else %}
      {{ value }}
    {% endif %}
  </label>
</a>
    {% endfor %}
  </div>
</div>