Personalized checkout and custom promotions with Shopify Scripts
Hello,
I found a .js script that I would like to use but I cannot make it work because I dont know the coding for shopify to the fullest. Im a beginner.
I know that I need to put it in the theme.js.liquid file. But I dont have that in DAWM theme. So I guess its for the global.js.
I added the code in global.js but nothing happens. I guess the "classes" is correct for where to put the code?
Can someone help me modify it so I get the code working?
/** * 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); } });
Hi @46855004463
You can create a new asset, called custom.js, paste your code
And open your theme.liquid, add this code before </body> or </head>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
Hello,
I did this but I cannot get it to work. I guess that the JS script is written so that the classes for where to show the output is wrong. Can you help me?
pls share your store URL then I can look into it.
Hi @46855004463
/**
* 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('.product-form .form');
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);
}
});
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025