Need product page to refresh on variant select / change

Store Design
,

Topic summary

A store owner wants their product page to automatically refresh when customers select different product variants. The goal is to display accurate pricing breaks that correspond to each variant selection.

Current Issue:

  • Variant changes don’t trigger a page refresh
  • Pricing information doesn’t update dynamically to reflect the selected variant’s pricing structure

Context:

  • The request relates to a specific product page (metallic melamine charger plates)
  • This appears to be a customization need for their Shopify store

Status: The discussion is seeking suggestions or solutions, with no responses or resolutions provided yet.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

I would like to see the product page to refresh on variant select / change in order to display correct pricing breaks.

Any thoughts?

2

This is an interesting problem.

I’ve looked over your store.

It looks like when you setup multiple images per variant (Can I have multiple images associated with one option? – RoarTheme - Premium Shopify Themes, Apps and Services), theme code reloads entire section instead of updating only some elements on the product page.

Despite Koala app trying to update quantity breaks section, it’s simply removed by this section reload.

I’d try to reach out to Theme support to ask whether it’s possible to configure the theme to not reload entire section.

I’d also try to reach to App support to ask whether it possible to force the app to reload with custom JS code.

Finally, it’s possible to modify theme code to fully reload page, as you asked.

What I’d try:
There is a handleOptionValueChange function in assets/product-info.js.
There is a code like:

    this.renderProductInfo({
      requestUrl: this.buildRequestUrlWithParams(productUrl, selectedOptionValues, shouldFetchFullPage),
      targetId: target.id,
      callback: shouldSwapProduct ? this.handleSwapProduct(productUrl, shouldFetchFullPage) : this.handleUpdateProductInfo(productUrl)
    })

I’d try to change it like this:

   let  newUrl = this.buildRequestUrlWithParams(productUrl, selectedOptionValues, shouldFetchFullPage);
   if (shouldSwapProduct) { 
     window.location = newUrl;
   } else 
    this.renderProductInfo({
      requestUrl: newUrl,
      targetId: target.id,
      callback:  this.handleUpdateProductInfo(productUrl)
    });

This, of course is untested and may require furhter fine-tuning.
You can reach out via direct messaging if you want it properly implemented in your store.

3

Hi @Rink

When you click on the color variant, the ‘BUY MORE & SAVE’ section doesn’t appear. But when you refresh the page, it shows up — that’s the issue, right?

image
image1329×611 123 KB

4

Yes. that is the exact issue.