Back to Shopify Liquid
Shopify Liquid
Founders comment with timer
Drop this Shopify Liquid snippet into your theme to add the founders comment with timer block. Copy the code below, paste it into your theme files, save and you're done.
102 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 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">7 <style>8 .notification {9 position: relative;10 display: flex;11 align-items: center;12 border: 2px dashed #ddd;13 border-radius: 10px;14 padding: 5px 8px;15 background-color: #ffffff;16 width: fit-content;1718 font-size: 12px;19 }20 .profile-picture {21 width: 35px;22 height: 35px;23 border-radius: 50%;24 object-fit: cover;25 margin-right: 10px;26 }27 .notification-content {28 display: flex;29 flex-direction: column;30 }31 .username {32 font-weight: bold;33 margin-bottom: 2px;34 display: flex;35 align-items: center;36 }37 .verified-icon {38 margin-left: 5px;39 width: 14px;40 height: 14px;41 }42 .offer-text {43 font-size: 11px;44 color: #333;45 }46.time-left {47 position: absolute;48 top: 5px;49 right: 5px;50 font-size: 8px;51 color: #d9534f;52 font-weight: 800;53 border: 1px solid #f5c6c6;54 border-radius: 4px;55 padding: 1px 3px;56 background-color: #f8d7da;57 line-height: 15px;58}59 </style>60 <script>61 function startCountdown(duration, display) {62 let timer = duration, minutes, seconds;63 const interval = setInterval(function () {64 minutes = parseInt(timer / 60, 10);65 seconds = parseInt(timer % 60, 10);6667 minutes = minutes < 10 ? "0" + minutes : minutes;68 seconds = seconds < 10 ? "0" + seconds : seconds;6970 display.textContent = "Time left: " + minutes + ":" + seconds;7172 if (--timer < 0) {73 clearInterval(interval);74 display.textContent = "Time's up!";75 }76 }, 1000);77 }7879 window.onload = function () {80 const countdownDuration = 23 * 60 + 22; // 23 minutes and 22 seconds81 const display = document.querySelector('.time-left');82 if (display) {83 startCountdown(countdownDuration, display);84 }85 };86 </script>87</head>88<body>89 <div class="notification">90 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/IMG_1250_295d85e6-2508-403c-b5f8-d0deb56f89b1.jpg?v=1733350877"User Profile Picture" class="profile-picture">91 <div class="notification-content">92 <div class="username">93 Mehul<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Twitter_Verified_Badge.svg" alt="Verified Badge" class="verified-icon">94 </div>95 <div class="offer-text">96 We've mixed Black Friday and New Year’s deals just for you. Grab a big $255 off!97 </div>98 </div>99 <div class="time-left">Time left: 00:23:22</div>100 </div>101</body>102</html>
