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
