Variant Metafields displayed on the product page

Store Design
1

Hi folks

I am pretty new to Shopify and recently started with Prestige 2.0 Theme.

I will be selling jewelry with different variants as colors and sizes will change within the same product.

I would like to show Bulletpoints on the product page other than in the product description, is there a way to use content stored in a variant metafield to show up on the product field? I was only able to use dynamic content from metafields from the product metafields, not from the variant metafields.. if not, is there an app for that?

Thank you!

Felix

2

Hello @Felix_vie ,

You can fetch content from variant metafields using this code

{% for variant in product.variants %}
  {{ variant.metafields.my_fields.YOUR_FIELD_NAME }}
{% endfor %}

Note: It will return you all variant specific metafields content at same time. Further you have to customize it a/to your need.
Thanks

1 Like
3

Thank you @Guleria I will try to do this. Is there also a way to include them in the available source options of the theme?

Thanks!

Felix

4

Curious how to not display all the variant specific metafields content at the same time, only when that variant is selected?

5

Hello @Chammond101 ,

You need to use JS to extend it so metafield will visible on selection.
And this JS code depends on the theme you are using.

Thanks

6

Hi @Guleria . Thanks a lot for your response. It is very useful.

If I use the code like below, it works very well.

**Custom Variant Value**:
{% for variant in product.variants %}
      {{ variant.title }}: {{ variant.metafields.my_fields.variant_XYZ.value}}
{% endfor %}

However, I only want to display this code in the product pages with variants. So, I wrote if condition like below:

{% if variant.metafields.my_fields.variant_XYZ.value %}

       **Custom Variant Value**:
       {% for variant in product.variants %}
             {{ variant.title }}: {{ variant.metafields.my_fields.variant_XYZ.value}}
       {% endfor %}

{% endif %}

Unfortunately, it doesn’t work. Nothing is shown on the page.

Could you have a look at this pls? Thank you
Behram

7

Hey @behram-lndn

I am also looking for a solution to this.
Seems difficult.

Check this post. The 2nd part of the code shown here is an event listener to check which is the active variant.
https://community.shopify.com/c/shopify-design/display-different-message-for-different-selected-variants-show/m-p/1358267

Unfortunately I do not know how to code. But putting both things together might do the job?!

8

Hi @behram-lndn looking at the first code snippet you posted - doesn’t that also just return every variant metafield value? Did you ever get it to only display the metafield for the selected variant?

9

Hi there,

I got support from a freelancer for a solution. So, it works very well.

Just

For the products without variants, I use:

product.metafields.namespaceAndKey.value

Please note, for the products, you need to use .value at the end.

For the variants, you don’t like below:

For products with variants:

{%- unless product.has_only_default_variant -%}

{% for variant in product.variants %}

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

{%if forloop.index == 1 %}TitleHere: {% endif %}

{{ variant.metafields.my_fields.namespaceAndKey }} ({{ variant.title }}).

{% endif %}

{% endfor %}

{%- endunless -%}

Hope it works for you as well.

10

@behram-lndn thanks for sharing! Just tested that (see below) but still having the same issue, it returns every variant instead of just the selected one. Is that not how it works on your store?

Kit Contents 4: 
{%- unless product.has_only_default_variant -%}

{% for variant in product.variants %}

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

{%if forloop.index == 1 %}TitleHere: {% endif %}

{{ variant.metafields.my_fields.kit_contents }} ({{ variant.title }}).

{% endif %}

{% endfor %}

{%- endunless -%}
11

In this case, just remove the loops :slightly_smiling_face:

{%if variant.metafields.my_fields.kit_contents != blank %} {{
variant.metafields.my_fields.kit_contents }} ({{ variant.title }}). {%
endif %}

12

Now it doesn’t show anything on the page. It looks like the code isn’t selecting the selected variant, but not certain.

I feel like I might be overlooking something simple here…

13

Hello,

Your code is working but it is showing all variants metafield data for all variants how it show it as per variants?