/

August 5, 2024

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.

From the same category