Back to Shopify Liquid
Shopify Liquid
Populer Product
Drop this Shopify Liquid snippet into your theme to add the populer product block. Copy the code below, paste it into your theme files, save and you're done.
73 lines · 1.9 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>Popular Product Notification</title>7 <style>8 .unique-notification-ABC123 {9 font-family: Arial, sans-serif;10 font-size: 14px;11 color: #333;12 display: flex;13 align-items: center;14 padding: 10px;15 border-radius: 5px;16 }1718 .unique-notification-ABC123 .unique-icon-DEF456 {19 margin-right: 8px;20 font-size: 24px;21 animation: unique-bounce-GHI789 1.5s infinite;22 }2324 .unique-notification-ABC123 .unique-highlight-JKL012 {25 color: #5f4b8b; /* Purple color */26 font-weight: bold;27 }2829 @keyframes unique-bounce-GHI789 {30 0%, 20%, 50%, 80%, 100% {31 transform: translateY(0);32 }33 40% {34 transform: translateY(-10px);35 }36 60% {37 transform: translateY(-5px);38 }39 }40 </style>41</head>42<body>43 <div class="unique-notification-ABC123">44 <div class="unique-icon-DEF456">45 👀46 </div>47 <div>48 Popular product! In the last 24 hours, <span class="unique-highlight-JKL012" id="view-count">6,269 people</span> viewed it!49 </div>50 </div>5152 <script>53 function animateValue(id, start, end, duration) {54 let startTimestamp = null;55 const step = (timestamp) => {56 if (!startTimestamp) startTimestamp = timestamp;57 const progress = Math.min((timestamp - startTimestamp) / duration, 1);58 const value = Math.floor(progress * (end - start) + start).toLocaleString();59 document.getElementById(id).innerText = `${value} people`;60 if (progress < 1) {61 window.requestAnimationFrame(step);62 }63 };64 window.requestAnimationFrame(step);65 }6667 document.addEventListener("DOMContentLoaded", function() {68 animateValue("view-count", 0, 6269, 5000); // 5000ms = 5 seconds69 });70 </script>71</body>72</html>
