Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
So, I have this code for the "currently viewing" element:
/**
* 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);
}
});
I was going to put it in the theme.js.liquid, but my theme Dawn doesn't have that asset. Where should I put this code to have this element appear on my product page under the buy button?
Hello @Yanyslav,
Regards,
Store Watchers Support Team
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025