Shopify Liquid
Black Friday

Drop this Shopify Liquid snippet into your theme to add the black friday block. Copy the code below, paste it into your theme files, save and you're done.
136 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>Items Left Badge with Countdown</title>
7<style>
8.body-uniq-u1Xa9Yz {
9  font-family: Arial, sans-serif;
10  background-color: #f9f9f9;
11  color: #333;
12  display: flex;
13  justify-content: flex-start;
14  align-items: flex-start;
15  height: 100vh;
16  margin: 0;
17  padding-left: 20px;
18}
19
20.container-uniq-T8hJ3Kb {
21  display: flex;
22  align-items: center;
23  gap: 4px; /* Badge'ler arasındaki boşluk azaltıldı */
24}
25
26.badge-uniq-N5cLm2Q {
27  display: inline-flex;
28  align-items: center;
29  background-color: #ffdede;
30  color: #b22222;
31  padding: 6px 10px;
32  border-radius: 4px;
33  font-size: 12px;
34  font-weight: bold;
35  text-align: center;
36  position: relative;
37}
38
39.icon-uniq-Y3zR8sQ {
40  width: 16px;
41  height: 16px;
42  margin-right: 4px;
43  vertical-align: middle;
44}
45
46.badge-uniq-N5cLm2Q .icon-uniq-Y3zR8sQ {
47  margin-right: 6px;
48}
49
50.text-uniq-X9bT2Rj {
51  display: flex;
52  align-items: center;
53  white-space: nowrap;
54}
55
56.timer-uniq-P3fL6Wm {
57  font-weight: bold;
58  color: #b22222;
59  background: none;
60  border: none;
61  font-size: 12px; /* Boyut küçültüldü */
62}
63
64@keyframes rotate-uniq-A1b2C3 {
65  from {
66    transform: rotate(0deg);
67  }
68  to {
69    transform: rotate(360deg);
70  }
71}
72
73.hand-uniq-Z8gJ7Vq {
74  transform-origin: 50% 50%;
75  animation: rotate-uniq-A1b2C3 2s linear infinite;
76}
77</style>
78</head>
79<body class="body-uniq-u1Xa9Yz">
80
81<div class="container-uniq-T8hJ3Kb">
82  <div class="badge-uniq-N5cLm2Q">
83    <span class="text-uniq-X9bT2Rj">
84      <svg class="icon-uniq-Y3zR8sQ" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
85        <circle cx="12" cy="12" r="10" stroke="#b22222" stroke-width="2" fill="none"/>
86        <line x1="12" y1="12" x2="12" y2="6" stroke="#b22222" stroke-width="2" class="hand-uniq-Z8gJ7Vq"/>
87        <line x1="12" y1="12" x2="16" y2="12" stroke="#b22222" stroke-width="2"/>
88      </svg>
89      Black Friday Special:
90    </span>
91  </div>
92  
93  <!-- Geri sayım burada, bağımsız olarak -->
94  <div class="timer-uniq-P3fL6Wm" id="countdown">00:00:00</div>
95</div>
96
97<script>
98let countdownMinutes = 45;
99
100// Geri sayım süresini başlatan fonksiyon
101function startCountdown() {
102  let countdownDate = new Date().getTime() + countdownMinutes * 60 * 1000;
103
104  function updateCountdown() {
105    let now = new Date().getTime();
106    let distance = countdownDate - now;
107
108    // Saat, dakika ve saniyeleri hesaplayın
109    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
110    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
111    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
112
113    // Geri sayımın kalan süresini formatlayarak gösterin
114    document.getElementById("countdown").innerHTML = 
115      (hours < 10 ? "0" + hours : hours) + ":" + 
116      (minutes < 10 ? "0" + minutes : minutes) + ":" + 
117      (seconds < 10 ? "0" + seconds : seconds);
118
119    // Geri sayım tamamlandığında işlemi sıfırla ve yeniden başlat
120    if (distance < 0) {
121      clearInterval(countdownInterval);
122      startCountdown(); // Geri sayımı yeniden başlat
123    }
124  }
125
126  // Geri sayımı her saniye güncelleyin
127  let countdownInterval = setInterval(updateCountdown, 1000);
128}
129
130// İlk geri sayımı başlat
131startCountdown();
132</script>
133
134</body>
135</html>
Related snippets

/ shopify liquid
Black Friday

Related snippets

Review Sliders v2

Burkisoy BF+NY

Buy 3 Pay 2

Click Discount
