How to Add an Accordion to Your Minimal Theme

Driss
September 3, 2020

An accordion is an effective way to display product descriptions in your e-commerce store, allowing users to quickly and easily browse product information without excessive scrolling. This guide will walk you through adding an accordion to your Shopify Minimal theme.

Benefits of Using an Accordion

Organizes product information into collapsible sections
Reduces page length and improves navigation
Enhances user experience by allowing selective viewing of information
Can potentially increase sales by making product details more accessible

Prerequisites

Access to Shopify admin panel
Ability to edit theme code
Metafields Guru app (or similar metafields management app)

Step-by-Step Instructions

1. Create a Theme Backup

From your Shopify admin, go to Online Store > Themes, and duplicate your active theme for safe editing.

2. Create the Accordion Snippet

In your duplicated theme, navigate to the Snippets folder
Click Add a new snippet
Name the snippet “accordion-description”
Copy and paste the following code into the new snippet:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152


<style>
  .accordian {
    max-width: 600px;
    display: block;
  }
  .accordian .card {
    float: left;
    width: 100%;
  }
  .accordian .card .card-header h3 {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin: 0;
  }
  .accordian .card .card-header:hover h3 {
    background-color: #ccc !important;
  }
  .active,
  .card-header__title {
    background-color: #ccc !important;
  }
  .noActive {
    background-color: #eee !important;
  }
  .accordian .card .card-header {
    position: relative;
  }
  .accordian .card .card-header span {
    position: absolute;
    right: 20px;
    top: 16px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    font-size: 13px;
  }
  .accordian .card .card-header span.fa-plus::after {
    content: "\\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  .accordian .card .card-header span.fa-minus::after {
    content: "\\2212";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  .accordian .card .card-body {
    padding: 20px;
  }
  .accordian .card .card-body {
    display: none;
  }
  /*open one card by default*/
  .accordian .card:nth-child(1) .card-body {
    display: block;
  }
  .accordian .card .card-body p {
    font-size: 15px;
    line-height: 24px;
    color: #444444;
    margin: 0px;
  }
</style>
<div class="accordian">
  {%- if product.metafields.tab1.title and product.metafields.tab1.content -%}
  <div class="card">
    <div class="card-header">
      <h3 class="card-header__title">{{ product.metafields.tab1.title }}</h3>
      <span class="fa-minus"></span>
    </div>
    <div class="card-body">
      <p>{{ product.metafields.tab1.content }}</p>
    </div>
  </div>
  {%- else -%}
  <div class="product-description rte" itemprop="description">
    {{ product.description }}
  </div>
  {%- endif -%} {%- if product.metafields.tab2.title and
  product.metafields.tab2.content -%}
  <div class="card">
    <div class="card-header">
      <h3 class="card-header">{{ product.metafields.tab2.title }}</h3>
      <span class="fa-plus"></span>
    </div>
    <div class="card-body">
      <p>{{ product.metafields.tab2.content }}</p>
    </div>
  </div>
  {%- endif -%} {%- if product.metafields.tab3.title and
  product.metafields.tab3.content -%}
  <div class="card">
    <div class="card-header">
      <h3 class="card-header">{{ product.metafields.tab3.title }}</h3>
      <span class="fa-plus"></span>
    </div>
    <div class="card-body">
      <p>{{ product.metafields.tab3.content }}</p>
    </div>
  </div>
  {%- endif -%} {%- if product.metafields.tab4.title and
  product.metafields.tab4.content -%}
  <div class="card">
    <div class="card-header">
      <h3 class="card-header">{{ product.metafields.tab4.title }}</h3>
      <span class="fa-plus"></span>
    </div>
    <div class="card-body">
      <p>{{ product.metafields.tab4.content }}</p>
    </div>
  </div>
  {%- endif -%} {%- if product.metafields.tab5.title and
  product.metafields.tab5.content -%}
  <div class="card">
    <div class="card-header">
      <h3 class="card-header">{{ product.metafields.tab5.title }}</h3>
      <span class="fa-plus"></span>
    </div>
    <div class="card-body">
      <p>{{ product.metafields.tab5.content }}</p>
    </div>
  </div>
  {%- endif -%}
</div>
<!-- jqurey code -->
<script>
  $(document).ready(function () {
    $(".card-header").click(function () {
      $(".card .card-header h3").removeClass("active");
      $(".card .card-body").removeClass("active").slideUp();
      $(".card .card-header span").removeClass("fa-minus").addClass("fa-plus");
      $(".card .card-header h3").removeClass("active").addClass("noActive");
      $(this).next(".card-body").slideDown();
      $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
      $(this).children("h3").removeClass("noActive").addClass("active");
    });
  });
</script>

3. Update the Product Template

Navigate to the Sections folder in your theme editor
Locate the product-template.liquid file
Find the code section that displays product description (typically around lines 221-246)
Replace the existing product description code:

1
2
3


<div class="product-description rte" itemprop="description">
  {% include 'accordion-description' %}
</div>

With the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
   <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
   <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>
<button type="submit" name="add" id="AddToCart"
   class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
   <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
<div class="tabs">
   <ul class="tab-switch__nav">
      <li>
         <a href="#description" data-link="description"
            class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
      </li>
      <li>
         <a href="#extra" data-link="extra"
            class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
      </li>
   </ul>
   <div id="description" class="tab-switch__content" data-content="description">
      <div class="product-description rte" itemprop="description">
         {{ product.description }}
      </div>
   </div>
   <div id="extra" class="tab-switch__content" data-content="extra">
      <div class="rte">
         {{ pages[section.settings.extra_tab_content].content }}
      </div>
   </div>
</div>
{% else %}
<div class="product-description rte" itemprop="description">
   {{ product.description }}
</div>
{% endunless %}
{% if section.settings.social_sharing %}
<hr class="hr--clear hr--small">
<h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
{% include 'social-sharing' %}
{% endif %}
</div>

4. Configure Metafields for Accordion Content

Install the Metafields Guru app or similar metafields management app
Open the app and select Products and Variants
Choose the product where you want to add accordion content
Click the Create Metafield button
To create the first tab title:
- Set the Key to title
- Set the Namespace to tab1
- Enter the tab title in the value field
Create another metafield for the first tab content:
- Set the Key to content
- Set the Namespace to tab1
- Enter the tab content in the value field
Repeat steps 4-6 for additional tabs, incrementing the namespace (tab2, tab3, etc.)
Click Save when finished

5. Test the Accordion

Visit your product page to verify that the accordion is working correctly and displaying your custom content.

Result

The accordion will now display on your product pages, allowing customers to expand and collapse sections of product information.

Additional Notes

The accordion approach allows you to organize product information into distinct, easy-to-navigate sections
Make sure to test the accordion on different devices to ensure responsive behavior
You can create up to 5 tabs using this code; modify the HTML for additional tabs if needed

For additional support, feel free to reach out via the contact form.