Add the product description inside collapsible row

Store Design
,

Topic summary

Goal: Make the product description appear in a collapsible row (accordion) on the Shopify product page. A screenshot was shared to illustrate the desired UI.

Solution provided:

  • Create a product metafield (boolean): Settings > Custom data > Products > Add definition named “Collapsible Row,” namespace/key: info.collapsible_row, type: true/false.
  • Back up theme code, then in main-product.liquid locate the description block (between {%- when ‘description’ -%} and its matching endif).
  • Replace that block with code that: if a metafield is true, wraps {{ product.description }} inside an accordion (details/summary); else shows the normal description. Toggle the metafield to True on each product to activate the collapsible view.

Note: The shared code checks product.metafields.info.collapsible_description == true, which differs from the earlier metafield key (info.collapsible_row). Despite this potential mismatch, the original poster confirmed it “worked like a charm.”

Status:

  • Outcome: Implementation successful for the original poster.
  • Open item: Another participant asked where to input the code; implicitly, it goes in main-product.liquid within the description block, but no direct reply yet.
Summarized with AI on December 30. AI used: gpt-5.
1

Hi,

As mentioned in the subject I want the product details to appear inside a collapsible row your

Mustafa_Nasri_0-1700165906857.png
Mustafa_Nasri_0-1700165906857.png424×471 7.97 KB

Your help is highly appreciated.

2

Hi,

First create a product metafield by following these steps:

  1. Go to settings - custom data - products

  2. Click on add definition and name it Collapsible Row

  3. In the Namespace and key add this info.collapsible_row

  4. Select type true or false

  5. Save

Now open your main-product.liquid and select all and copy and paste it in a notepad on your desktop to make sure that if anything went wrong you have a backup.

Search for {%- when ‘description’ -%} and select until {%- endif -%}

You will know that it is the correct endif that directly below it will be another {% when 
 something

Now paste the follwoing code “I will add on a separate reply” and save.

The final stage is to open your products and go down until you see the metafield and click on it True.

3

{%- when ‘description’ -%}
{%- if product.description != blank -%}

{%- if product.metafields.info.collapsible_description == true -%}

Details:

{% render 'icon-caret' %}
{{ product.description }}
{%- else -%}
{{ product.description }}
{%- endif -%}

{%- endif -%}

1 Like
4

Thank you very much worked like a charm

5

You are welcome glad I could help.

6

Hi, where do I input the code