Shopify Liquid

8 item left & limited stock

Drop this Shopify Liquid snippet into your theme to add the 8 item left & limited stock block. Copy the code below, paste it into your theme files, save and you're done.

106 lines · 2.6 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-abc123 {
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  gap: 10px; /* Badge'ler arasındaki boşluk */
18  transform: scale(0.8); /* Tüm bileşenleri orantılı küçültme */
19}
20
21.unique-badge-def456 {
22  display: inline-flex;
23  align-items: center;
24  background-color: #ffdede; /* Açık kırmızı arka plan */
25  color: #b22222; /* Koyu kırmızı metin */
26  padding: 3px 5px; /* Küçültülmüş padding */
27  border-radius: 5px; /* Orantılı yuvarlama */
28  font-size: 10px; /* Küçültülmüş font boyutu */
29  font-weight: bold;
30  text-align: center;
31  position: relative;
32}
33
34.unique-flame-icon-ghi789, .unique-clock-icon-jkl012 {
35  margin-right: 4px; /* Küçültülmüş boşluk */
36  display: inline-block;
37  position: relative;
38  vertical-align: middle;
39}
40
41.unique-flame-icon-ghi789 svg, .unique-clock-icon-jkl012 svg {
42  width: 12px; /* Küçültülmüş ikon boyutu */
43  height: 12px; /* Küçültülmüş ikon boyutu */
44}
45
46.unique-flame-icon-ghi789 svg {
47  animation: unique-flame-animation-mno345 2s infinite;
48}
49
50.unique-clock-icon-jkl012 svg {
51  animation: unique-clock-animation-pqr678 2s infinite;
52}
53
54@keyframes unique-flame-animation-mno345 {
55  0%, 100% {
56    transform: scale(1);
57  }
58  50% {
59    transform: scale(1.2);
60  }
61}
62
63@keyframes unique-clock-animation-pqr678 {
64  0%, 100% {
65    transform: rotate(0deg);
66  }
67  50% {
68    transform: rotate(360deg);
69  }
70}
71
72.unique-badge-def456 span {
73  display: flex;
74  align-items: center;
75}
76</style>
77</head>
78<body class="unique-body-abc123">
79
80<div class="unique-badge-def456">
81  <span>
82    <div class="unique-flame-icon-ghi789">
83      <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
84        <path fill="#FF4500" d="M32 2C19 15 9 26 9 38c0 8 6 14 14 14s14-6 14-14c0-8-6-14-14-14s-14 6-14 14c0 8 6 14 14 14s14-6 14-14c0-8-6-14-14-14S18 22 18 30c0 8 6 14 14 14s14-6 14-14c0-8-6-14-14-14z"/>
85      </svg>
86    </div>
87    8 items left at this price
88  </span>
89</div>
90
91<div class="unique-badge-def456">
92  <span>
93    <div class="unique-clock-icon-jkl012">
94      <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
95        <circle cx="32" cy="32" r="30" stroke="#b22222" stroke-width="4" fill="none"/>
96        <line x1="32" y1="32" x2="32" y2="12" stroke="#b22222" stroke-width="4"/>
97        <line x1="32" y1="32" x2="44" y2="32" stroke="#b22222" stroke-width="4"/>
98      </svg>
99    </div>
100    Limited stock available!
101  </span>
102</div>
103
104</body>
105</html>

Related snippets

/ shopify liquid

8 item left & limited stock

Related snippets

8 items left

14 days moneyback

15 people have

Features Benefits section