How to set different description for each product variant in Shopify

By default, Shopify will show the same product description for all variants, despite the variants having different contents. One common workaround is to put all variants information into the product description, but this would make it harder for the customer to read information relevant to the variant of their interest.

Wouldn’t it be good if we can show different variant description when customer selects different variant? This tutorial will guide you on implementing different variant description using variant metafields and some custom code. (No apps required)

Create metafield definition for variant to store the description

First, we will create a metafield definiton for variants, to store the description unique for each variant. Go to your store settings, select “Custom Data” on the left side bar, and click “Variants”:

Then click “Add definiton”:

In the definition form, input Variant Description for the “Name” field, and ensure the “Namespace and key” field value is custom.variant_description, and select “Rich text” for the type, and remember to enable “Storefront access” (set to “Read”), so the theme code can access this value later on. Click “Save” to save the changes.

Next, go to the product variants you want to edit the description (Online Stores > Product, and select your product, and scroll to the variants), click on the variant, and scroll down to “Metafields” section, and click “View all”, then edit the “Variant Description” as you like :

Add custom code to show the variant description in product page

Next, we will customize the product page in the Theme Editor, to add code to show the variant description.

Go to your Shopify Admin, select “Online Store” > “Themes”, then go to your current theme, and click “Customize”:

Then navigate to the product page template :

Change the product preview to a product that has variants (the product variant description which you have edited in earlier steps), then click “Add block” under the “Product information” section.

Select “Custom Liquid” :

Next, click into the “Custom Liquid” block,

(Thank you Alex for the code for observing URL parameter changes for variantID !)

And add this code :

{% 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);
  }
}

// Set up observer for changes
const observer = new MutationObserver((mutations) => {
  const urlParams = new URLSearchParams(window.location.search);
  const variantId = urlParams.get('variant');
  if(variantId) {
    yagiHideAllVariantDescriptionExcept(variantId);
  }
});

observer.observe(document.body, {
  subtree: true,
  childList: true
});

</script>

Save the changes, then you should see the variant description appear in the product page. Different variant description will appear based on your selection of variant.

Next, you can reposition the variant description block (custom liquid) to the position you want, by dragging it in the Theme customizer.

And now you can go to the actual product page on your store, and see the variant description in action.