Shopify Liquid
Info Tabs

Drop this Shopify Liquid snippet into your theme to add the info tabs block. Copy the code below, paste it into your theme files, save and you're done.
103 lines · 3.4 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>Product Info Tabs</title>
7    <style>
8
9              .tabs-container {
10                  max-width: 500px;
11                  margin: 0 auto;
12                  
13                  border-radius: 10px;
14                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15                  overflow: hidden;
16              }
17              .tabs-header {
18                  display: flex;
19                  gap: 10px;
20              }
21      .tab {
22          flex: 1;
23          padding: 8px 8px;
24          text-align: center;
25          font-weight: bold;
26          cursor: pointer;
27      background: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
28          color: #ffffff;
29          max-width: 33.33%;
30          box-sizing: border-box;
31          align-items: center;
32          display: flex;
33          justify-content: center;
34          border-top-left-radius: 8px;
35          border-top-right-radius: 8px;
36      font-size: 13px;
37      transition: background-color 0.8s ease;
38      }
39              .tab.active {
40                  background: #ffffff;
41                  color: #1b3a57;
42              }
43              .tab-content {
44                  padding: 5px 10px;
45                  display: none;
46      font-size: 13px;
47      transition: opacity 0.5s ease;
48              }
49              .tab-content.active {
50                  display: block;
51          background: #fff;
52          border-bottom-left-radius: 8px;
53          border-bottom-right-radius: 8px;
54      opacity: 1;
55              }
56    </style>
57  </head>
58  <body>
59    <div class="container page-width">
60      <div class="tabs-container">
61        <div class="tabs-header">
62          <div class="tab active" onclick="showTabContent('when-to-take')">
63            tab 1
64          </div>
65          <div class="tab" onclick="showTabContent('description')">tab 2</div>
66          <div class="tab" onclick="showTabContent('ingredients')">tab 3</div>
67        </div>
68        <div id="when-to-take" class="tab-content active">
69          <div>
70            <p>
71              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
72              non urna eu nisi pretium viverra.
73            </p>
74          </div>
75        </div>
76        <div id="description" class="tab-content">
77          <p>
78            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
79            urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur
80            adipiscing elit. Nullam non urna eu nisi pretium viverra.
81          </p>
82        </div>
83        <div id="ingredients" class="tab-content">
84          <p>
85            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
86            urna eu nisi pretium viverra.
87          </p>
88        </div>
89      </div>
90    </div>
91
92    <script>
93      function showTabContent(tabId) {
94          const tabs = document.querySelectorAll('.tab');
95          const tabContents = document.querySelectorAll('.tab-content');
96          tabs.forEach(tab => tab.classList.remove('active'));
97          tabContents.forEach(content => content.classList.remove('active'));
98          document.querySelector(`[onclick="showTabContent('${tabId}')"]`).classList.add('active');
99          document.getElementById(tabId).classList.add('active');
100      }
101    </script>
102  </body>
103</html>
Related snippets

/ shopify liquid
Info Tabs

Related snippets

Facebook Posts

Scroll to top button

Reviews v1

Google Reviews
