Shopify Liquid
Hurry up & items sold

Drop this Shopify Liquid snippet into your theme to add the hurry up & items sold block. Copy the code below, paste it into your theme files, save and you're done.
164 lines · 6.3 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>Notifications</title>
7    <style>
8        .notification-unique-1 {
9            display: none; /* Başlangıçta gizli */
10            align-items: center;
11            font-family: Arial, sans-serif;
12            font-size: 16px;
13            color: #333;
14            margin: 10px 0; /* Yukarı ve aşağı 10 px boşluk ekleme */
15            opacity: 0;
16            transform: translateY(20px); /* Başlangıç pozisyonu */
17            transition: opacity 0.5s, transform 0.5s; /* Geçiş animasyonu */
18        }
19        .notification-unique-1.show {
20            display: flex; /* Görünür olduğunda flex */
21            opacity: 1;
22            transform: translateY(0); /* Son pozisyon */
23        }
24        .icon-unique-1 {
25            margin-right: 5px; /* Metne daha yakın yapmak için azaltıldı */
26        }
27        .icon-unique-1 img {
28            width: 24px; /* İkonun boyutu büyütüldü */
29        }
30        .text-unique-1 {
31            font-weight: normal;
32        }
33        .highlight-unique-1 {
34            color: #008000; /* Koyu yeşil renk */
35            font-weight: bold;
36            transition: all 0.5s ease-out;
37        }
38
39        .notification-unique-2 {
40            display: none; /* Başlangıçta gizli */
41            align-items: center;
42            font-family: Arial, sans-serif;
43            font-size: 16px;
44            color: #333;
45            margin: 10px 0; /* Yukarı ve aşağı 10 px boşluk ekleme */
46            opacity: 0;
47            transform: translateY(20px); /* Başlangıç pozisyonu */
48            transition: opacity 0.5s, transform 0.5s; /* Geçiş animasyonu */
49        }
50        .notification-unique-2.show {
51            display: flex; /* Görünür olduğunda flex */
52            opacity: 1;
53            transform: translateY(0); /* Son pozisyon */
54        }
55        .icon-unique-2 {
56            margin-right: 5px; /* Metne daha yakın yapmak için azaltıldı */
57        }
58        .icon-unique-2 img {
59            width: 24px; /* İkonun boyutu büyütüldü */
60        }
61        .text-unique-2 {
62            font-weight: normal;
63        }
64        .highlight-unique-2 {
65            color: #008000; /* Koyu yeşil renk */
66            font-weight: bold;
67            transition: all 0.5s ease-out;
68        }
69
70        .notification-unique-3 {
71            display: none; /* Başlangıçta gizli */
72            align-items: center;
73            font-family: Arial, sans-serif;
74            font-size: 16px;
75            color: #333;
76            margin: 10px 0; /* Yukarı ve aşağı 10 px boşluk ekleme */
77            opacity: 0;
78            transform: translateY(20px); /* Başlangıç pozisyonu */
79            transition: opacity 0.5s, transform 0.5s; /* Geçiş animasyonu */
80        }
81        .notification-unique-3.show {
82            display: flex; /* Görünür olduğunda flex */
83            opacity: 1;
84            transform: translateY(0); /* Son pozisyon */
85        }
86        .icon-unique-3 {
87            margin-right: 5px; /* Metne daha yakın yapmak için azaltıldı */
88        }
89        .icon-unique-3 img {
90            width: 24px; /* İkonun boyutu büyütüldü */
91        }
92        .text-unique-3 {
93            font-weight: normal;
94        }
95        .highlight-unique-3 {
96            color: #008000; /* Koyu yeşil renk */
97            font-weight: bold;
98            transition: all 0.5s ease-out;
99        }
100    </style>
101</head>
102<body>
103    <!-- Ana Kod -->
104    <div class="notification-unique-1" id="notification-1">
105        <div class="icon-unique-1">
106            <img src="https://www.svgrepo.com/show/434246/rocket.svg" alt="Rocket Icon">
107        </div>
108        <span class="text-unique-1">Hurry up! <span class="highlight-unique-1" id="items-sold">500+</span> items have been sold</span>
109    </div>
110
111    <!-- Varyasyon 1 -->
112    <div class="notification-unique-2" id="notification-2">
113        <div class="icon-unique-2">
114            <img src="https://www.svgrepo.com/show/521847/shopping-cart.svg" alt="Shopping Cart Icon">
115        </div>
116        <span class="text-unique-2"><span class="highlight-unique-2" id="people-cart">11.9B</span> people have it in their cart.</span>
117    </div>
118
119    <!-- Varyasyon 2 -->
120    <div class="notification-unique-3" id="notification-3">
121        <div class="icon-unique-3">
122            <img src="https://www.svgrepo.com/show/477386/love-2.svg" alt="Heart Icon">
123        </div>
124        <span class="text-unique-3">Loved product! <span class="highlight-unique-3" id="people-favorited">1.1M</span> favorited it!</span>
125    </div>
126
127    <script>
128        let notifications = document.querySelectorAll('.notification-unique-1, .notification-unique-2, .notification-unique-3');
129        let index = 0;
130
131        function showNextNotification() {
132            notifications.forEach(notification => notification.classList.remove('show')); // Tüm bildirimleri gizle
133            notifications[index].classList.add('show'); // Geçerli bildirimi göster
134            index = (index + 1) % notifications.length; // Sonraki bildirim için indeksi güncelle
135            setTimeout(showNextNotification, 2000); // 2 saniye sonra bir sonraki bildirimi göster
136        }
137
138        // İlk bildirimi göster
139        showNextNotification();
140
141        // Sayıları artırma fonksiyonu
142        function incrementCounter(elementId, startValue, minIncrement, maxIncrement, minInterval, maxInterval) {
143            let element = document.getElementById(elementId);
144            let value = startValue;
145
146            function updateCounter() {
147                let incrementValue = Math.floor(Math.random() * (maxIncrement - minIncrement + 1)) + minIncrement;
148                value += incrementValue;
149                element.textContent = value.toLocaleString(); // Sayıyı formatla
150                let interval = Math.floor(Math.random() * (maxInterval - minInterval + 1)) + minInterval;
151                setTimeout(updateCounter, interval); // Rastgele bir aralıkta güncelle
152            }
153
154            updateCounter();
155        }
156
157        // Her bir bildirimi artır (rastgele artış ve aralıklar)
158        incrementCounter('items-sold', 500, 1, 10, 1000, 5000); // Çok yavaş artan küçük artışlar
159        incrementCounter('people-cart', 11900000000, 1000, 100000, 500, 2000); // Orta hızda artan büyük artışlar
160        incrementCounter('people-favorited', 1100000, 10, 100, 200, 1000); // Yavaş artan orta artışlar
161    </script>
162</body>
163</html>
Related snippets

/ shopify liquid
Hurry up & items sold

Related snippets

Hurry up & items sold 2

In Stock

Instagram Viral

Items Sold
