Variant Meta Fields: Meta Display for ONLY Currently Selection Options/Variants

New Member
2 0 1

Hi guys,

I'm using the Metafields2 App on the Symmetry Theme and have set up a field called "variantdescription" for each variant so that a different description loads into the product details for each product variant. Here's a screenshot of the issue I'm dealing with:

In my product-details.liquid file (this is where Symmetry Theme product details are located...or so I've been told....), I've placed the code:

{% for variant in product.variants %}
  // to display the variant metafields use {{resource.metafields.namespace.key}}
  {{ variant.metafields.variantdescription.description }}
{% endfor %}

Unfortunately this only outputs the variantdescriptions for ALL the variants. How can I:

a) Adjust my code so that the SINGLE appropriate meta value displays for the default or CURRENTLY SELECTED variant

b) Ensure that the description updates when the user updates the variant. (will this require AJAX or similar?)

I've attached a screenshot of what the current output looks like. It's physically in the right place, but does not function correctly.

1 Like
New Member
2 0 1

I was almost positive that this would be able to be addressed. As far as I can tell, this is the only way to add unique descriptions for the product variants, so I was thinking that maybe someone had faced the issue and knew of a solution.

0 Likes
Shopify Expert
9811 92 1561

As a simplified explanation:

  1. Loop through variants outputting the custom text and ensure you wrap each one in an identifier - so something like
    <div class="variant_text" data-ref="variant_{{ variant.id }}">{{ variant.metafields.namespace.key }}</div>
  2. In you css make sure .variant_text is hidden by default.
  3. When you select an option, use JavaScript to grab the variant id, find the matching div and show it.

Something like that anyway.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
1 0 0

Jason, can you provide an example please? I'm lost on this and really need to get this working asap. Thanks in advance!

0 Likes