Shopify Liquid
Money Back & Limited Stock

Drop this Shopify Liquid snippet into your theme to add the money back & limited stock block. Copy the code below, paste it into your theme files, save and you're done.
105 lines · 2.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>Items Left Badge</title>
7<style>
8.unique-body-Xyz123 {
9  font-family: Arial, sans-serif;
10  background-color: #f9f9f9;
11  color: #333;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  height: 100vh;
16  margin: 0;
17}
18
19.unique-container-Abc456 {
20  display: flex;
21  justify-content: center;
22  align-items: center;
23  gap: 10px; /* Badge'ler arasındaki boşluk */
24}
25
26.unique-badge-Def789 {
27  display: inline-flex;
28  align-items: center;
29  background-color: #e0ffd8; /* Çok açık yeşil arka plan */
30  color: #004d00; /* Koyu yeşil metin */
31  padding: 2px 4px; /* Küçültülmüş padding */
32  border-radius: 3px; /* Küçültülmüş yuvarlama */
33  font-size: 10px; /* Küçültülmüş font boyutu */
34  font-weight: bold;
35  text-align: center;
36  position: relative;
37}
38
39.unique-badge-Ghi012 {
40  display: inline-flex;
41  align-items: center;
42  background-color: #ffdede; /* Açık kırmızı arka plan */
43  color: #b22222; /* Koyu kırmızı metin */
44  padding: 2px 4px; /* Küçültülmüş padding */
45  border-radius: 3px; /* Küçültülmüş yuvarlama */
46  font-size: 10px; /* Küçültülmüş font boyutu */
47  font-weight: bold;
48  text-align: center;
49  position: relative;
50}
51
52.unique-icon-Jkl345 {
53  width: 12px; /* Küçültülmüş ikon boyutu */
54  height: 12px; /* Küçültülmüş ikon boyutu */
55  margin-right: 2px;
56  vertical-align: middle;
57}
58
59.unique-badge-Def789 span, .unique-badge-Ghi012 span {
60  display: flex;
61  align-items: center;
62  white-space: nowrap; /* Metinlerin tek satırda kalmasını sağlar */
63}
64
65@keyframes unique-rotate-Mno678 {
66  from {
67    transform: rotate(0deg);
68  }
69  to {
70    transform: rotate(360deg);
71  }
72}
73
74.unique-clock-hand-Pqr901 {
75  transform-origin: 50% 50%;
76  animation: unique-rotate-Mno678 2s linear infinite;
77}
78</style>
79</head>
80<body class="unique-body-Xyz123">
81
82<div class="unique-container-Abc456">
83  <div class="unique-badge-Def789">
84    <span>
85      <svg class="unique-icon-Jkl345" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
86        <path fill="#004d00" d="M12 2C9.24 2 7 4.24 7 7V10H5C3.9 10 3 10.9 3 12V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V12C21 10.9 20.1 10 19 10H17V7C17 4.24 14.76 2 12 2M12 4C13.66 4 15 5.34 15 7V10H9V7C9 5.34 10.34 4 12 4M12 12C13.1 12 14 12.9 14 14C14 15.1 13.1 16 12 16C10.9 16 10 15.1 10 14C10 12.9 10.9 12 12 12Z"/>
87      </svg>
88      30-day money back guarantee.
89    </span>
90  </div>
91
92  <div class="unique-badge-Ghi012">
93    <span>
94      <svg class="unique-icon-Jkl345" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
95        <circle cx="12" cy="12" r="10" stroke="#b22222" stroke-width="2" fill="none"/>
96        <line x1="12" y1="12" x2="12" y2="6" stroke="#b22222" stroke-width="2" class="unique-clock-hand-Pqr901"/>
97        <line x1="12" y1="12" x2="16" y2="12" stroke="#b22222" stroke-width="2"/>
98      </svg>
99      Limited stock available!
100    </span>
101  </div>
102</div>
103</body>
104</html>
Related snippets

/ shopify liquid
Money Back & Limited Stock

Related snippets

Money Back 2

Money Back 3

Money back 4

FAQ
