I want to add a "currently viewing this product" section under the buy button

I want to add a "currently viewing this product" section under the buy button

Yanyslav
Visitor
2 0 1

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?

Reply 1 (1)

StoreWatchers
Trailblazer
205 30 39

Hello @Yanyslav,


Greetings from the Store Watchers Support Team! Happy to help you today.
 
You can add it to the theme.liquid file before the </body> tag.
 
Don't forget to add a <script></script> tag before and after your code.
 
Let me know if need further assistance 
 

Regards,

Store Watchers Support Team

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs