Add the product description inside collapsible row

[Mustafa_Nasri]

Hi,

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

Your help is highly appreciated.

[Natasha-Saed]

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.

[Natasha-Saed · Accepted solution]

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

{%- if product.metafields.info.collapsible_description == true -%}
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>

<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
<h2 class="h4 accordion__title inline-richtext">
Details:
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
{{ product.description }}
</div>
</details>
</div>

</div>
{%- else -%}
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
{{ product.description }}
</div>
{%- endif -%}

{%- endif -%}

[Mustafa_Nasri]

Thank you very much worked like a charm

[Natasha-Saed]

You are welcome glad I could help.

[DaveyAlcatraz]

Hi, where do I input the code