Back to Shopify Liquid
Shopify Liquid
X people checking our right now
Drop this Shopify Liquid snippet into your theme to add the x people checking our right now block. Copy the code below, paste it into your theme files, save and you're done.
53 lines · 1.5 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>People Checking Out</title>7</head>8<body>9 <div id="checkout-message"><strong class="changing-number">5</strong> people are checking out right now</div>1011 <script>12 let currentCount = 5;13 const minCount = 1;14 const maxCount = 10; // Set max limit if needed1516 function updateCheckoutMessage() {17 const changeFactor = Math.random() < 0.5 ? -1 : 1;18 const changeValue = Math.floor(Math.random() * 2) + 1;1920 currentCount += changeFactor * changeValue;2122 if (currentCount < minCount) {23 currentCount = minCount;24 } else if (currentCount > maxCount) {25 currentCount = maxCount;26 }2728 document.getElementById('checkout-message').innerHTML = ``;29 }3031 setInterval(updateCheckoutMessage, 10000); // Update every 10 seconds32 </script>33</body>34</html>3536<style>37#checkout-message {38 font-size: 13px;39 text-align: center;40 background: #dff7f4;41 border-radius: 5px;42 width: max-content;43 margin-left: auto;44 margin-right: auto;45 padding: 1px 8px;46 color: #218d8b;47 line-height: 22px;48}49.changing-number{50font-size: 14px;51font-weight: 800;52}53</style>
