Back to Shopify Liquid
Coupon code 1
Shopify Liquid

Coupon code 1

Drop this Shopify Liquid snippet into your theme to add the coupon code 1 block. Copy the code below, paste it into your theme files, save and you're done.

160 lines · 5.6 KB
Shopify Liquid
1<div class='section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings' id='coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
2 <div class='coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
3 <div class='coupon-body-bg-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
4 </div>
5 <div class='coupon-item-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
6 <p class='coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
7 EXTRA 10% OFF
8 </p>
9 <p class='coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
10 On purchase of $100+ (use code : 10OFFTODAY)
11 </p>
12 </div>
13 <div class='coupon-item-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
14 <p class='coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
15 EXTRA 5% OFF
16 </p>
17 <p class='coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55'>
18 For first time users (use code : FIRST5)
19 </p>
20 </div>
21 </div>
22</div>
23<style>
24 .coupon-body-bg-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
25 display: block!important;
26 background-image: linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0.05) 100%);
27 position: absolute;
28 top: 0;
29 bottom: 0;
30 left: 0;
31 width: 40px;
32 z-index: 10;
33 transform: rotate(-20deg);
34 animation: slide 8s linear 0s infinite;
35 }
36 @keyframes slide {
37 0% {
38 transform: translateX(0%);
39 }
40 100% {
41 transform: translateX(80rem);
42 }
43 }
44 </style><style>@font-face {
45 font-family: 'Josefin Sans';
46 font-weight: 400;
47 font-style: normal;
48 font-display: swap;
49 src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
50 url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
51}
52
53 @font-face {
54 font-family: 'Josefin Sans';
55 font-weight: 400;
56 font-style: normal;
57 font-display: swap;
58 src: url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.c8300d95fd4ce72542a6efba9c682da40d144fba.woff2?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=1081bc13bac779d73b77022741d8b8608aa5451af6a05907fc023625940c00f1') format('woff2'),
59 url('//section.store/cdn/fonts/josefin_sans/josefinsans_n4.ed7230a86e75b34b997bd12a5e1b87fcaf7104d8.woff?h1=c2VjdGlvbi5zdG9yZQ&h2=c2VjdGlvbi1zdG9yZS1hcHAuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=3f19a3e11bab2423756ce410220df09957f15affd53a78fa0ec435e5660aa636') format('woff');
60}
61
62
63 .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
64 border-top: solid #000000 0px;
65 border-bottom: solid #000000 0px;
66 margin-top: 0px;
67 margin-bottom: 0px;
68 overflow: hidden;
69
70 }
71
72 .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings {
73 max-width: 120rem;
74 margin: 0 auto;
75 padding-top: 9px;
76 padding-bottom: 0px;
77 padding-left: 0rem;
78 padding-right: 0rem;
79 }
80
81 .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
82 padding: 6px 30px;
83 border-radius: 12px;
84 border: 0px solid #000000;
85 background-color: #19c8ae;
86 position: relative;
87 overflow: hidden;
88display: flex;
89 flex-direction: column;
90 gap: 9px;
91 }
92
93 .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:after,
94 .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:before {
95 content: '';
96 position: absolute;
97 top: 50%;
98 transform: translateY(-50%);
99 width: 20px;
100 height: 20px;
101 border-radius: 50%;
102 background-color: #ffffff;
103 }
104
105 .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:before {
106 left: -10px;
107 }
108
109 .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55:after {
110 right: -10px;
111 }
112
113 .coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
114 margin: 0px;
115 font-size: 14px;
116 color: #ffffff;
117 line-height: 130%;
118 text-transform: unset;
119 text-align: left;
120 font-weight: 700;
121 }
122
123 .coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
124 margin: 0px;
125 margin-top 3px;
126 font-size: 12px;
127 color: #ffffff;
128 line-height: 130%;
129 text-transform: unset;
130 text-align: left;
131 }
132
133 @media(min-width: 1024px) {
134
135 .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
136 margin-top: 0px;
137 margin-bottom: 0px;
138 }
139
140 .section-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55-settings {
141 padding: 0 5rem;
142 padding-top: 12px;
143 padding-bottom: 0px;
144 padding-left: 0rem;
145 padding-right: 0rem;
146 }
147
148 .coupon-body-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
149 padding: 8px 40px;
150 }
151
152 .coupon-header-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
153 font-size: 16px;
154 }
155
156 .coupon-text-template--20099374219593__e3f1ef9e-093d-47e8-ac9b-d45f4c5fae55 {
157 margin-top 4px;
158 font-size: 12px;
159 }
160 }</style>

Related snippets