Customizing product page with multiple varirations

Technical Q&A
1

Hi, I am customizing my shopify product page. My client’s store is about jewellery. I am using ella theme.

So we have three different variations:

  1. Carat (Swatch)

  2. Metal Type (Swatch)

  3. Size (Dropdown)

So the first problem is that I need to show the first two variants together, then there is static content and then the third variant option.

But when I am calling the variants, they are all getting displayed at once.

I need to be able to show them separately the right way.

Eg. (I’ve marked the dummy content, i.e. price)

Hus22_0-1663947301515.png
Hus22_0-1663947301515.png458×468 21 KB

The second problem, I managed to separate them.

But then the variations are not working. When I click on a variation nothing gets updated.

Whether I click on carat, metal, or size, the product value doesn’t change.

It still remains the same.

Kindly help me out.

2

Hi @Hus22 , you should loop through variants, if your variants are repeating for multiple products, you could do that with variant name:

{% for variant in product.variants %}
{% if variant.title == 'Your variant' %}
{{variant.title}}
{% endif %}
{% endfor %}
//STATIC CONTENT
{% for variant in product.variants %}
{% if variant.title == 'Your second variant' %}
{{variant.title}}
{% endif %}
{% endfor %}

If you have many different variants - my advice is to use metafields.