Back to Shopify Liquid
Low Stock
Shopify Liquid

Low Stock

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

60 lines · 1.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 <style>
7 .cls-xj7hJ9K {
8 display: flex;
9 align-items: center;
10 font-family: Arial, sans-serif;
11 color: #D9534F; /* Daha yumuşak kırmızı tonu */
12 }
13
14 .icon-xj7hJ9K {
15 margin-right: 8px;
16 color: #D9534F; /* Daha yumuşak kırmızı tonu */
17 width: 8px; /* Genişlik ayarı */
18 height: 8px; /* Yükseklik ayarı */
19 animation: blink-xj7hJ9K 1s infinite, wave-glow-xj7hJ9K 2s infinite;
20 }
21
22 @keyframes blink-xj7hJ9K {
23 0%, 100% {
24 opacity: 1;
25 }
26 50% {
27 opacity: 0.2;
28 }
29 }
30
31 @keyframes wave-glow-xj7hJ9K {
32 0% {
33 text-shadow: 0 0 5px #D9534F;
34 }
35 25% {
36 text-shadow: 0 0 10px #D9534F;
37 }
38 50% {
39 text-shadow: 0 0 15px #D9534F;
40 }
41 75% {
42 text-shadow: 0 0 10px #D9534F;
43 }
44 100% {
45 text-shadow: 0 0 5px #D9534F;
46 }
47 }
48 </style>
49</head>
50<body class="body-xj7hJ9K">
51 <div class="cls-xj7hJ9K">
52 <!-- SVGRepo'dan alınan daire ikonu -->
53 <svg class="icon-xj7hJ9K" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
54 <circle cx="8" cy="8" r="8" />
55 </svg>
56 <span>Low Stock: Hurry, only a few left!</span>
57 </div>
58</body>
59</html>

Related snippets