Shopify Liquid
Hurry up & items sold 2

Drop this Shopify Liquid snippet into your theme to add the hurry up & items sold 2 block. Copy the code below, paste it into your theme files, save and you're done.
111 lines · 4.7 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    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
8    <style>
9        .unique-body {
10            background-color: #f0f0f0; /* Açık gri arka plan rengi */
11            font-family: 'Poppins', sans-serif;
12        }
13        .notification-unique {
14            display: none; /* Başlangıçta gizli */
15            align-items: center;
16            font-size: 15px;
17            color: #333;
18            margin: 10px 0; /* Yukarı ve aşağı 10 px boşluk ekleme */
19            opacity: 0;
20            transform: translateY(20px); /* Başlangıç pozisyonu */
21            transition: opacity 0.5s, transform 0.5s; /* Geçiş animasyonu */
22            background-color: #ffffff; /* Beyaz arka plan rengi */
23            border: 1px solid #e0e0e0; /* Daha açık gri kenarlık */
24            padding: 8px; /* İç boşluk ekleme */
25            border-radius: 11px; /* Kenarları yuvarlama */
26            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); /* Hafif gölge */
27        }
28        .notification-unique-show {
29            display: flex; /* Görünür olduğunda flex */
30            opacity: 1;
31            transform: translateY(0); /* Son pozisyon */
32        }
33        .icon-unique {
34            margin-right: 5px; /* Metne daha yakın yapmak için azaltıldı */
35        }
36        .icon-unique img {
37            width: 30px; /* İkonun boyutu büyütüldü */
38        }
39        .text-unique {
40            font-weight: normal;
41        }
42        .highlight-unique {
43            color: #ff0000; /* Kırmızı renk */
44            font-weight: bold;
45            transition: all 0.5s ease-out;
46        }
47    </style>
48</head>
49<body class="unique-body">
50    <!-- Ana Kod -->
51    <div class="notification-unique" id="notification-1">
52        <div class="icon-unique">
53            <img src="https://www.svgrepo.com/show/421045/conference-live-video.svg" alt="Conference Live Video Icon">
54        </div>
55        <span class="text-unique">Hurry up! <span class="highlight-unique" id="items-sold">500+</span> items have been sold</span>
56    </div>
57
58    <!-- Varyasyon 1 -->
59    <div class="notification-unique" id="notification-2">
60        <div class="icon-unique">
61            <img src="https://www.svgrepo.com/show/421061/alert-bell-notice.svg" alt="Alert Bell Notice Icon">
62        </div>
63        <span class="text-unique"><span class="highlight-unique" id="people-cart">9M</span> people have it in their cart</span>
64    </div>
65
66    <!-- Varyasyon 2 -->
67    <div class="notification-unique" id="notification-3">
68        <div class="icon-unique">
69            <img src="https://www.svgrepo.com/show/421069/fire-like-trend.svg" alt="Fire Like Trend Icon">
70        </div>
71        <span class="text-unique">Loved product! <span class="highlight-unique" id="people-favorited">1.1M</span> favorited it!</span>
72    </div>
73
74    <script>
75        let notifications = document.querySelectorAll('.notification-unique');
76        let index = 0;
77
78        function showNextNotification() {
79            notifications.forEach(notification => notification.classList.remove('notification-unique-show')); // Tüm bildirimleri gizle
80            notifications[index].classList.add('notification-unique-show'); // Geçerli bildirimi göster
81            index = (index + 1) % notifications.length; // Sonraki bildirim için indeksi güncelle
82            setTimeout(showNextNotification, 4000); // 4 saniye sonra bir sonraki bildirimi göster
83        }
84
85        // İlk bildirimi göster
86        showNextNotification();
87
88        // Sayıları artırma fonksiyonu
89        function incrementCounter(elementId, startValue, minIncrement, maxIncrement, minInterval, maxInterval) {
90            let element = document.getElementById(elementId);
91            let value = startValue;
92
93            function updateCounter() {
94                let incrementValue = Math.floor(Math.random() * (maxIncrement - minIncrement + 1)) + minIncrement;
95                value += incrementValue;
96                element.textContent = value.toLocaleString(); // Sayıyı formatla
97                let interval = Math.floor(Math.random() * (maxInterval - minInterval + 1)) + minInterval;
98                setTimeout(updateCounter, interval); // Rastgele bir aralıkta güncelle
99            }
100
101            updateCounter();
102        }
103
104        // Her bir bildirimi artır (rastgele artış ve aralıklar)
105        incrementCounter('items-sold', 500, 1, 10, 1000, 5000); // Çok yavaş artan küçük artışlar
106        incrementCounter('people-cart', 900000, 1000, 100000, 500, 2000); // Orta hızda artan büyük artışlar
107        incrementCounter('people-favorited', 110000, 10, 100, 200, 1000); // Yavaş artan orta artışlar
108    </script>
109</body>
110</html>
Related snippets

/ shopify liquid
Hurry up & items sold 2

Related snippets

In Stock

Instagram Viral

Items Sold

Klarna
