Solved

How can I show the number of people viewing a product on my site?

isSalon
Excursionist
20 0 6

Is there an app or code to display "xx people are viewing this product right now"?

 

I don't need it to be a live counter, even just random numbers 3, 10, 23, etc.

 

I'm using the prestige theme for my site: https://www.issalonvancouver.com

 

Thank you!

Accepted Solution (1)

PublicApps
Shopify Partner
146 5 34

This is an accepted solution.

Insert something like this at the end of the file theme.js.liquid (visit your theme files in the Shopify admin > Online store > Themes > Live theme: Actions dropdown > Edit code > unfold the Assets folder on the left):

 

/**
 * Insert text near the Buy button on the product page.
 *
 * E.g. "18 people are viewing this product right now."
 */
document.addEventListener('DOMContentLoaded', function () {
	// Minimum view count
	var minViews = 2;
	// Maximum view count
	var maxViews = 20;
	// Text to show after the view count number
	var text = 'people are viewing this product right now.';

	// Create the new element to display on the page
	var $viewCountElement = document.createElement('div');
	$viewCountElement.className = 'view-count shopify-payment-button';
	$viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;

	// Determine where to put the new element
	var $form = document.querySelector('.template-product .ProductForm');
	var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');
	if ($pickupOptions) {
		// If there's currently an element about the pickup options on the page, insert our view count element before that
		$pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
	} else {
		// If there's no pickup options element on the page, just place the view count element at the end of the product form
		$form.appendChild($viewCountElement);
	}
});

 

Screenshot 2021-02-08 at 21.42.32.png

Of course it's bad practice to mislead customers.

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

View solution in original post

Replies 20 (20)

Julie
Shopify Staff
1109 106 370

Hey, @isSalon!

Julie here from Shopify Support.

Great question! There are actually quite a few apps in the Shopify App Store that will display a pop-up whenever a customer is viewing your product. By showing how popular your products are, you can easily increase urgency and showcase your popular products to your customers. A few popular apps I suggest looking into include: 

All of these apps should be compatible with your Prestige theme and will allow you to display notification pop-ups that show how many people are viewing your products. You can check out what these notification pop-ups look like by viewing the screenshots on each app's "About" page in the App Store. There, you'll also see that each app has an Example Store so you can see what the app looks like in action.

Aside from showing which products your customers are viewing, these apps have a ton of other features that you may find useful. For example, they'll also show recent add-to-carts, recent sales, and the number of live visitors on your website. They're also customizable, meaning that you can change the look and feel of your popups so that they match your brand. With these apps, you'll also get access to in-depth analytics, so you can track conversions and see how effective your pop-ups are.  

I encourage you to read a bit about each one, view their screenshots and example stores, and see which suits your needs the best! If you have any questions about these apps and their functionalities, you can always reach out to the app developers directly via the Support section of their app pages. 

I hope this provides you with a few solid options worth considering. If you're looking for some more ways to increase conversions with tactics like this, I recommend checking out our blog post, "13 Persuasion Techniques to Convince Ecommerce Visitors to Buy More", where you'll learn more about different techniques that can help increase urgency, build social proof, and boost sales. 

Let me know what you think!

Julie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

isSalon
Excursionist
20 0 6

I’m not looking for a pop up, but looking for a line of text that indicates a customized viewer count on the product page near the “buy now button”

PublicApps
Shopify Partner
146 5 34

This is an accepted solution.

Insert something like this at the end of the file theme.js.liquid (visit your theme files in the Shopify admin > Online store > Themes > Live theme: Actions dropdown > Edit code > unfold the Assets folder on the left):

 

/**
 * Insert text near the Buy button on the product page.
 *
 * E.g. "18 people are viewing this product right now."
 */
document.addEventListener('DOMContentLoaded', function () {
	// Minimum view count
	var minViews = 2;
	// Maximum view count
	var maxViews = 20;
	// Text to show after the view count number
	var text = 'people are viewing this product right now.';

	// Create the new element to display on the page
	var $viewCountElement = document.createElement('div');
	$viewCountElement.className = 'view-count shopify-payment-button';
	$viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;

	// Determine where to put the new element
	var $form = document.querySelector('.template-product .ProductForm');
	var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');
	if ($pickupOptions) {
		// If there's currently an element about the pickup options on the page, insert our view count element before that
		$pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
	} else {
		// If there's no pickup options element on the page, just place the view count element at the end of the product form
		$form.appendChild($viewCountElement);
	}
});

 

Screenshot 2021-02-08 at 21.42.32.png

Of course it's bad practice to mislead customers.

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

isSalon
Excursionist
20 0 6

Thank you! That is exactly what I was looking for!

isSalon
Excursionist
20 0 6

Is there a way to customize the font colour/style? Eg: change to italics and grey?

PublicApps
Shopify Partner
146 5 34

To style there are 2 options:

1. Add to your theme.scss.liquid file:

 

div.view-count {
  color: var(--text-color-light);
  /* Or set some other color using a color name:   color: 'darkgray'; */
  /* Or set a color using its hexadecimal code:    color: #ccc; */
  /* Or set a color using its RGB code:              color: rgb(128,128,128); */
  /* Check gray color codes: https://www.w3schools.com/colors/colors_shades.asp */
  font-style: italic;
  font-size: 1.25em;
}

 

or

2. Update the JS code that I posted before with the color and font styles:

 

/**
 * Insert text near the Buy button on the product page.
 *
 * E.g. "18 people are viewing this product right now."
 */
document.addEventListener('DOMContentLoaded', function () {
	var minViews = 2;
	// Maximum view count
	var maxViews = 20;
	// Text to show after the view count number
	var text = 'people are viewing this product right now.';
	// Styling
	var color = 'var(--text-color-light)';  // or 'gray', 'blue', 'black'
	var italic = 1;  // 1 for italic, 0 for normal
	var fontSize = 1;  // 1 for normal; 2 for double, etc.

	// Create the new element to display on the page
	var $viewCountElement = document.createElement('div');
	$viewCountElement.className = 'view-count shopify-payment-button';
	$viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
	$viewCountElement.style.color = color;
	if (italic) $viewCountElement.style.fontStyle = 'italic';
	$viewCountElement.style.fontSize = fontSize + 'em'; 

	// Determine where to put the new element
	var $form = document.querySelector('.template-product .ProductForm');
	var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');
	if ($pickupOptions) {
	    // If there's currently an element about the pickup options on the page, insert our view count element before that
	    $pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
	} else {
	    // If there's no pickup options element on the page, just place the view count element at the end of the product form
	    $form.appendChild($viewCountElement);
	}
});

 

 

 

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

kimber286
Visitor
1 0 0

Are you able to direct me where to input this code for the Canopy 4.0.3 theme please? 

ClauSerg
Visitor
2 0 0

Hello... PLEASE would it be possible for you to create a code to show the real number of people viewing the product instead of a random number?

46855004463
Tourist
19 0 2

Where in the recent DAWNS theme can this be applied? I tried but wont work 😕

peppi
Tourist
5 0 1

did you find out?

TrendBlend
Explorer
112 0 16

Did u find out?

ThePrimeWeb
Shopify Partner
2136 612 478

Hey Guys, here's the dawn theme implementation if anyone needs it!

 

You should add the code in the theme.liquid file at the place I have marked "ADD THE SCRIPT HERE" (You won't find this in your own theme, I just added it in mine to show you where). This is before the </body tag>.

ThePrimeWeb_0-1706530833488.png

 

The code:

<script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;

    var viewText = 'people are viewing this product right now.';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;

    var form = document.querySelector('product-info');
    form.appendChild(viewCountElement);
});
</script>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
planetjuniorseo
Explorer
107 0 19

Hi! Can you plz tell me where to put this in the warehouse theme?

 

peppi
Tourist
5 0 1

Hi! Can you please help me add this to my website? I can't find where to add it. Thank you

CTomelius
Shopify Partner
2 0 0

What do I need to change in the code snippet to have this displayed under the price instead? I would like to have this under the title and product description (above the price and buy button).

Any way to add this using custom liquid in the theme editor?

TIA

JPCancino
Excursionist
32 0 11

Hi @CTomelius, @peppi , @planetjuniorseo , @46855004463 , @kimber286 ,

 

There two or more specific problems in this issue. How to implement it in your theme. The liquid names and the class name of the element in the product page.

 

1. You need to put this code at the end of the product page liquid, in my case it's product-template.liquid (I have debutify theme).

 

2. The class names of the element that you have in your product page.

In the case of the original code, they have and use Pickupoption and form element, then they try to find the pickuption element (class=".ProductMeta__StoreAvailabilityContainer") if they don't find it they put the new element (the div with the vistors counter) at the of the form.

In my case didn't work because in bothe cases of the IF evaluation it returns NULL in each variable ($pickupoptions=NULL and $form=NULL) then it do nothing.

 

3. My solution was to create new a new variable or you can use $picupoptions if you want and give it the value of the element that you have in your product page. In my case I used:

var $addToCartButton = document.querySelector('.btn--add-to-cart');

Where .btn--add-to-cart is the button to ad to cart that has this class : btn btn--primary btn--add-to-cart full btn--addtocart_animation.

Instead of:

var $form = document.querySelector('.template-product .ProductForm');
var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');

then you need to change the IF evaluation where you will find your product page element. In my case the code is:

if ($addToCartButton) {
        $addToCartButton.parentElement.insertBefore($viewCountElement, $addToCartButton);

        
        function updateViewers() {
            // Generate a random number between 2 and 7 
            var randomViewers = Math.floor(Math.random() * 6) + 2;
            viewCountText.data = randomViewers + ' ';
        }
        setInterval(updateViewers, 5000);
    }

My code is little diferent. It give a random number every 5 second.

Then the final code is like this:

var text = ' clientes están viendo este producto.';
    var $viewCountElement = document.createElement('div');
    $viewCountElement.className = 'view-count shopify-payment-button';

    // add an eye icon at the beginning
    var $eyeIcon = document.createElement('span');
    $eyeIcon.className = 'material-icons-outlined';
    $eyeIcon.textContent = 'visibility';
    $viewCountElement.appendChild($eyeIcon);

     // Generate a random number between 2 and 7 (first number)
    var initialViewers = Math.floor(Math.random() * 6) + 2;
    var viewCountText = document.createTextNode(initialViewers + ' ');
    $viewCountElement.appendChild(viewCountText);

    var textNode = document.createTextNode(text);
    $viewCountElement.appendChild(textNode);

    var $addToCartButton = document.querySelector('.btn--add-to-cart');

    if ($addToCartButton) {
        $addToCartButton.parentElement.insertBefore($viewCountElement, $addToCartButton);

       
        function updateViewers() {
             // Generate a random number between 2 and 7 
            var randomViewers = Math.floor(Math.random() * 6) + 2;
            viewCountText.data = randomViewers + ' ';
        }

        setInterval(updateViewers, 5000);
    }

captura-de-pantalla.jpg

I hope it can help you.

If you need more help, with a fee, you can write me to my e-mail sancino@gmail.com.

 

Best,

JP

EagleHunted
Excursionist
16 0 2

Hi , Is there's any possible way to add this without coding ? an app perhaps ? I'm using a dawn theme , thank you 

Rackeem
Visitor
1 0 0

Does this work for all themes?

 

amelie5
Visitor
1 0 0

I am using Motion theme. It don't have theme.js.liquid file in the asset folder. It have theme.js only. I added that code in theme.js file but noting changes. What do i do now?

MRamzan
Shopify Partner
165 2 23

Here is the way to display live visitors anywhere in your store.

 

 

Let me know if you have any problem.

Thanks.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112