Dynamic Product Content by Variant lets you display different content (descriptions, specs, size guides, media, promo labels, etc.) based on the variant a customer selects. It uses metafields/blocks to automatically switch the content, creating a smoother experience and reducing confusion. Result: customers understand the product faster and conversion rates increase.

Step 1: Create a Metafield

Go to Shopify Admin > Settings > Metafields and Metaobjects > Variants.

Configure the metafield with the following options:

• Name: Any name you prefer (e.g., “Variant Info”)

• Namespace and key: theme.variant (required)

• Content type: Choose Single-line text or Multi-line text, depending on the content you want to display.

Once saved, this metafield will appear in the variant details section of your products.

Step 2: Add Metafield Content to Product Variants

Go to Shopify Admin > Products and open the product you want to edit.

In the Variants section, select the variant, then scroll to the bottom of the page to find the Metafields section.

Enter the custom content you want to display for this variant

Step 3: Display the Metafield Content in Your Theme

To make the content dynamically display for each variant, you’ll need to use the code below. Please follow the next part to know how to add

{%- if product.variants.size > 1 -%}
{%- assign selected_variant = product.selected_or_first_available_variant -%}
<hdt-variant-toogle-info product-id="{{ product.id }}">
  {%- for variant in product.variants -%}
    {%- if variant.metafields.theme.variant != blank -%}
    <div variant-id="{{ variant.id }}"{% unless selected_variant.id == variant.id %} hidden{% endunless %}>
        {{ variant.title }}: {{ variant.metafields.theme.variant.value }}
    </div>
    {%- endif -%}
  {%- endfor -%}
</hdt-variant-toogle-info>
{%- endif -%}

3.1. In the Product Information

To show Variants in the Product Information, go to Product Page > Main product > add Liquid - HTML Blocks, then paste the code inside the content box.

3.2. In a Product Tab

To show Variants in the Product Tab, go to Product Page > Main product tabs > add Tab custom liquid, then paste the code inside the content box.