Shopify Liquid
Announcement Bar

Drop this Shopify Liquid snippet into your theme to add the announcement bar block. Copy the code below, paste it into your theme files, save and you're done.
114 lines · 3.0 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>Announcement Bar</title>
7  <style>
8    body.unique-body-class {
9      margin: 0;
10      font-family: Arial, sans-serif;
11    }
12
13    .unique-announcement-bar {
14      position: relative;
15      display: flex;
16      justify-content: center;
17      align-items: center;
18      height: 40px;
19      color: white;
20      font-size: 14px;
21      font-weight: bold;
22      background: linear-gradient(90deg, black, #8e2de2, #ff0080, black);
23      background-size: 300% 300%;
24      animation: unique-gradient-shift 6s infinite;
25      overflow: hidden;
26    }
27
28    .unique-countdown-wrapper {
29      position: absolute;
30      right: 15px;
31      display: flex;
32      gap: 8px;
33    }
34
35    .unique-time {
36      background: white;
37      color: black;
38      padding: 3px 8px;
39      border-radius: 3px;
40      font-size: 12px;
41    }
42
43    @keyframes unique-gradient-shift {
44      0% {
45        background-position: 0% 50%;
46      }
47      50% {
48        background-position: 100% 50%;
49      }
50      100% {
51        background-position: 0% 50%;
52      }
53    }
54
55    /* Mobil Cihazlar İçin (768px ve Altı) */
56    @media (max-width: 768px) {
57      .unique-announcement-bar {
58        height: 30px; /* Daha dar yükseklik */
59        font-size: 12px; /* Yazı boyutu küçüldü */
60        justify-content: flex-start; /* Metni sola hizala */
61        padding-left: 10px; /* Sol boşluk eklendi */
62      }
63
64      .unique-countdown-wrapper {
65        right: 10px; /* Sağdan boşluk azaltıldı */
66        gap: 5px; /* Geri sayım elemanları arasındaki boşluk azaltıldı */
67      }
68
69      .unique-time {
70        padding: 2px 6px; /* Geri sayımın padding değerleri küçültüldü */
71        font-size: 10px; /* Yazı boyutu küçültüldü */
72      }
73    }
74  </style>
75</head>
76<body class="unique-body-class">
77  <div class="unique-announcement-bar">
78    <div>Early Black Friday Sale Ends In</div>
79    <div class="unique-countdown-wrapper">
80      <span class="unique-time"><span id="unique-hours">00</span> HRS</span>
81      <span class="unique-time"><span id="unique-minutes">00</span> MIN</span>
82      <span class="unique-time"><span id="unique-seconds">00</span> SEC</span>
83    </div>
84  </div>
85
86  <script>
87    function startCountdown(durationInSeconds) {
88      let remainingTime = durationInSeconds;
89
90      function updateCountdown() {
91        if (remainingTime < 0) {
92          remainingTime = durationInSeconds;
93        }
94
95        const hours = Math.floor(remainingTime / 3600);
96        const minutes = Math.floor((remainingTime % 3600) / 60);
97        const seconds = remainingTime % 60;
98
99        document.getElementById('unique-hours').textContent = String(hours).padStart(2, '0');
100        document.getElementById('unique-minutes').textContent = String(minutes).padStart(2, '0');
101        document.getElementById('unique-seconds').textContent = String(seconds).padStart(2, '0');
102
103        remainingTime--;
104      }
105
106      updateCountdown();
107      setInterval(updateCountdown, 1000);
108    }
109
110    startCountdown(7200);
111  </script>
112</body>
113</html>
Related snippets

/ shopify liquid
Announcement Bar

Related snippets

Best Seller

Black Friday

Review Sliders v2

Burkisoy BF+NY
