# People viewing product right now

[isSalon]

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!

[Julie]

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: 

• Nudgify Social Proof & FOMO 
• Hype - Social Proof Urgency
• Sales Pop - Social Proof Popup

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!

[isSalon]

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

Of course it's bad practice to mislead customers.

[isSalon]

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

[isSalon]

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

[PublicApps]

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

[kimber286]

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

[46855004463]

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

[planetjuniorseo]

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