# People viewing product right now

Solved
isSalon
Excursionist
19 0 5

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!

0 Likes
Julie
Shopify Staff
Shopify Staff
1103 105 292

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

0 Likes
isSalon
Excursionist
19 0 5

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”

0 Likes
PublicApps
Shopify Partner
111 4 27

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.

Just trying to help out.
- If my reply was helpful, please Like it or mark it as Accepted Solution to let me know!
- Need store customizations? Then consider Hiring us.
isSalon
Excursionist
19 0 5

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

0 Likes
isSalon
Excursionist
19 0 5

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

0 Likes
PublicApps
Shopify Partner
111 4 27

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);
	}
});

 

 

 

Just trying to help out.
- If my reply was helpful, please Like it or mark it as Accepted Solution to let me know!
- Need store customizations? Then consider Hiring us.
0 Likes