Navigate back to the homepage

How to add Accordion to your Minimal theme

Driss Oudmine
September 3rd, 2020 · 1 min read

An “accordion” is a great way to display Products descriptions to your ecommerce store, since it allows the user to quickly and easily browse your Product informations without much scrolling. And luckily, it’s simple and easy to add one to your store! Let me show you how

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Minimal theme, and then click Actions > Duplicate.
  3. Find the theme that called Copy of Minimal then click Actions > Edit Code.
  4. On the left bar, search for a folder called Snippets click Add a new Snippet.
  5. Create a snippet with a name of “accordion-description”.
  6. Copy the following code and paste it in the file that you just created which is “accordion-description”
1<style>
2 .accordian {
3 max-width: 600px;
4 display: block;
5 }
6 .accordian .card {
7 float: left;
8 width: 100%;
9 }
10 .accordian .card .card-header h3 {
11 background-color: #eee;
12 color: #444;
13 cursor: pointer;
14 padding: 18px;
15 width: 100%;
16 border: none;
17 text-align: left;
18 outline: none;
19 font-size: 15px;
20 transition: 0.4s;
21 margin: 0;
22 }
23 .accordian .card .card-header:hover h3 {
24 background-color: #ccc !important;
25 }
26 .active,
27 .card-header__title {
28 background-color: #ccc !important;
29 }
30 .noActive {
31 background-color: #eee !important;
32 }
33 .accordian .card .card-header {
34 position: relative;
35 }
36 .accordian .card .card-header span {
37 position: absolute;
38 right: 20px;
39 top: 16px;
40 height: 25px;
41 width: 25px;
42 border-radius: 50%;
43 text-align: center;
44 line-height: 25px;
45 font-size: 13px;
46 }
47 .accordian .card .card-header span.fa-plus::after {
48 content: '\002B';
49 color: #777;
50 font-weight: bold;
51 float: right;
52 margin-left: 5px;
53 }
54 .accordian .card .card-header span.fa-minus::after {
55 content: "\2212";
56 color: #777;
57 font-weight: bold;
58 float: right;
59 margin-left: 5px;
60 }
61 .accordian .card .card-body {
62 padding: 20px;
63 }
64 .accordian .card .card-body {
65 display: none;
66 }
67 /*open one card by default*/
68 .accordian .card:nth-child(1) .card-body {
69 display: block;
70 }
71 .accordian .card .card-body p {
72 font-size: 15px;
73 line-height: 24px;
74 color: #444444;
75 margin: 0px;
76 }
77</style>
78<div class="accordian">
79 {%- if product.metafields.tab1.title and product.metafields.tab1.content -%}
80 <div class="card">
81 <div class="card-header">
82 <h3 class="card-header__title">{{ product.metafields.tab1.title }}</h3>
83 <span class="fa-minus"></span>
84 </div>
85 <div class="card-body">
86 <p>
87 {{ product.metafields.tab1.content }}
88 </p>
89 </div>
90 </div>
91 {%- else -%}
92 <div class="product-description rte" itemprop="description">
93 {{ product.description }}
94 </div>
95 {%- endif -%}
96 {%- if product.metafields.tab2.title and product.metafields.tab2.content -%}
97 <div class="card">
98 <div class="card-header">
99 <h3 class="card-header">{{ product.metafields.tab2.title }}</h3>
100 <span class="fa-plus"></span>
101 </div>
102 <div class="card-body">
103 <p>
104 {{ product.metafields.tab2.content }}
105 </p>
106 </div>
107 </div>
108 {%- endif -%}
109 {%- if product.metafields.tab3.title and product.metafields.tab3.content -%}
110 <div class="card">
111 <div class="card-header">
112 <h3 class="card-header">{{ product.metafields.tab3.title }}</h3>
113 <span class="fa-plus"></span>
114 </div>
115 <div class="card-body">
116 <p>
117 {{ product.metafields.tab3.content }}
118 </p>
119 </div>
120 </div>
121 {%- endif -%}
122 {%- if product.metafields.tab4.title and product.metafields.tab4.content -%}
123 <div class="card">
124 <div class="card-header">
125 <h3 class="card-header">{{ product.metafields.tab4.title }}</h3>
126 <span class="fa-plus"></span>
127 </div>
128 <div class="card-body">
129 <p>
130 {{ product.metafields.tab4.content }}
131 </p>
132 </div>
133 </div>
134 {%- endif -%}
135 {%- if product.metafields.tab5.title and product.metafields.tab5.content -%}
136 <div class="card">
137 <div class="card-header">
138 <h3 class="card-header">{{ product.metafields.tab5.title }}</h3>
139 <span class="fa-plus"></span>
140 </div>
141 <div class="card-body">
142 <p>
143 {{ product.metafields.tab5.content }}
144 </p>
145 </div>
146 </div>
147 {%- endif -%}
148</div>
149<!-- jqurey code -->
150<script>
151 $(document).ready(function () {
152 $(".card-header").click(function () {
153 $(".card .card-header h3").removeClass("active")
154 $(".card .card-body").removeClass("active").slideUp();
155 $(".card .card-header span").removeClass("fa-minus").addClass("fa-plus");
156 $(".card .card-header h3").removeClass("active").addClass("noActive");
157 $(this).next(".card-body").slideDown();
158 $(this).children("span").removeClass("fa-plus").addClass("fa-minus");
159 $(this).children("h3").removeClass("noActive").addClass("active");
160 })
161 })
162</script>

7. Next, On the left bar. Find a folder called Sections then search for a file called “product-template.liquid” it’s the third file starting from the bottom!

8. Replace the following code

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

with the one that is highlighted below. That highlighted code is between line 221-246 in your Code Editor

1<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
2 <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
3 <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
4</div>
5<button type="submit" name="add" id="AddToCart"
6 class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
7 <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
8</button>
9{% if section.settings.enable_payment_button %}
10{{ form | payment_button }}
11{% endif %}
12{% endform %}
13{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
14<div class="tabs">
15 <ul class="tab-switch__nav">
16 <li>
17 <a href="#description" data-link="description"
18 class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
19 </li>
20 <li>
21 <a href="#extra" data-link="extra"
22 class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
23 </li>
24 </ul>
25 <div id="description" class="tab-switch__content" data-content="description">
26 <div class="product-description rte" itemprop="description">
27 {{ product.description }}
28 </div>
29 </div>
30 <div id="extra" class="tab-switch__content" data-content="extra">
31 <div class="rte">
32 {{ pages[section.settings.extra_tab_content].content }}
33 </div>
34 </div>
35</div>
36{% else %}
37<div class="product-description rte" itemprop="description">
38 {{ product.description }}
39</div>
40{% endunless %}
41{% if section.settings.social_sharing %}
42<hr class="hr--clear hr--small">
43<h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
44{% include 'social-sharing' %}
45{% endif %}
46</div>

9. Now, we are going to need custom fields in order to make each product with its own informations! so in this case we will need to install an app called Metafields Guru

10. After you install the app, select Products and Variants then choose one of your products that you want to have Accordion.

11. After you choose the product, click on Create Metafield button.

12. Now you can see a Form appeared after you click on Create Metafield, inside the input with name of “Key” start writing title and inside the input with the name of “Namespace” start writing tab1. Next give a title to your first tab inside the last input which is the tallest one!

13. After you finish your first Metafield, create another one by clicking on Create Metafield button. Again inside the input with the name of “Key” start writing content and inside the input with the name of “Namespace” start writing tab1. Finally inside the tallest input start writing the Content of your first tab.

14. After you finish creating all tabs you can click on Save button.

Note: Hey, if you have any issues implementing the Accordion into your Shopify Store. DM me on Instagram so I can help

More articles from doudmine

Custom Header With Hide on Scroll Down & Show on Scroll Up in Shopify - No app

In this tutorial you will learn how to re-design your header to a custom one that looks professional!

March 7th, 2021 · 1 min read

Advanced Slider for your Shopify store

In this tutorial you will learn how to implement an advanced slider that has a lot of features to your shopify store

February 5th, 2021 · 1 min read
© 2020–2021 doudmine
Link to $https://www.instagram.com/doudmine/Link to $https://www.youtube.com/channel/UCYF73P2A2NdVr6c9aONH22w