saber la url según la opción que se elija

[elpre]

Buenos días,

tengo artículos en la tienda que tienen dos opciones, "Tamaño" y "Piedra".

A la hora de ver los artículos no hay problema, cambia la imagen según la piedra que se elija. El problema lo tengo con la url según el modelo de piedra.

Un ejemplo real es este:

Como se ve en la imagen, yo elijo la piedra "Onyx" tengo una url con el variant. Si elijo la piedra "Tiger Eye" es lo mismo pero con el número variant cambiado.

El problema viene cuando estoy en la página de colecciones. Puede haber anillos que no tengan piedra, así que en la colección se ve según el anillo que puedas ir directamente a la piedra que quieres. Esto lo tengo hecho por código.

{% if collection.title == 'Necklace and Chains' %}
                {% if product.title contains 'Waves' or product.title contains 'Kudos' %}
                  <div class="select-metal">
                    <p style="margin-bottom: 10px;font-size: 14px;">Available stones</p>
                    {% for product_option in product.options_with_values %}
                      {% for value in product_option.values %}
                        {% case value %}
                          {% when 'Green Malachite' %}
                            <a href="{{product.url | append: '?variant=' | append: '37103102099625' }}"><span class="greenmalachite_dot"></span></a>
                          {% when 'Labradorite' %}
                            <a href="{{product.url | append: '?variant=' | append: '37103103836329' }}"><span class="labradorite_dot"></span></a>
                          {% when 'Onyx' %}
                            <a href="{{product.url | append: '?variant=' | append: '37103102820521' }}"><span class="black_dot"></span></a>
                          {% when 'Tiger Eye' %}
                            <a href="{{product.url | append: '?variant=' | append: '37103093121193' }}"><span class="tiger_dot"></span></a>
                          {% when 'Lapis Lazuli' %}
                            <a href="{{product.url | append: '?variant=' | append: '37103103312041' }}"><span class="lapis_dot"></span></a>
                        {% endcase %}
                      {% endfor %}
                    {% endfor %}
                  </div>
                {% endif %}

como veis, tengo puesto el segundo append a mano. <a href="{{product.url | append: '?variant=' | append: '37103102099625' }}"> y funciona precisamente porque está a mano, pero habrá muchos productos así, y no puedo ponerlos todos a mano, así que lo idea sería que hubiese algún tipo de variant.id (ya he probado pero no me ha funcionado) para así con ese código, ya funcionaría en todos los productos de la colleción

Hay alguna manera de hacer esto???