How To Add Different Description Per Variant – [Shopify Tutorial]

Step 1: Create Variant Metafields

Goto Settings > Custom Data and create variant metafields like below:

Make sure Namespace and key is “custom.variant_description”

Step 2: Add code in main-product.liquid

Add the following code above {%- when 'description' -%} in main-product.liquid file:

Copy Code

{%- when 'variant_description' -%}
  <div class="product__description variant__description rte quick-add-hidden" {{ block.shopify_attributes }}>
    {% assign namespace = 'custom' %}
    {% assign key = 'variant_description' %}  <!-- Hardcoded value here -->
    {% if namespace != blank and key != blank %}
      {% assign variant_description_metafield = product.selected_or_first_available_variant.metafields[namespace][key] %}
      {% if variant_description_metafield.type == 'rich_text_field' %}
        {% assign variant_description_text = variant_description_metafield | metafield_tag %}
      {% endif %}
    {% endif %}
    <div class="variant-description__content">
      {%- if variant_description_text != blank -%}
        {{ variant_description_text }}
      {% else %}
        {% case block.settings.default_description_type %}
          {% when 'product_description' %}
            {%- if product.description != blank -%}
              {{ product.description }}
            {%- endif -%}
          {% when 'richtext_description' %}
            {%- if block.settings.richtext_description != blank -%}
              {{ block.settings.richtext_description }}
            {%- endif -%}
          {% when 'none' %}
            <!-- Intentionally left empty -->
        {% endcase %}
      {% endif %}
    </div>
  </div>

Add the following code above { "type": "description" schema code:

Copy Code

{
  "type": "variant_description",
  "name": "Variant Description",
  "limit": 1,
  "settings": [
    {
      "type": "select",
      "id": "default_description_type",
      "options": [
        {
          "value": "product_description",
          "label": "Product Description"
        },
        {
          "value": "richtext_description",
          "label": "Rich Text"
        },
        {
          "value": "none",
          "label": "None"
        }
      ],
      "default": "product_description",
      "label": "Alternative Variant Description",
      "info": "Alternative source if variant description is empty"
    },
    {
      "type": "richtext",
      "id": "richtext_description",
      "label": "Alternative Rich Text Variant Description"
    }
  ]
},

Step 3: Add code in product-info.js

Add the following code above updateVariantInputs(variantId) code in product-info.js file:

Copy Code

     updateDescription(html) {
  const newDescriptionContainer = html.querySelector('.variant__description');
  const currentDescriptionContainer = this.querySelector('.variant__description');

  if (newDescriptionContainer && currentDescriptionContainer) {
    const newContent = newDescriptionContainer.innerHTML.trim();
    
    if (newContent === '') {
      // Hide the container if there's no content
      currentDescriptionContainer.classList.add('hidden');
      currentDescriptionContainer.innerHTML = '';
    } else {
      // Show and update the container if there's content
      currentDescriptionContainer.classList.remove('hidden');
      currentDescriptionContainer.innerHTML = newContent;
    }
  }
}

Add this code this.updateDescription(html); above this line this.updateMedia(html, variant?.featured_media?.id);