Help with Metafield descriptions for variants

Technical Q&A
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!

2

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

3

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/topic/555439

4

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 :disappointed_face:

5

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

6

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):

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

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.

7

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

8

thanks sir helped alot

9

@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?

10

@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/

11

@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
Cullen_Taussig_0-1639077869715.png415×457 11.2 KB

12

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?

13

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

Cullen_Taussig_0-1639088227919.png
Cullen_Taussig_0-1639088227919.png485×445 10.4 KB

14

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

15

Hi, I read this kind of solution a couple times now but the Dawn theme doesn’t have the onVariantChange() part in the file anymore /for several months according to others). Is there a new solution for this?

16

I have updated the metafields and variant metafields data, but how do I get it to show on my store front. I have tried many attempts but they all seem to be outdated. Any help is appreciated.

17

Hi. I haven’t looked at this for a long time, I guess the code has changed a lot since then. Let me know exactly what you need to do, I can try to help