Welcome to CodeCrew Infotech
Hiding a Long Description in Collapsible Accordion in Shopify.
In this blog we will show you to how to shorten your product description by hiding it inside a collapsible tab.
The Collapsible tab block gives you default by Shopify. We will be creating a custom one so that we can continue to use our product description field.
Step 1:- First login into shopify admin and follow the steps
Step 2:- Themes > Actions > Edit code
Search the main-product.liquid file
Then after search the following code
|
{%- when 'description' -%} {%- if product.description != blank -%} |
Paste the below code after the if condition.
|
{%- if product.metafields.info.collapsible_description == true -%} {%- if product.description contains '<!--split-->' -%} <div class="product__description rte quick-add-hidden"> {{ product.description | split: '<!--split-->' | first }} </div> <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}> <details id="Details-{{ block.id }}-{{ section.id }}"> <summary> <div class="summary__title"> {% render 'icon-accordion', icon: 'clipboard' %} <h2 class="h4 accordion__title"> Read more </h2> </div> {% render 'icon-caret' %} </summary> <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}"> {{ product.description | split: '<!--split-->' | last }} </div> </details> </div> {%- else -%} <div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}> <details id="Details-{{ block.id }}-{{ section.id }}"> <summary> <div class="summary__title"> {% render 'icon-accordion', icon: 'clipboard' %} <h2 class="h4 accordion__title"> Description </h2> </div> {% render 'icon-caret' %} </summary> <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}"> {{ product.description | split: '<!--split-->' | last }} </div> </details> </div> {%- endif -%} {%- else -%} <div class="product__description rte quick-add-hidden"> {{ product.description }} </div> {%- endif -%}
|
Create the metafield for the Collapsible tab.
--> Go to settings in shopify admin and click the Custom data.
--> Then after select the product related metafield.
--> Add the definations of the metafield like "Collapsible description"
--> and select the type Boolean( yes or no ) and Save.
--> Finally going to product page and enable(yes) collapsible description metafields and check your product description.
You may also like
