Shopify Liquid
Super Deals

Drop this Shopify Liquid snippet into your theme to add the super deals block. Copy the code below, paste it into your theme files, save and you're done.
97 lines · 3.2 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>SuperDeals Banner</title>
7    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Oswald:wght@700&display=swap" rel="stylesheet">
8    <style>
9        .unique-body-Abc123 {
10            font-family: Arial, sans-serif;
11            background-color: #f0f2f5;
12            margin: 0;
13            padding: 20px;
14        }
15
16        .unique-deal-banner-Abc123 {
17            display: flex;
18            border-radius: 15px;
19            overflow: hidden;
20            font-family: 'Arial', sans-serif;
21            font-size: 14px;
22        }
23
24        .unique-deal-text-container-Abc123 {
25            background-color: #ff4d4d; /* Bir ton koyu kırmızı */
26            padding: 10px 20px;
27            display: flex;
28            align-items: center;
29        }
30
31        .unique-deal-text-Abc123 {
32            font-family: 'Roboto', sans-serif;
33            font-weight: 700;
34            color: white; /* Metin rengi beyaz */
35        }
36
37        .unique-deal-timer-container-Abc123 {
38            background-color: #ff6666; /* Açık kırmızı */
39            padding: 10px 20px;
40            display: flex;
41            align-items: center;
42            justify-content: center;
43            flex-grow: 1;
44        }
45
46        .unique-deal-timer-Abc123 {
47            font-family: 'Oswald', sans-serif;
48            font-size: 16px;
49            font-weight: 700;
50            color: white;
51            animation: unique-timerAnimation-Abc123 1s ease-in-out infinite alternate;
52        }
53
54        @keyframes unique-timerAnimation-Abc123 {
55            0% { transform: scale(1); }
56            100% { transform: scale(1.1); }
57        }
58    </style>
59</head>
60<body class="unique-body-Abc123">
61    <div class="unique-deal-banner-Abc123">
62        <div class="unique-deal-text-container-Abc123">
63            <span class="unique-deal-text-Abc123">SuperDeals</span>
64        </div>
65        <div class="unique-deal-timer-container-Abc123">
66            <span class="unique-deal-timer-Abc123" id="countdown">Ends: 9d : 18 : 22 : 13</span>
67        </div>
68    </div>
69
70    <script>
71        function startCountdown() {
72            var countDownTime = 12 * 60 * 60 * 1000; // 12 hours in milliseconds
73            var countDownDate = new Date().getTime() + countDownTime;
74
75            var x = setInterval(function() {
76                var now = new Date().getTime();
77                var distance = countDownDate - now;
78
79                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
80                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
81                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
82                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
83
84                document.getElementById("countdown").innerHTML = "Ends: " + days + "d : " + hours + " : " + minutes + " : " + seconds;
85
86                if (distance < 0) {
87                    clearInterval(x);
88                    startCountdown(); // Restart the countdown
89                }
90            }, 1000);
91        }
92
93        startCountdown();
94    </script>
95</body>
96</html>
Related snippets

/ shopify liquid
Super Deals

Related snippets

TikTok Views

TikTok Viral

Top Selling

Trustpilot
