Solved

Add the product description inside collapsible row

Mustafa_Nasri
Shopify Partner
19 0 1

Hi,

 

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

 

Mustafa_Nasri_0-1700165906857.png

Your help is highly appreciated.

Accepted Solution (1)
Natasha-Saed
Shopify Partner
412 45 73

This is an 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 -%}

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint

View solution in original post

Replies 5 (5)

Natasha-Saed
Shopify Partner
412 45 73

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.

 

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
Natasha-Saed
Shopify Partner
412 45 73

This is an 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 -%}

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
Mustafa_Nasri
Shopify Partner
19 0 1

Thank you very much worked like a charm

Natasha-Saed
Shopify Partner
412 45 73

You are welcome glad I could help.

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
DaveyAlcatraz
Visitor
1 0 0

Hi, where do I input the code