Shopify Liquid
Free delivery CTA v2

Drop this Shopify Liquid snippet into your theme to add the free delivery cta v2 block. Copy the code below, paste it into your theme files, save and you're done.
116 lines · 4.1 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    <link rel="stylesheet" href="styles.css" />
7    <title>Free Delivery and Returns Box</title>
8    <style>
9              .delivery-box {
10                  border: 2px solid #d4d4d4;
11                  border-radius: 8px;
12                  padding: 12px 15px;
13                  font-family: Arial, sans-serif;
14                  background-color: #fff;
15              }
16
17              .delivery-box .icon {
18                  display: inline-block;
19                  vertical-align: middle;
20                  margin-right: 10px;
21              }
22
23
24              .delivery-box .text {
25                  display: inline-block;
26                  vertical-align: middle;
27              }
28
29      .delivery-box .title {
30          font-size: 14px;
31          font-weight: bold;
32          margin: 0;
33          color: #474747;
34          display: flex;
35          align-items: center;
36          line-height: 15px;
37      }
38
39      .delivery-box .delivery-time {
40          font-size: 13px;
41          color: #474747;
42          line-height: 20px;
43      }
44
45              .delivery-box .delivery-time span {
46                  font-weight: bold;
47                  color: #039903;
48              }
49      .textv6{
50      display:flex;
51      flex-direction: column;
52      gap:5px;
53      justify-content: center;
54      }
55    </style>
56  </head>
57  <body>
58    <div class="delivery-box">
59      <div class="textv6">
60        <div class="title">
61          <div class="icon">
62            <svg
63              xmlns:dc="http://purl.org/dc/elements/1.1/"
64              xmlns="http://www.w3.org/2000/svg"
65              xmlns:xlink="http://www.w3.org/1999/xlink"
66              width="18"
67              fill="#474747"
68              version="1.1"
69              id="Layer_1"
70              x="0px"
71              y="0px"
72              viewBox="0 0 24 24"
73              style="enable-background:new 0 0 24 24;"
74              xml:space="preserve"
75            >
76              <metadata>
77                <dc:creator>Davooda</dc:creator>
78                <dc:relation>https://davooda.com</dc:relation>
79              </metadata>
80
81              <style type="text/css">
82                .st0{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
83                .st1{fill:none;stroke:#474747;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
84                .st2{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
85                .st3{fill:#474747;}
86                .st4{fill:#FFFFFF;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
87                .st5{fill:none;stroke:#474747;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
88                .st6{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
89                .st7{fill:#474747;}
90                .st8{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
91              </style>
92              <g>
93                <path
94                  class="st0"
95                  d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
96                />
97                <line class="st0" x1="5" y1="13" x2="2" y2="13" />
98              </g>
99              <line class="st0" x1="15" y1="18" x2="9" y2="18" />
100              <circle class="st0" cx="6.5" cy="18.5" r="2.5" />
101              <circle class="st0" cx="17.5" cy="18.5" r="2.5" />
102              <polyline class="st0" points="15,7 15,12 15,14 " />
103              <line class="st0" x1="1" y1="9" x2="7" y2="9" />
104              <line class="st0" x1="4" y1="19" x2="3" y2="19" />
105            </svg>
106          </div>
107          Free Delivery and Returns
108        </div>
109        <div class="delivery-time">
110          Free no contact delivery for all orders<br />
111          Delivered in: <span>2 - 5 working days</span>
112        </div>
113      </div>
114    </div>
115  </body>
116</html>
Related snippets

/ shopify liquid
Free delivery CTA v2

Related snippets

Views in last 24 hours

3 line of info v1

Limited stock

Banner showing customers and reviews
