Live Visitors Counter for Shopify
Add a live visitors message to your Shopify store to show how many people are viewing a product right now.
Testing note: This preview uses a browser-based simulator with sample Shopify data. It is not Shopify’s official Liquid runtime. Always verify the final snippet in a duplicate/development Shopify theme.
How It Works
The snippet creates a small visitor-activity message on the product page. The number is generated according to the logic used in the code. It is intended as a visual conversion element and should not be described as a real-time analytics counter unless the code actually uses a real visitor-data source.
Where to Paste
Code
Copy the code you need and paste it into your Shopify theme.
<div class="live-viewers">
<span class="live-dot"></span>
<span>
<strong id="live-viewer-count">12</strong>
people are viewing this product just now!
</span>
</div>
<style>
.live-viewers {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #f5f9fc;
border-radius: 8px;
width: fit-content;
font-size: 13px;
color: #333;
}
.live-viewers strong {
font-weight: 700;
}
.live-dot {
width: 8px;
height: 8px;
background: #18b66a;
border-radius: 50%;
display: inline-block;
animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: .45;
transform: scale(.8);
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const viewerCount = document.getElementById("live-viewer-count");
function updateViewers() {
const numbers = [12, 18, 21, 25, 28, 32, 36, 42, 48, 50];
const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];
viewerCount.textContent = randomNumber;
}
updateViewers();
setInterval(updateViewers, 8000);
});
</script>Installation
1. Open Shopify Admin.
2. Go to Online Store → Themes.
3. Click Customize on the theme you want to edit.
4. Open the Product template.
5. Click Add section.
6. Select Custom Liquid.
7. Paste the Liquid code from this page.
8. Save the theme.
9. Open a product page and verify the output.
Customization
Change visitor number range: Explain exactly which Liquid line/value controls the minimum and maximum number.
Change message text: Explain which text the user can edit.
Change dot color: Explain the CSS selector and property.
Change font size: Explain the CSS property.
Change spacing: Explain the relevant margin/padding properties.
No app required. Works out of the box.
The snippet creates a small visitor-activity message on the product page. The number is generated according to the logic used in the code. It is intended as a visual conversion element and should not be described as a real-time analytics counter unless the code actually uses a real visitor-data source.