Learn how to shorten your product description by hiding it inside a collapsible tab AKA accordion.
This is not the collapsible tab block that Shopify gives you by default. We will be creating a custom one so that we can continue to use our product description field.
This tutorial will be easy to follow for the following themes: - Dawn, Craft, Crave, Sense, Taste, Studio, Ride, Colorblock.
It’s also a good lesson for anyone learning Shopify theme development. I will touch on using Shopify 2.0 Metafields to enable or disable content, I’ll introduce you to using Shopify Liquid Filters. And in general, demo how to do less work by not starting from scratch!
Basic collapsible description
{%- if product.metafields.info.collapsible_description == true -%}
<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 }}
</div>
</details>
</div>
{%- else -%}
<div class="product__description rte quick-add-hidden">
{{ product.description }}
</div>
{%- endif -%}Split into a preview description and a read more
{%- if product.metafields.info.collapsible_description == true -%}
<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__description rte quick-add-hidden">
{{ product.description }}
</div>
{%- endif -%}Final code with fallback if a product is not using <!—split—>
{%- 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 -%}