Shopify Liquid

Customer Live Sale

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

91 lines · 2.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>Rating Widget</title>
7    <style>
8        body.uniqueBody_Ty83Kl {
9            font-family: Arial, sans-serif;
10        }
11
12        .ratingWidget_Wp76Nm {
13            display: flex;
14            align-items: center;
15        }
16
17        .profileImages_Qw59Br {
18            display: flex;
19            align-items: center;
20            margin-right: 20px;
21        }
22
23        .profileImages_Qw59Br img {
24            width: 30px;
25            height: 30px;
26            border-radius: 50%;
27            margin-right: -10px;
28            border: 2px solid white;
29        }
30
31        .nameAndVerified_Xz24Ft {
32            display: flex;
33            align-items: center;
34            margin-left: 15px;
35            font-size: 12px;
36        }
37
38        .purchaseText_Ym34Gh {
39            font-size: 12px;
40            margin-left: 5px;
41        }
42
43        /* Sayıyı daha belirgin, siyah ve bold yap */
44        #purchase-count {
45            font-weight: bold;
46            color: #000000; /* Siyah renk */
47            font-size: 14px; /* Biraz daha büyük */
48        }
49
50        @font-face {
51            font-family: "CustomIcons";
52            src: url("https://fonts.gstatic.com/s/materialsymbolsoutlined/v54/1f6ad2e0e7c7b3724793c4d8709a24a5.woff2") format("woff2");
53        }
54    </style>
55</head>
56<body class="uniqueBody_Ty83Kl">
57
58    <div class="ratingWidget_Wp76Nm">
59        <div class="profileImages_Qw59Br">
60            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile 1">
61            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile 2">
62            <img class="uniqueReviewImage_Tz89Lp" src="https://i.hizliresim.com/je7b0fg.jpg" alt="Profile 3">
63            <div class="nameAndVerified_Xz24Ft">
64                <span>Burkisoy and <span id="purchase-count">470</span> people purchased</span>
65            </div>
66        </div>
67    </div>
68
69    <script>
70        let purchaseCount = 470;
71        const purchaseCountElement = document.getElementById("purchase-count");
72
73        function updatePurchaseCount() {
74            // Her seferde 1, 2 veya bazen 3 artış miktarı
75            let incrementAmount = Math.floor(Math.random() * 3) + 1;
76            purchaseCount += incrementAmount;
77            purchaseCountElement.textContent = purchaseCount;
78
79            // Sonraki artış süresini rastgele 2 ila 8 saniye arasında belirle
80            const nextUpdateDelay = Math.floor(Math.random() * 6000) + 2000;
81
82            setTimeout(updatePurchaseCount, nextUpdateDelay);
83        }
84
85        // İlk güncellemeyi başlat
86        updatePurchaseCount();
87    </script>
88
89</body>
90</html>

Related snippets

/ shopify liquid

Customer Live Sale

Related snippets

Customer Review 2

Customer Review Star

Customer Review Star 2

Customer Review Star 3