Shopify Liquid
Comparison Table 2

Drop this Shopify Liquid snippet into your theme to add the comparison table 2 block. Copy the code below, paste it into your theme files, save and you're done.
166 lines · 3.9 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>Why Choose Us?</title>
7  <style>
8    @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
9    @import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
10
11    body.unique-body-class {
12      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13      margin: 0;
14      padding: 0;
15      color: #333;
16      background: linear-gradient(135deg, #24A06F 10%, #88D9A5 50%, #D4F7E7 90%);
17    }
18
19    .unique-table-class {
20      max-width: 95%;
21      width: 80%;
22      margin: 20px auto;
23      border-spacing: 0;
24      border-radius: 16px;
25      overflow: hidden;
26      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27    }
28
29    .unique-table-class thead {
30      background: linear-gradient(135deg, #24A06F, #1B774F);
31      color: #fff;
32      text-transform: uppercase;
33    }
34
35    .unique-table-class th {
36      padding: 16px;
37      font-size: 14px;
38      letter-spacing: 1px;
39    }
40
41    .unique-table-class tbody tr {
42      transition: background-color 0.3s;
43    }
44
45    .unique-table-class tbody tr:nth-child(even) {
46      background: #f7f7f7;
47    }
48
49    .unique-table-class tbody tr:hover {
50      background: #e8f5e9;
51    }
52
53    .unique-table-class td {
54      padding: 14px;
55      text-align: center;
56      border-bottom: 1px solid #ddd;
57      font-size: 15px;
58    }
59
60    .unique-highlighted-cell {
61      background: #dcedc8;
62      font-weight: bold;
63      border-radius: 8px;
64      padding: 12px;
65    }
66
67    .unique-check-icon {
68      font-family: 'Material Icons';
69      color: #34a853;
70      font-size: 22px;
71    }
72
73    .unique-cross-icon {
74      font-family: 'Material Icons';
75      color: #ea4335;
76      font-size: 22px;
77    }
78
79    .unique-blue-icon {
80      font-family: 'Material Icons';
81      color: #4285f4;
82      font-size: 22px;
83    }
84
85    .unique-red-icon {
86      font-family: 'Material Icons';
87      color: #ea4335;
88      font-size: 22px;
89    }
90
91    @media (max-width: 600px) {
92      .unique-table-class {
93        font-size: 12px;
94      }
95
96      .unique-table-class th,
97      .unique-table-class td {
98        padding: 10px;
99      }
100    }
101
102    .handwritten-font {
103      font-family: 'Pacifico', cursive;
104      background: linear-gradient(135deg, #24A06F, #1B774F);
105      -webkit-background-clip: text;
106      -webkit-text-fill-color: transparent;
107      font-size: 24px;
108      display: inline;
109    }
110
111    .question-mark {
112      color: #24A06F;
113      font-size: 24px;
114    }
115
116    .black-text {
117      font-size: 18px;
118      color: #333;
119    }
120  </style>
121</head>
122<body class="unique-body-class">
123  <h1 style="text-align: center; margin-top: 20px;">
124    <span class="black-text">Why Do Our Customers</span>
125    <span class="handwritten-font">Choose Us</span>
126    <span class="question-mark">?</span>
127  </h1>
128  <table class="unique-table-class">
129    <thead>
130      <tr>
131        <th>Features</th>
132        <th>Morning Recovery</th>
133        <th>Hydration Powder</th>
134      </tr>
135    </thead>
136    <tbody>
137      <tr>
138        <td>Clinically Proven**</td>
139        <td class="unique-check-icon">check_circle</td>
140        <td class="unique-cross-icon">cancel</td>
141      </tr>
142      <tr>
143        <td>Electrolytes</td>
144        <td class="unique-check-icon">check_circle</td>
145        <td class="unique-cross-icon">cancel</td>
146      </tr>
147      <tr>
148        <td>No Artificial Colors or Sweeteners</td>
149        <td class="unique-check-icon">check_circle</td>
150        <td class="unique-cross-icon">cancel</td>
151      </tr>
152      <tr>
153        <td>Patent-Pending Technology</td>
154        <td class="unique-check-icon">check_circle</td>
155        <td class="unique-cross-icon">cancel</td>
156      </tr>
157      <tr>
158        <td>Proprietary Herbal Blend</td>
159        <td class="unique-check-icon">check_circle</td>
160        <td class="unique-cross-icon">cancel</td>
161      </tr>
162    </tbody>
163  </table>
164</body>
165</html>
Related snippets

/ shopify liquid
Comparison Table 2

Related snippets

Copyable discount bar

Copyable discount bar 2

Copyable discount bar 3

Copyable discount bar 4
