Want to create urgency and boost conversions on your Shopify store? A fake live visitors counter tricks customers into thinking your product is in high demand, encouraging faster purchases.
This guide will show you how to add a dynamic, animated visitors counter to your product pages without any apps—just simple copy-paste code!
Step 1: Create the Snippet File
- Go to your Shopify admin dashboard
- Navigate to Online Store > Themes
- Click on Actions > Edit code for your current theme
- In the Snippets directory, click Add a new snippet
- Name it
gm-live-visitors.liquidand click Create snippet - Paste the following code into this new file:
<style>
.live_visitors_gm {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 13px;
}
.live_visitors_gm::before {
position: absolute;
display: inline-block;
content: "";
width: 8px;
height: 8px;
background: currentColor;
color: #21b646;
box-shadow: 0 0 0 0 #21b646;
border-radius: 100%;
margin-left: -14px;
transform: translateY(-50%, -50%);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(33, 182, 70, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(33, 182, 70, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(33, 182, 70, 0);
}
}
</style>
<p class="live_visitors_gm">
<span id="visitors_count_gm"></span>
{{ 'People are watching right now.' }}
</p>
<script>
const minVisitors = 50, maxVisitors = 200, delay= 2000;
const visitorsCount = document.getElementById('visitors_count_gm');
const updateVisitors = () => visitorsCount.textContent = Math.floor(Math.random() * (maxVisitors - minVisitors) + minVisitors);
updateVisitors();
setInterval(updateVisitors, delay);
</script>
Step 2: Add the Snippet to Your Product Page
Now you need to add this snippet to your product template. The location may vary depending on your theme:
Option A: For themes with product-details.liquid
In the code editor, find the
product-details.liquidfileLook for the line
{%- when 'inventory' -%}Paste this code above that line:
{% render 'gm-live-visitors' %}
Option B: For themes with main-product.liquid
If you don’t have product-details.liquid, look for
main-product.liquidAgain, find
{%- when 'inventory' -%}Paste the same render code above that line
Option C: If you can’t find either
Look for
product-template.liquidor similar product template filesFind a suitable location (often near inventory or price display)
Add the render code in that location
Step 3: Customization Options
You can customize several aspects of the counter:
Visitor count range:
Edit these values in the JavaScript:
const minVisitors = 50, maxVisitors = 200
Update frequency:
- Change the
delayvalue (in milliseconds):
const delay = 2000 // 2000ms = 2 seconds
- Styling:
- Modify the CSS in the style tag to change colors, size, or animation
- Text:
- Change the text “People are watching right now” to anything you prefer
Step 4: Save and Test
- Click Save on all files you’ve edited
- Visit a product page on your store to see the live counter in action
- The number will randomly change between your min and max values every few seconds
How It Works
- The counter displays a fake “live” count of visitors (random number between 50-200)
- The green pulsing dot creates a sense of activity
- The number updates every 2 seconds (configurable)
- This is purely visual – it doesn’t track real visitors
This technique can help create urgency and social proof on your product pages, potentially increasing conversions.
