Shopify Liquid
Burkisoy BF+NY

Drop this Shopify Liquid snippet into your theme to add the burkisoy bf+ny block. Copy the code below, paste it into your theme files, save and you're done.
196 lines · 4.8 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>Customer Review</title>
7  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=check|verified|content_copy" />
8  <style>
9    body.unique-body-QwErTy123 {
10      display: flex;
11      justify-content: center;
12      align-items: center;
13      flex-direction: column;
14      height: 100vh;
15      margin: 0;
16      background: linear-gradient(135deg, #fafafa, #e0e0e0);
17      position: relative;
18    }
19
20    .unique-review-container-Uio123 {
21      display: flex;
22      align-items: center;
23      background-color: #fafafa;
24      border-radius: 12px;
25      padding: 16px;
26      font-size: 14px;
27      color: #333;
28      max-width: 600px;
29      width: 100%;
30      margin: 2px 0;
31      border: 2px dashed #e0e0e0;
32      position: relative;
33    }
34
35    .unique-review-image-Pkl456 {
36      width: 50px;
37      height: 50px;
38      border-radius: 8px;
39      object-fit: cover;
40      margin-right: 16px;
41      border: 2px solid #e0e0e0;
42    }
43
44    .unique-review-content-Asd789 {
45      display: flex;
46      flex-direction: column;
47      width: 100%;
48    }
49
50    .unique-review-author-Hjk012 {
51      display: flex;
52      align-items: center;
53      margin-bottom: 8px;
54    }
55
56    .unique-review-author-name-Zxc345 {
57      font-weight: bold;
58      margin-right: 4px;
59      display: flex;
60      align-items: center;
61    }
62
63    .unique-review-icon-Lmn678 {
64      font-size: 16px;
65      color: #1DA1F2;
66      margin-left: 4px;
67      vertical-align: middle;
68    }
69
70    .unique-review-text-Qwe567 {
71      font-size: 14px;
72      color: #555;
73    }
74
75    .timer-container-Rty234 {
76      position: absolute;
77      top: 8px;
78      right: 16px;
79      background: #ffdede;
80      color: #b22222;
81      padding: 4px 8px;
82      border-radius: 4px;
83      font-size: 10px;
84      font-weight: bold;
85    }
86
87    #countdown {
88      font-weight: bold;
89      color: #b22222;
90    }
91
92    .discount-text-Opa789 {
93      margin-top: 20px;
94      text-align: center;
95      font-size: 14px;
96      color: #004d00; /* Metin ve ikon koyu yeşil */
97      background-color: #e6ffe6; /* Çok açık yeşil arka plan */
98      padding: 10px 16px;
99      border-radius: 8px;
100      width: fit-content;
101      display: flex;
102      align-items: center;
103      justify-content: center;
104      gap: 8px; /* İkon ve metin arasındaki boşluk */
105    }
106
107    .unique-tick-icon-Vbn012 {
108      font-size: 18px;
109      color: #004d00; /* Check ikonuyla metin aynı renk */
110    }
111
112    @media (max-width: 768px) {
113      .timer-container-Rty234 {
114        font-size: 8px;
115        padding: 3px 6px;
116      }
117
118      .discount-text-Opa789 {
119        font-size: 12px;
120        padding: 8px 12px;
121      }
122
123      .unique-review-container-Uio123 {
124        padding: 12px;
125        font-size: 12px;
126      }
127
128      .unique-review-text-Qwe567 {
129        font-size: 12px; /* Mobil versiyonda metin boyutu küçültüldü */
130      }
131    }
132  </style>
133</head>
134<body class="unique-body-QwErTy123">
135
136<div class="unique-review-container-Uio123">
137  <div class="timer-container-Rty234">
138    Time left: <span id="countdown">00:00:00</span>
139  </div>
140
141  <img class="unique-review-image-Pkl456" src="https://i.hizliresim.com/je7b0fg.jpg" alt="Profile Picture">
142  <div class="unique-review-content-Asd789">
143    <div class="unique-review-author-Hjk012">
144      <span class="unique-review-author-name-Zxc345">
145        Burkisoy
146        <span class="unique-review-icon-Lmn678 material-symbols-outlined">verified</span>
147      </span>
148    </div>
149    <div class="unique-review-text-Qwe567">
150      We’ve mixed Black Friday and New Year’s deals just for you. Grab a big $245 off!
151    </div>
152  </div>
153</div>
154
155<div class="discount-text-Opa789">
156  <span class="material-symbols-outlined unique-tick-icon-Vbn012">check</span>
157  <span>Discount code applied automatically.</span>
158</div>
159
160<script>
161  const code = "BF24";
162
163  // Countdown timer logic
164  let countdownMinutes = 40;
165
166  function startCountdown() {
167    let countdownDate = new Date().getTime() + countdownMinutes * 60 * 1000;
168
169    function updateCountdown() {
170      let now = new Date().getTime();
171      let distance = countdownDate - now;
172
173      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
174      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
175      let seconds = Math.floor((distance % (1000 * 60)) / 1000);
176
177      document.getElementById("countdown").innerHTML =
178        (hours < 10 ? "0" + hours : hours) + ":" +
179        (minutes < 10 ? "0" + minutes : minutes) + ":" +
180        (seconds < 10 ? "0" + seconds : seconds);
181
182      if (distance < 0) {
183        clearInterval(countdownInterval);
184        startCountdown();
185      }
186    }
187
188    let countdownInterval = setInterval(updateCountdown, 1000);
189  }
190
191  startCountdown();
192</script>
193
194</body>
195</html>
Related snippets

/ shopify liquid
Burkisoy BF+NY

Related snippets

Buy 3 Pay 2

Click Discount

Comparison table

Comparison Table 2
