Problem with custom code

Shopify Discussion
, ,

Topic summary

A Shopify store owner implemented custom code to display random numbers showing how many people have viewed and purchased a product in the last 24 hours. The feature works initially but disappears when customers switch product variants.

Technical Details:

  • Using Dawn theme with code in main-products.liquid
  • The issue occurs because changing variants re-renders productInfo, removing the custom display
  • An image shows the feature displaying purchase/view counts on a product page

Proposed Solutions:

  1. Call the custom code again at the end of the __renderProductInfo function in global.js
  2. If the code is too large (potentially 1000+ lines across multiple products), add an event listener that triggers the function whenever a variant changes

Current Status:
The initial solution didn’t resolve the issue. The discussion remains open as the store owner seeks alternative approaches to prevent the custom display from disappearing during variant changes.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m trying to show random numbers for how many people have bought and seen the product in the last 24 hours. It currently works and shows like this:

762C7D3D-9E22-466F-A83E-41AD44A9A390.png
762C7D3D-9E22-466F-A83E-41AD44A9A390.png1170×2532 233 KB

But there is one problem, it disappears and when you switch variant and I don’t know how to fix this. I’m using dawn theme with the following code in main-products.liquid

code: https://codeshare.io/zl3m6N
webshop URL: https://trendblend.eu/products/controllable-led-curtain

2

Hi @TrendBlend ,
Because when you change variant productInfo will be rerendered and your custom is in product info will be dissapeared
Try call your custom code again at the end of function "renderProductInfo" . It’s in global.js file

BSSCommerceB2B_0-1722929023200.png
BSSCommerceB2B_0-1722929023200.png942×691 35.7 KB

If it helps you, please like and mark it as the solution.

Best Regards

3

I hope these instructions will help you.

Have a nice day sir!

4

Hello @BSSCommerce-B2B , thanks for the respond but the code that you editted in the codeshare still does not work when changing variant. I have this code for many products so it is a big part of code. Adding this under renderProductInfo would be adding like 1000 lines of code there, would you recommend that? Or is there maybe another way?

5

If your code it’s too big. Try add an event when you change your variant to call your fuction again.

document.querySelectorAll(".product-form__input select").forEach(selectElement => {
    selectElement.addEventListener("change", function() {
        setTimeout(()=>{
          // Your function here
        },2000)
    });
});