Back to Shopify Liquid
Shopify Liquid
Views in last 24 hours
Drop this Shopify Liquid snippet into your theme to add the views in last 24 hours block. Copy the code below, paste it into your theme files, save and you're done.
56 lines · 1.4 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 rel="stylesheet" href="styles.css">7 <title>Product View Counter</title>8 <style>9 .view-container {10 display: flex;11 align-items: center;12 font-family: Arial, sans-serif;13 }14.view-badge {15 background-color: #f3e6e2;16 color: #d74f33;17 border-radius: 16px;18 font-weight: bold;19 margin-right: 10px;20 padding: 0px 8px;21 font-size: 11px;22 line-height: 20px;23}24 .view-text {25 font-size: 12px;26line-height:19px;27font-weight: normal;28color #47474729 }30 </style>31</head>32<body>33 <div class="view-container">34 <div class="view-badge">Views</div>35 <div class="view-text">During the last 24 hours, this product has been viewed <span id="view-count">925</span> times.</div>36 </div>3738 <script>3940 const initialViewCount = 925;41 const variation = Math.floor(Math.random() * 41) - 20;42 const newViewCount = initialViewCount + variation;434445 document.getElementById("view-count").innerText = newViewCount;464748 if (!localStorage.getItem("lastUpdated") || Date.now() - localStorage.getItem("lastUpdated") > 86400000) {49 localStorage.setItem("viewCount", newViewCount);50 localStorage.setItem("lastUpdated", Date.now());51 } else {52 document.getElementById("view-count").innerText = localStorage.getItem("viewCount");53 }54 </script>55</body>56</html>
