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.
