Back to Shopify Liquid
Money Back & Limited Stock
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