Shopify Liquid
Features Benefits section

Drop this Shopify Liquid snippet into your theme to add the features benefits section block. Copy the code below, paste it into your theme files, save and you're done.
121 lines · 4.0 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              .why-choose-title {
9                  font-size: 1.2em;
10                  font-weight: bold;
11                  margin-bottom: 10px;
12                  text-align: center;
13                  color: #1b3a57;
14              }
15              .why-choose-subtitle {
16                  font-size: 0.8em;
17                  margin-bottom: 30px;
18                  color: #666;
19                  text-align: center;
20              }
21              .why-choose-comparison-table {
22                  width: 100%;
23                  max-width: 550px;
24                  margin: 0 auto;
25                  border-collapse: collapse;
26                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27                  overflow: hidden;
28                  border-radius: 10px;
29              }
30              .why-choose-comparison-table th, .why-choose-comparison-table td {
31                  padding: 8px;
32                  text-align: center;
33                  border: 1px solid #ddd;
34                  font-size: 13px;
35              }
36              .why-choose-comparison-table th {
37                  background-color: #f5f5f5;
38                  font-weight: bold;
39                  color: #121212bf;
40              }
41              .why-choose-feature {
42      background: linear-gradient(45deg, #19a9b0, #42ad81 80%);
43                  color: #fff;
44                  text-align: left;
45                  font-weight: bold;
46                  font-size: 13px;
47                  width: 40%;
48              }
49              .why-choose-comparison-table th:nth-child(2), .why-choose-comparison-table td:nth-child(2) {
50                  width: 30%;
51              }
52              .why-choose-comparison-table th:nth-child(3), .why-choose-comparison-table td:nth-child(3) {
53                  width: 30%;
54              }
55              .why-choose-check {
56                  color: #28a745;
57                  font-size: 1.3em;
58              }
59              .why-choose-cross {
60                  color: #3f3f3f;
61                  font-size: 1.5em;
62              }
63              .why-choose-rounded-corners {
64                  border-radius: 10px;
65                  overflow: hidden;
66              }
67              .why-choose-comparison-table tbody tr:nth-child(odd) {
68                  background-color: #f9f9f9;
69              }
70    </style>
71  </head>
72  <body>
73    <div class="container page-width">
74      <div class="why-choose-title">Why Choose Us?</div>
75      <div class="why-choose-subtitle">
76        add a reason here to why your customer should buy your products
77      </div>
78      <table class="why-choose-comparison-table">
79        <thead>
80          <tr>
81            <th
82              class="why-choose-feature"
83              style="background: #f5f5f5!important;"
84            >
85              Feature
86            </th>
87            <th>Your brand</th>
88            <th>Others</th>
89          </tr>
90        </thead>
91        <tbody>
92          <tr>
93            <td class="why-choose-feature">Benefit 1</td>
94            <td class="why-choose-check">✔</td>
95            <td class="why-choose-cross">✘</td>
96          </tr>
97          <tr>
98            <td class="why-choose-feature">Benefit 2</td>
99            <td class="why-choose-check">✔</td>
100            <td class="why-choose-cross">✘</td>
101          </tr>
102          <tr>
103            <td class="why-choose-feature">Benefit 3</td>
104            <td class="why-choose-check">✔</td>
105            <td class="why-choose-cross">✘</td>
106          </tr>
107          <tr>
108            <td class="why-choose-feature">Benefit 4</td>
109            <td class="why-choose-check">✔</td>
110            <td class="why-choose-check">✔</td>
111          </tr>
112          <tr>
113            <td class="why-choose-feature">Benefit 5</td>
114            <td class="why-choose-check">✔</td>
115            <td class="why-choose-check">✔</td>
116          </tr>
117        </tbody>
118      </table>
119    </div>
120  </body>
121</html>
Related snippets

/ shopify liquid
Features Benefits section

Related snippets

Gradient Text

Info Tabs

Facebook Posts

Scroll to top button
