Help with Metafield descriptions for variants

mokumprix
New Member
9 0 0

Hi, 
I am trying to figure out how to display a custom description for certain product variants.
Per context: Most product descriptions state that products will be shipped within 2-7 working days. However, some variants of products are immediately available for dispatch. I figured that the best approach for this, is to use metafields. I've already installed the 'Metafields Guru' app, but am still a bit confused as to how I can apply a Metafield to certain variants. 

Would anyone be able to help me out? Appreciate it a lot!

0 Likes
mokumprix
New Member
9 0 0

I have figured out how to update metadata for certain products, but for variants they do not show up. I am using 'Metafield Guru'

0 Likes
Alan15
Pathfinder
93 21 25

Do you mean you have added the Variant Metafields, but you can't see them on the product page?

This post goes into a lot of detail on variant metafields, maybe it can help:

https://community.shopify.com/c/Technical-Q-A/Display-product-variants-metafields/td-p/555439

0 Likes
mokumprix
New Member
9 0 0

That's indeed what I meant! When I apply a Metafield to a product, it works fine. But for variant-specific metafields, it does not show up. Thanks for the article though, too bad I do not understand any of it regarding coding

0 Likes
Alan15
Pathfinder
93 21 25

Yeah, the code is a bit complicated. You need the javascript connected to the variant selector to pick up when it changes.

This code from the other post should work to display all the variant metafields, if you put it somewhere in your product.liquid or product-template file:

{% capture 'meta_data' %}
{% for variant in product.variants %}
{{ variant.title | json }}: {{ variant.metafields.shipping.time | json }}
{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}

 

change the bit in red to match your metafield name, but the tricky bit is to connect it to your selectCallback javascript.

I want to know how to do this as well, if I get it working I'll post it here or maybe someone else has a solution

0 Likes
Alan15
Pathfinder
93 21 25

Hi,

I got this to work for the Debut theme, if that's a help.

I added this code to my product-template.liquid file (position it where you want the shipping information to appear):

 <p class="variant_shipping_info" style="display: none;"></p>     
      
{% capture 'meta_data' %}
{% for variant in product.variants %}
{{variant.id}}:{{ variant.metafields.shipping.time | json }}{% unless forloop.last %},{% endunless %}
  {% endfor %}
{% endcapture %}
   
<script>
  const currentVariantId = {{ product.selected_or_first_available_variant.id }};  // get the currently selected before variant is changed. 
  const metaData = { {{ meta_data }} };
  
  const shippingInfo = (id) => {
   var selector = document.querySelector('.variant_shipping_info');
    if (metaData[id]) {
     selector.style.display = 'block'
     selector.innerHTML = metaData[id];
    } 
  }
  shippingInfo(currentVariantId);
</script> 
 
again you'll need to change the naming for you metafields. Mine are variant.metafields.shipping.time 
 
Then update the theme.js file. Find the Event handler for when a variant input changes part and add the lines in red below near the end.
 
  /**
     * Event handler for when a variant input changes.
     */
    _onSelectChange: function() {
      var variant = this._getVariantFromOptions();
 
      this.$container.trigger({
        type: 'variantChange',
        variant: variant
      });
 
      if (!variant) {
        return;
      }
 
      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this._updateSKU(variant);
      this.currentVariant = variant;
 
      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
      
  if (variant) {
       var id = variant.id 
       shippingInfo(id);
  }
      
    },
 
 
That worked for me anyway, it's based on the code from the other post above. 
Mircea_Piturca
Shopify Partner
1489 42 316

Hey @mokumprix 

You can do this via custom coding. Store the variant description in metafields, detect when a variant is changed, pull the new description from metafield, and update your product description.

Detecting the variant change depends on how your store is handling this in JavaScript. But should not be really hard for a developer to set this up.

There is an app (written by me) that does this out of the box for you: https://apps.shopify.com/dynamic-variant-description. It will handle the descriptions with a nice rich text editor, detect the variant change and update the product description. Feel free to give it a try and let me know if this works for you.

Thanks

Finally—Add variant descriptions to your products
0 Likes
robin_sandhu
Tourist
8 0 0

thanks sir helped alot

 

0 Likes