Help with Metafield descriptions for variants

mokumprix
Tourist
17 0 1

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!

Replies 13 (13)

mokumprix
Tourist
17 0 1

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

Alan15
Shopify Partner
143 27 62

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

Need more help? Contact me here
mokumprix
Tourist
17 0 1

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 😞

Alan15
Shopify Partner
143 27 62

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

Need more help? Contact me here
Alan15
Shopify Partner
143 27 62

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. 
Need more help? Contact me here
Mircea_Piturca
Shopify Partner
1547 44 344

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
robin_sandhu
Tourist
8 0 0

thanks sir helped alot

 

Cullen_Taussig
New Member
4 0 0

@Alan15  we are using a different theme called 'Dawn' and I cannot find where to put the Event handler.

 

Right now I have everything working except things do not update when I change my variant. They only update when I refresh the page. 

 

Where should I put this event handler in the new theme?

Alan15
Shopify Partner
143 27 62

@Cullen_Taussig 

for the Dawn theme the code is in the global.js file in the Assets folder. Look for the onVariantChange() on around line 570. You can do something like this (add updateMeta()):

 

onVariantChange() {	
    this.updateOptions();
    this.updateMasterId();
    this.updateMeta();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();

 

and then add an updateMeta function after, with the other update methods:

 

updateOptions() {
this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
}

updateMasterId() {
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options.map((option, index) => {
return this.options[index] === option;
}).includes(false);
});
}

updateMeta() {
shippping_info(this.currentVariant.id);
}

updateMedia() { ...

 

 I have a description here if you need more information: https://alanryan.dev/tips/product-variant-metafields/

Need more help? Contact me here
Cullen_Taussig
New Member
4 0 0

@Alan15 your suggestions worked.

 

At the end of this post is a screen shot of what we are displaying.

 

Our goal is to display a 'per unit' price by taking the variant price and dividing it by our custom variant metafield named: variant.metafields.my_fields.sku_variant_unit_qty

 

How would one go about completing this? 

 

 

 

Cullen_Taussig_0-1639077869715.png

 

Alan15
Shopify Partner
143 27 62

Hi @Cullen_Taussig,

Instead of giving your sku_variant_unit_qty metafield a value of 4, or whatever it is, just give it a value of "4 ($20 per unit)". This involves you calculating the unit price yourself. If you want more control over where to position the price, then maybe create a second variant metafield for the calculated unit price.

To do the price calculation in the code, change the {% capture %} liquid code to:

{% capture 'meta_data' %}
{% for variant in product.variants %}
{{variant.id}}:{{ variant.price | divided_by: variant.metafields.my_fields.sku_variant_unit_qty | money | json }}
{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}

Not sure if that is what you were looking for?

Need more help? Contact me here
Cullen_Taussig
New Member
4 0 0

That was exactly what we were looking for. A screenshot of the finished implementation is below.

 

Cullen_Taussig_0-1639088227919.png

 

SofBor
Shopify Partner
5 0 0

Thank you so much for sharing this Alan! This solution made my day