How to map the variants with shopify product meta filed

Store Design
1

based on variant selected only show the variant meta filed only.

xxxxxx.myshopify.com/admin/products/6785815216210/variants/39726381629522

AvidBrio_0-1640181262954.png
AvidBrio_0-1640181262954.png1771×967 94.3 KB

image lining met afield with option

AvidBrio_1-1640181580810.png
AvidBrio_1-1640181580810.png1024×783 213 KB

{%- comment -%} start Shopify variant based metafield  {%- endcomment -%}
                  {% if variant.metafields.my_fields.variant_option_url != blank %}
                      

variant_option_url : {{ variant.metafields.my_fields.variant_option_url }}

                  {% endif %}

                  {% if variant.metafields.my_fields.variant_option_text != blank %}
                       

variant_option_text : {{ variant.metafields.my_fields.variant_option_text }}

                  {% endif %}

                  {% if variant.metafields.my_fields.variant_option_1 != blank %}
                   

my_fields.variant_option_1 : {{ variant.metafields.my_fields.variant_option_1 }}

                  {% endif %}
              {% endfor %} 
        {%- comment -%} End Shopify variant based metafield  {%- endcomment -%}

Expected output : only show the selected variant meta filed only
variant option change hide show the meta filed value.

2

Hi @AvidBrio ,

Please follow the steps below:

  • Step 1: Change code show metafields:
{%- comment -%} start Shopify variant based metafield  {%- endcomment -%}
              {% for variant in product.variants %}
        	  
        		{% if variant.metafields.my_fields.variant_option_url != blank %}
                  

variant_option_url : {{ variant.metafields.my_fields.variant_option_url }}

                {% endif %}

                {% if variant.metafields.my_fields.variant_option_text != blank %}
                  

variant_option_text : {{ variant.metafields.my_fields.variant_option_text }}

                {% endif %}

                {% if variant.metafields.my_fields.variant_option_1 != blank %}
                  

my_fields.variant_option_1 : {{ variant.metafields.my_fields.variant_option_1 }}

                {% endif %}
        	  

              {% endfor %} 
              {%- comment -%} End Shopify variant based metafield  {%- endcomment -%}
  • Step 2: Go to assets > global.js file, find ‘updateURL() {’ and add code here:

https://i.imgur.com/ze3iQZm.png => https://i.imgur.com/85s5ASv.png

Code:

document.querySelectorAll('.variant__metafields').forEach(function(div) {
      div.classList.add('hidden');
    });
    document.getElementById(`product${this.currentVariant.id}`).classList.remove('hidden');

Hope it helps!

1 Like
3

Hi @AvidBrio ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
4

@LitExtension Thanks for the solution. I really appropriate for your answer.

1 Like