Reviewed November 1, 2026

Shopify Variant Selector Not Updating the Price: Fix Order That Works

Work in this order. First, test in a fresh unpublished copy of a free Shopify theme with no apps injected: if the price updates there, your live theme or an app is at fault. Second, check the browser console on the product page for a JavaScript error on variant change, because one thrown error stops the price update script cold. Third, inspect whether your theme's price element still carries the class or id its variant script expects, especially after any price, sale badge, or app based price display edit. Most cases resolve at one of those three steps.

Few product page bugs cost money as quietly as this one. The shopper picks the larger size, the price stays at the base variant's figure, and they either check out with wrong expectations or leave, suspicious the store does not have its act together. Because the add to cart often still works, or worse, works with the wrong displayed price, the bug can run for weeks before a customer email surfaces it.

The cause is almost never Shopify's variant data, which is reliably present in the page. It is the chain between selection and display: an event listener, a script that errors, a price node the script can no longer find. Diagnose the chain in order and you will find the break without rebuilding anything.

Step one and two: isolate, then read the console

Publish nothing yet. Add a current free theme from the theme library, leave it unpublished, and preview a product with variants in it. If the price updates correctly there, your catalog data and account are fine, and you have confined the fault to your live theme or its apps. That single test prevents the most common waste of time in this fix, hunting through product settings that were never broken.

Back on the live theme, open the product page with the browser's developer console showing, then change the variant. Watch for red errors appearing at the moment of selection. A single JavaScript error in the variant handler halts everything after it, including the price swap. The error text usually names the file and line, and the file name often gives the culprit away: a recently added app's script, a customized theme section, an old snippet left behind by an uninstalled app still being loaded.

Step three: the price element hook and app conflicts

Themes update prices by finding a specific element, by class or id, and writing the new price into it. Any edit that renames, wraps, or duplicates that element breaks the lookup silently: the script runs, finds nothing it recognizes, and the old price stays. Sale price displays, installment messaging, and currency converter widgets are frequent editors of exactly that area of the page. If you recently added price adjacent features, suspect them first, and test with the app block or snippet disabled in a duplicate theme.

Work in a duplicated theme for every test that removes code, and change one thing at a time, retesting the variant after each change. The shotgun approach, removing five things at once, finds the fix and teaches you nothing, so the bug returns with the next app install and you start from zero. Keep notes as you go: which removal restored the update is the answer your future self, and any developer you hire, actually needs.

Prevention: protect the variant chain

After the fix, treat the product form as load bearing code. Before installing any app that touches price display, product options, or the buy area, install it on the duplicate theme first and run a variant change test on desktop and mobile, because some themes ship separate logic for each. Custom option apps that replace the native selector deserve extra scrutiny; they take over the chain entirely, and their support team becomes your first call when prices desync.

Add this to your post update routine: every theme version upgrade gets a two minute variant test before publishing. Theme upgrades replace section files, and a customization your store depends on can be overwritten in the process. Two minutes of clicking sizes on a test product is cheaper than two weeks of wrong prices, which is the arithmetic that makes boring checklists worth keeping.

Frequently asked questions

Why does the cart show the right price when the page does not?

Because the cart uses the variant actually selected, submitted with the form, while the page price is updated by theme JavaScript. A broken display script leaves the page stale even though the underlying variant selection and cart pricing are correct, which is why the bug hides so long.

Can an app really break variant price updates?

Yes. Apps that inject scripts into product pages can throw errors that halt the theme's variant handler, or modify the price element the theme script writes to. Testing in a clean theme and disabling recent price related apps in a duplicate theme are the fastest ways to identify one.

The price updates on desktop but not mobile. What does that mean?

Many themes use different sections or scripts for mobile product layouts. The fault is in the mobile specific code path: a separate price element hook or a drawer based selector. Test and fix in the mobile layout's files, and retest with a real device or device emulation.

I edited the price display to show savings. Could that be it?

Very plausibly. Sale and savings edits rewrite the exact price markup the variant script targets. Compare the price element in your edited section against the original theme file, restore the expected class or id hooks, and put your savings display in its own separate element.