How can I add unique descriptions for each product variant?

[earthtreasures]

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

[MarmetoCare]

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 [email protected] if you need any further assistance. 

Regards,

Team Marmeto

[earthtreasures]

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

[MarmetoCare]

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]

[email protected]

[MarmetoCare]

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

Thanks & Regards, 

Team Marmeto

[earthtreasures · 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]

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

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.

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.

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]

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.

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