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.

78 lines · 2.8 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        .top-selling-badge {
8            display: flex;
9            align-items: center;
10            padding: 5px 10px;
11            border-radius: 8px;
12            font-family: Arial, sans-serif;
13            font-size: 12px;
14            color: #333;
15            background-color: #f3e5ff; /* Default background color */
16            height: 30px; /* Adjust height to fit content */
17        }
18
19        .top-selling-badge .badge-content {
20            display: none;
21            align-items: center;
22        }
23
24        .top-selling-badge .badge-content.active {
25            display: flex;
26        }
27
28        .badge-content svg {
29            margin-right: 8px;
30            width: 16px; /* Set icon size */
31            height: 16px; /* Set icon size */
32        }
33
34        .badge-content#text2 {
35            background-color: #ffe6e6; /* Very light red background for urgency */
36            color: #b30000; /* Darker red text color */
37        }
38    </style>
39    <title>Top Selling Product</title>
40</head>
41<body>
42    <div class="top-selling-badge">
43        <div id="text1" class="badge-content active">
44            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
45                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.89 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/>
46            </svg>
47            <span>Top selling product in Kitchen Gadgets category</span>
48        </div>
49        <div id="text2" class="badge-content">
50            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
51                <path d="M1 12a11 11 0 1 0 22 0 11 11 0 1 0-22 0zm11-8a1 1 0 0 1 1 1v6.586l4.293 4.293a1 1 0 0 1-1.414 1.414l-5.293-5.293a1 1 0 0 1-.293-.707V5a1 1 0 0 1 1-1z"/>
52            </svg>
53            <span>Limited stock available, order now!</span>
54        </div>
55    </div>
56
57    <script>
58        let currentText = 1;
59        setInterval(() => {
60            const text1 = document.getElementById('text1');
61            const text2 = document.getElementById('text2');
62
63            if (currentText === 1) {
64                text1.classList.remove('active');
65                text2.classList.add('active');
66                document.querySelector('.top-selling-badge').style.backgroundColor = '#ffe6e6'; // Change background color
67            } else {
68                text2.classList.remove('active');
69                text1.classList.add('active');
70                document.querySelector('.top-selling-badge').style.backgroundColor = '#f3e5ff'; // Reset background color
71            }
72
73            currentText = currentText === 1 ? 2 : 1;
74        }, 3000); // Change every 3 seconds
75    </script>
76</body>
77</html>

Related snippets

/ shopify liquid

Limited Stock

Related snippets

Limited stock 2

Limited Stock 3

90_ of our customers love our products

Loved by 10000