How can I set different descriptions for each product variant?

[kurtvandeweerdt]

I'm setting up my first Shopify webshop now and I encounter this issue.

I'm a photographer and I'm going to sell my images in different sizes and different carriers, like paper print, canvas, dibond and passe-partout frame. So, I use the variants. It's great to be able to assign a different image for each variant, but I like this to happen with the description as well. Now the description stays the same for each different variant. 

In the image attached you see that in the description I have put the information about the paper print, the canvas, dibond, etc. all in one long read. Which is not what I want.

Can someone help me out with this? I check other topics, but at first sight I can't find a solution. I'm using the theme Debut. I have minor, but some, coding experience.

Thanks! Stay safe & strong these days.

[Guleria]

Hello,

Check out this post  everything explained very well here.
Thanks

[AakashInfoTech]

A new solution is here in 2021

Please check this app - https://apps.shopify.com/variants-description

[Mircea_Piturca]

@kurtvandeweerdt I've started that post that @Guleria is mentioning.
This is something that can be done with some custom coding.
It is apparently an easy implementation but unfortunately, it will not scale.
It will work but, you can not make this work nicely with many products.

After 5 years I've built an app that allows you to easily set custom unique descriptions to product variants.
Looks like Aakash beat me to it, but anyway here is my application: https://apps.shopify.com/dynamic-variant-description
You can see some demo products here: https://bit.ly/3qAbhrv, use password foo if asked.

Hope it helps

[maitry]

I want to show variant description first and below that default should show. Is it possible with this app?

[ahmad_al_hamwi]

@natashadisante, Can you please advise how to the first part of your comment: "The only way to do this natively in Shopify is to create a metafield for your variants, and store the description there. You can then easily insert the metafield into your liquid pages." 

Am trying to find a way to do this with no luck. And I will be using a different theme starting next year, so I need a solution that works for all themes and use Variant.Metafields to dispaly different time to dispatch fields. 

IF you can support in coding this or if you can refer someone, please let me know. 

Thank you

[dontforget]

https://apps.shopify.com/dynamic-variant-description

[soulchild37]

Hi Kurtvandeweerdt,

You can utilize the metafield (Custom Data) feature offered by Shopify, to store the description unique to each product variants.

You can go to your store Settings > Custom Data > Variants, and create a custom definition, with name "Variant Description" ,  Namespace and key "custom.variant_description", set the type to "Rich Text" .

After creating this definition, you can go to your product > select the variant, and scroll to metafield sections, and find the "Variant Description" , and you can enter the description you want for that variant.

After this, you can go to your store theme > Customize, and navigate to the product page template, and click "Add block" under the "Product information" section, and select "Custom Liquid". Next, you can click into this "Custom Liquid" block, and paste the code below : 

{% for variant in product.variants %}
<div class="yagi-variant-description" data-variant-id="{{ variant.id }}" style="display:none;">
  {{ variant.metafields.custom.variant_description | metafield_tag }}
</div>
{% endfor %}

<script>
function yagiHideAllVariantDescriptionExcept(variant){
  document.querySelectorAll('.yagi-variant-description').forEach(el => {
    el.style.display = 'none';
  });

  const descriptionEl = document.querySelector(`.yagi-variant-description[data-variant-id="${variant}"]`);
  if (descriptionEl){ descriptionEl.style.display = 'block'; }
}

const queryString = location.search;
const urlParams = new URLSearchParams(queryString);
var variantId = '{{ product.variants.first.id }}';

if(urlParams.get('variant')){
  variantId = urlParams.get('variant');
}

yagiHideAllVariantDescriptionExcept(variantId);

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("input[type='hidden'].product-variant-id").addEventListener('change', yagiVariantChanged);
});

function yagiVariantChanged() {
  if (document.querySelector('.product-variant-id')?.value !== variantId) {
    variantId = document.querySelector('.product-variant-id')?.value;

    if(!variantId) { variantId == '{{ product.variants.first.id }}' }
    yagiHideAllVariantDescriptionExcept(variantId);
  }
}
</script>

Click "Save", then go to your online store, and navigate to the product , you should see the description show / hide based on the variant you have selected.

If you would like to follow a step-by-step guide with screenshots for this, you can follow this guide I wrote here : https://yagisoftware.com/articles/how-to-set-different-description-for-each-product-variant-in-shopi... 

Hope this can help! 

Regards,

Axel Kee

[soulchild37]

Hello Kurtvandeweerdt,

You can utilize the metafield (Custom Data) feature, to store the description unique to each product variants.

You can go to your store Settings > Custom Data > Variants, and create a custom definition, with name "Variant Description" ,  Namespace and key "custom.variant_description", set the type to "Rich Text" .

After creating this definition, you can go to your product > select the variant, and scroll to metafield sections, and find the "Variant Description" , and you can enter the description you want for that variant.

After this, you can go to your store theme > Customize, and navigate to the product page template, and click "Add block" under the "Product information" section, and select "Custom Liquid". Next, you can click into this "Custom Liquid" block, and paste the code below : 

{% for variant in product.variants %}
<div class="yagi-variant-description" data-variant-id="{{ variant.id }}" style="display:none;">
  {{ variant.metafields.custom.variant_description | metafield_tag }}
</div>
{% endfor %}

<script>
function yagiHideAllVariantDescriptionExcept(variant){
  document.querySelectorAll('.yagi-variant-description').forEach(el => {
    el.style.display = 'none';
  });

  const descriptionEl = document.querySelector(`.yagi-variant-description[data-variant-id="${variant}"]`);
  if (descriptionEl){ descriptionEl.style.display = 'block'; }
}

const queryString = location.search;
const urlParams = new URLSearchParams(queryString);
var variantId = '{{ product.variants.first.id }}';

if(urlParams.get('variant')){
  variantId = urlParams.get('variant');
}

yagiHideAllVariantDescriptionExcept(variantId);

document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("input[type='hidden'].product-variant-id").addEventListener('change', yagiVariantChanged);
});

function yagiVariantChanged() {
  if (document.querySelector('.product-variant-id')?.value !== variantId) {
    variantId = document.querySelector('.product-variant-id')?.value;

    if(!variantId) { variantId == '{{ product.variants.first.id }}' }
    yagiHideAllVariantDescriptionExcept(variantId);
  }
}
</script>

Click "Save", then go to your online store, and navigate to the product , you should see the description show / hide based on the variant you have selected.

If you would like to follow a step-by-step guide with screenshots for this, you can follow this guide I wrote here : https://yagisoftware.com/articles/how-to-set-different-description-for-each-product-variant-in-shopi... 

Hope this can help! 

Regards,

Axel Kee