Back to Shopify Liquid
Limited stock
Shopify Liquid

Limited stock

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

76 lines · 1.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>Limited Stock Banner</title>
7 <style>
8.limited-stock-container {
9 display: flex;
10 align-items: center;
11 font-size: 14px;
12 color: #282828;
13 background-color: #fff;
14 line-height: 22px;
15}
16 .limited-stock-icon {
17 width: 18px;
18 height: 18px;
19 margin-right: 8px;
20 }
21
22 .limited-stock-text1 {
23 font-weight: bold;
24 }
25
26 .limited-stock-highlight {
27 color: #d74f33;
28 }
29 </style>
30</head>
31<body>
32 <div class="limited-stock-container">
33
34 <div class="dot"><span style="visibility: hidden;">.</span></div>
35
36 <div>
37 <span class="limited-stock-text1">Limited stock</span>
38 <span class="limited-stock-text2" >Last chance to get this item, <span class="limited-stock-highlight">don't miss out!</span></span>
39 </div>
40 </div>
41</body>
42</html>
43
44<style>
45 .dot {
46 width: 13px;
47 height: 10px;
48 background-color: #d74f33;
49 border-radius: 50%;
50 margin-right:15px;
51 box-shadow: 0 0 10px #d74f33; /* Initial glow effect */
52 animation: pulse 1.5s infinite; /* Apply pulsing animation */
53 }
54 @keyframes pulse {
55 0% {
56 box-shadow: 0 0 10px #d74f33;
57 transform: scale(1);
58 }
59 50% {
60 box-shadow: 0 0 20px #d74f33;
61 transform: scale(1);
62 }
63 100% {
64 box-shadow: 0 0 10px #d74f33;
65 transform: scale(1);
66 }
67 }
68.limited-stock-text1{
69font-size: 14px;
70line-height: 10px;
71}
72.limited-stock-text2{
73font-size: 14px;
74line-height: 10px;
75}
76</style>

Related snippets