Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Multi Description with multi variants

Solved

How can I add unique descriptions for each product variant?

earthtreasures
Excursionist
35 1 7

I'm trying to add multiple description for a variant.  e.g. I have a product that has multiple variant and each has a different description. So I'm trying to add each variant with its own description.

 

Like I have Crystal Hearts and each stone has a different description.  e.g. The Main Product would be Hearts

under hearts would have Rose Qtz Hearts, Amethyst Hearts, etc... So Description of Rose Qtz Heart would be different from Amethyst Heart. 

 

Can Some one please help me.

URL :

https://earthtreasuresusa.myshopify.com

 

Thanks

Accepted Solution (1)
earthtreasures
Excursionist
35 1 7

This is an accepted solution.

I have a question regarding the app, if I cancel the monthly charges would I loose all custom descriptions I previously created? 

View solution in original post

Replies 9 (9)

MarmetoCare
Explorer
70 6 19

Hi @earthtreasures Welcome to Shopify Community

 

Yes you can add different descriptions for each product variant. This can be done through custom coding and through app as well. The app called Variant Description OMG 

 

You can let me know if you want to make it in a custom coded way which will give you multiple additional features like dropdown or slab, unique design.

 

Hope that helps.

 

Please feel free to reach out at sales@marmeto.com if you need any further assistance. 

Regards,

Team Marmeto

earthtreasures
Excursionist
35 1 7

Thank you very much for your quick reply, can you please send me the custom code.

MarmetoCare
Explorer
70 6 19

Hi @earthtreasures Glad that it helped 🙂 

 

The code will have dependency like how you want it to look like, design creation etc and there is an developer effort involved to this. I would suggest you to please share your email address to provide the details on email and take this discussion forward. 

Regards, 

Team Marmeto

earthtreasures
Excursionist
35 1 7

earthtreasuresusa@gmail.com

MarmetoCare
Explorer
70 6 19

@earthtreasures Thank you for sharing the email address. Sharing the details with you Shortly 🙂 

 

Thanks & Regards, 

Team Marmeto

earthtreasures
Excursionist
35 1 7

This is an accepted solution.

I have a question regarding the app, if I cancel the monthly charges would I loose all custom descriptions I previously created? 

Sunshine10
Tourist
12 0 3

@earthtreasures 

I see that you have variant description for each variant in your product detail. Can you please help me with the piece of code you used to achieve. I do not see it in this thread.

 

Thanks in advance

soulchild37
Shopify Partner
194 9 60

Hi Earthtreasures,

 

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.

 

soulchild37_0-1727192657135.png

 



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>

 

 

Copy

 

 

 

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.

 

soulchild37_1-1727192657241.gif

 



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

Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog

soulchild37
Shopify Partner
194 9 60

Hi Earthtreasures,

 

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.

 

soulchild37_0-1727192776349.png

 


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.

 

soulchild37_1-1727192776349.gif

 



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

Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog