How to Add a Fake Live Visitors Counter in Shopify | No App Required

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.liquid and 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.liquid file
Look 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.liquid
Again, find {%- when 'inventory' -%}
Paste the same render code above that line

Option C: If you can’t find either

Look for product-template.liquid or similar product template files
Find 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 delay value (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.