Shopify Liquid
FAQ

Drop this Shopify Liquid snippet into your theme to add the faq block. Copy the code below, paste it into your theme files, save and you're done.
124 lines · 3.6 KB
Shopify Liquid
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>FAQ Accordion Section</title>
7    <style>
8      .accordion {
9          width: 100%;
10          max-width: 800px;
11          margin: 40px auto;
12          border-radius: 5px;
13      }
14      .accordion-item {
15          border-bottom: 1px solid #ccc;
16          margin-bottom: 3px;
17      }
18      .accordion-item:last-child {
19          border-bottom: none;
20      }
21      .accordion-header {
22          padding: 8px;
23          cursor: pointer;
24          font-weight: bold;
25          font-size: 13px;
26          display: flex;
27          justify-content: space-between;
28          align-items: center;
29      }
30      .accordion-header .indicator {
31          font-size: 1.3em;
32          margin-left: 8px;
33          transition: transform 0.3s ease;
34      }
35      .accordion-item.active .indicator {
36          content: '-';
37          transform: rotate(180deg);
38      }
39      .accordion-content {
40          max-height: 0;
41          overflow: hidden;
42          padding: 0 10px;
43          transition: max-height 0.3s ease, padding 0.3s ease;
44      }
45      .accordion-content p {
46          margin: 8px 0;
47          font-size: 12px;
48      }
49      .active .accordion-content {
50          max-height: 150px;
51          padding: 8px 10px;
52      }
53    </style>
54  </head>
55  <body>
56    <div class="container page-width">
57      <div class="accordion">
58        <div class="accordion-item">
59          <div class="accordion-header">
60            Question 1<span class="indicator">+</span>
61          </div>
62          <div class="accordion-content">
63            <p>
64              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
65              non urna eu nisi pretium viverra.
66            </p>
67          </div>
68        </div>
69        <div class="accordion-item">
70          <div class="accordion-header">
71            Question 2<span class="indicator">+</span>
72          </div>
73          <div class="accordion-content">
74            <p>
75              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
76              non urna eu nisi pretium viverra.
77            </p>
78          </div>
79        </div>
80        <div class="accordion-item">
81          <div class="accordion-header">
82            Question 3<span class="indicator">+</span>
83          </div>
84          <div class="accordion-content">
85            <p>
86              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
87              non urna eu nisi pretium viverra.
88            </p>
89          </div>
90        </div>
91        <div class="accordion-item">
92          <div class="accordion-header">
93            Question 4<span class="indicator">+</span>
94          </div>
95          <div class="accordion-content">
96            <p>
97              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
98              non urna eu nisi pretium viverra.
99            </p>
100          </div>
101        </div>
102      </div>
103    </div>
104
105    <script>
106      function handleAccordionClick(event) {
107          const item = event.target.closest('.accordion-item');
108          if (item) {
109              item.classList.toggle('active');
110              const indicator = item.querySelector('.indicator');
111              if (item.classList.contains('active')) {
112                  indicator.textContent = '-';
113              } else {
114                  indicator.textContent = '+';
115              }
116          }
117      }
118
119      document.querySelectorAll('.accordion-header').forEach(header => {
120          header.addEventListener('click', handleAccordionClick);
121      });
122    </script>
123  </body>
124</html>
Related snippets

/ shopify liquid
FAQ

Related snippets

Mothers Day

New Year

Order Arrive

Payment Badge
