A. Changed Product description to Product/Variant summaries

Watch our video to see why you might need this!

Goal

Show the right info for the exact variant that the shopper picked. If the variant has its own Variant Summary, show those. If not, show product level Summaries with an additional Variant Product Description, called "Additional Information" if needed. If these do not excist, show the normal Product Description.

How it decides what to show

Look at the selected variant.
If that variant has a list in custom.variant_summaries, show those cards.
If the variant list is empty, look at the product.
If the product has a list in custom.summaries, show those cards.
Also check the variant for a single rich text note in custom.variant_description. If present, show it as an extra row called Additional information.
If both lists are empty and there is no variant note, show product.description inside one accordion row called Product description.

What you create in the Shopify admin

Do these steps once, if not already created

Make the metaobject type
• Content → Metaobjects → Add type
• Name: Summary item
• Fields
Title as single line text
Description as rich text
Add metafield definitions for Variants
• Settings → Custom data → Variants → Add definition
• Name: Variant summaries
• Type: List of metaobjects → Summary item
• Namespace and key: custom.variant_summaries
• Add another definition
• Name: Variant description
• Type: Rich text
• Namespace and key: custom.variant_description
Add metafield definition for Products
• Settings → Custom data → Products → Add definition
• Name: Summaries
• Type: List of metaobjects → Summary item
• Namespace and key: custom.summaries

Add the content

You will do this whenever you need new accordion rows. You already have a list of entries currently used mostly for the Moss Poles.

Create the cards
• Content → Metaobjects → Summary item → Add entry
• Fill Title and Description
• Save
• Repeat for every card you want
Attach the cards to a product or a variant
• If the same cards apply to all variants, open the product and fill the Summaries product metafield with your Summary item entries
• If a variant needs its own set, open that variant and fill the Variant summaries metafield
• If a variant only needs one extra note, fill Variant description on that variant with rich text

Place the block in your theme

Online Store → Customize
Open your product template
Add a Custom liquid block where you want the accordion
Paste the provided code from me into that block. I have done this for the default and the B2B templates already.
Save

The small CSS that comes with the code draws the top and bottom lines, sets the spacing, and makes the title row clickable.

Testing checklist

Run these after you add content.

Variant with its own cards
• Pick the variant that has entries in custom.variant_summaries
• Expected: you see those variant cards
• Switch to another variant
• Expected: cards update or disappear if the other variant has none
Product level cards only
• Clear variant_summaries and variant_description on the variant
• Expected: the product Summaries cards appear
Final fallback
• If there are no cards and no variant note
• Expected: the Product description accordion row appears

Common mistakes and how to fix them

• Nothing shows at all
Check the block is on the correct product template and you saved the theme.

• Keys do not match
Confirm these exact keys
custom.variant_summaries
custom.variant_description
custom.summaries

• Cards created but not visible
On the product or variant, attach the Summary item entries inside the correct metafield. Creating the metaobject entry is not enough. You must also link it.

• Variant note not visible
Fill Variant description on the specific variant. It is a separate rich text field.

• Product description shows when you expect cards
Make sure the product or variant metafields are filled. The block only falls back to the description when both card lists and the note are empty.

Owner quick reference

• Variant has cards
Use custom.variant_summaries

• Product has shared cards
Use custom.summaries

• One variant needs a one off note
Use custom.variant_description

• Last resort
The block shows product.description

For curious minds

• The code uses product.selected_or_first_available_variant to know which variant is active
• It uses the details and summary HTML tags to make native open and close rows
• The filter metafield_tag renders rich text safely inside the accordion

Here the code used:

{% assign variant = product.selected_or_first_available_variant %}
{% assign summary_items = variant.metafields.custom.variant_summaries.value %}

{% if summary_items %}
<div class="variant-summaries-accordion">
{% for summary_item in summary_items %}
<details class="accordion">
<summary class="accordion__title">
<span>{{ summary_item.title }}</span>
<svg role="presentation" focusable="false" width="10" height="7" class="chevron icon icon-chevron-bottom" viewBox="0 0 10 7">
<path d="m1 1 4 4 4-4" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>
</summary>
<div class="accordion__content rte">
{{ summary_item.description | metafield_tag }}
</div>
</details>
{% endfor %}
</div>
{% else %}
{% assign product_summary_items = product.metafields.custom.summaries.value %}

{% if product_summary_items or variant.metafields.custom.variant_description %}
<div class="variant-summaries-accordion">
{% if product_summary_items %}
{% for summary_item in product_summary_items %}
<details class="accordion">
<summary class="accordion__title">
<span>{{ summary_item.title }}</span>
<svg role="presentation" focusable="false" width="10" height="7" class="chevron icon icon-chevron-bottom" viewBox="0 0 10 7">
<path d="m1 1 4 4 4-4" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>
</summary>
<div class="accordion__content rte">
{{ summary_item.description | metafield_tag }}
</div>
</details>
{% endfor %}
{% endif %}

{% if variant.metafields.custom.variant_description %}
<details class="accordion">
<summary class="accordion__title">
<span>Additional information</span>
<svg role="presentation" focusable="false" width="10" height="7" class="chevron icon icon-chevron-bottom" viewBox="0 0 10 7">
<path d="m1 1 4 4 4-4" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>
</summary>
<div class="accordion__content rte">
{{ variant.metafields.custom.variant_description | metafield_tag }}
</div>
</details>
{% endif %}
</div>
{% elsif product.description != blank %}
<div class="variant-summaries-accordion">
<details class="accordion">
<summary class="accordion__title">
<span>Product description</span>
<svg role="presentation" focusable="false" width="10" height="7" class="chevron icon icon-chevron-bottom" viewBox="0 0 10 7">
<path d="m1 1 4 4 4-4" fill="none" stroke="currentColor" stroke-width="2"></path>
</svg>
</summary>
<div class="accordion__content rte">
{{ product.description }}
</div>
</details>
</div>
{% endif %}
{% endif %}