Shopify Hack: Add a Random Viewer Counter in Minutes—No Cost, No Apps!

A “people currently viewing this item” feature is a powerful way to create urgency and drive conversions in your Shopify store. While apps that offer this functionality usually come with a price tag, this guide will show you how to implement a similar feature using simple JavaScript, entirely free. By the end of this tutorial, your product pages will display a random, dynamic viewer count like “24 people are currently viewing this item.”

Step-by-Step Guide

1. Access Shopify’s Code Editor

  1. Log in to your Shopify admin panel.
  2. Navigate to Online Store in the Sales Channels section.
  3. Click the three dots next to your current theme and select Edit Code.

2. Add a New JavaScript Asset

  1. In the left-hand menu, scroll down to the Assets folder.
  2. Click Add a new asset.
  3. Choose Create a blank file and name it people_watching.js.
  4. Click Done to create the file.

3. Insert the JavaScript Code

Copy and paste the following JavaScript code into your newly created people_watching.js file:

const randomPeople = Math.floor(Math.random() * (50 - 5 + 1)) + 5; document.addEventListener('DOMContentLoaded', () => { const element = document.createElement('div'); element.innerText = `${randomPeople} people are currently watching this item`; element.style.color = 'red'; // Example styling element.style.fontWeight = 'bold'; document.body.prepend(element); // Adds the element to the top of the page });

This script generates a random number between 5 and 50 and displays it on the product page.

4. Modify the Main Product Template

  1. In the Templates section, locate and open main-product.liquid.
  2. Use Ctrl + F (or Cmd + F on Mac) to search for title.
  3. Place the following code just before the <p> tag:

<script src="people_watching.js"></script>

  1. This ensures that the JavaScript file is loaded on the product page.

5. Save Your Changes

  • After editing the main-product.liquid file, click Save.
  • Repeat for any other product templates where you want this feature.

Testing the Feature

  1. Open your store and navigate to any product page.
  2. You should see a line like “48 people are currently watching this item” displayed prominently.

Customization Options

  • Change the Range of Random Numbers: Adjust the numbers in the script to modify the range (e.g., 10 to 100):

Math.floor(Math.random() * (100 - 10 + 1)) + 10;

Styling the Text: Use CSS properties in the script to customize the appearance:

element.style.fontSize = '18px';

element.style.color = '#333';

Why This Works

Displaying a viewer counter leverages the psychological principle of social proof. It gives customers the impression of high demand, encouraging them to act quickly to avoid missing out. This simple yet effective feature can significantly boost conversions.

Related Posts