Shopify Variant Picker Not Updating Price or Image

Quick answer

If a Shopify variant picker changes the selected option but the price, image, or add-to-cart state does not update, the issue is usually theme JavaScript, product form markup, missing variant data, or an app conflict. The product data can be correct in admin while the storefront script fails to update the page.

Test the same product in an unmodified Shopify theme or a fresh duplicate of Dawn. If it works there, the issue is in the live theme or an app layered onto the product form.

The symptom

A shopper selects a different size, color, finish, or pack quantity, but the page does not react correctly. The price stays the same, the image does not switch, the selected variant is not added to cart, or the button gets stuck disabled.

Community threads usually fall into two buckets: the product variant data was not saved correctly, or the theme’s variant JavaScript no longer matches the product form after customization.

Start in the admin

Go to Products → Product → Variants.

Confirm each variant has the correct price, image, SKU, inventory, and availability. Save the product. Then test in a private browser window before editing code.

Most likely causes

1. Variant prices or images are not saved on the variants

Before debugging the theme, confirm the data is actually on the variants. Shopify variant pricing and inventory live on each variant, not only on the parent product.

2. The theme JavaScript is not listening to the picker

Modern Shopify themes use JavaScript to listen for option changes, resolve the selected variant, update the URL, update the price, update media, and update the product form’s variant id. If custom markup removes the expected selectors, the script can stop working.

3. Product form markup was changed

The add-to-cart form needs to submit the selected variant id. If custom code, a page builder, or an app replaces the product form, the visible picker can drift away from the hidden variant id field.

<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

That hidden input must update when the customer changes variants.

4. The price element no longer matches the theme script

Several Community fixes point to the same issue: the script tries to update a price container that no longer exists or has a different id or class after customization. Compare the product price markup against the original theme.

5. A product options app is overriding the theme

Variant option apps, swatch apps, bundle apps, subscription widgets, and page builders can all replace or override the native picker. One Community example points directly to a product options app overwriting otherwise working theme behavior.

6. Variant URL handling is broken

Shopify product URLs can include a variant query parameter. If the theme does not read or update the selected variant properly, the page can load with one variant while the UI behaves like another.

DevTools checks

Open the product page.
Open DevTools → Console.
Select a different variant.
Look for JavaScript errors from theme files, product option apps, subscription apps, or page builders.
Inspect the product form and check whether the hidden name="id" input changes to the selected variant id.
Watch whether the URL changes to include the selected ?variant= value.

Liquid check

On a duplicate theme, you can temporarily print variant data near the product form to prove Shopify has the data the script should be using.

<script type="application/json" id="ProductJson-debug">
  {{ product.variants | json }}
</script>

If the correct prices and images are in that JSON, the admin data is probably fine and the bug is in the storefront update logic.

Clean fix path

Duplicate the live theme.
Test the product in a clean Shopify theme or fresh Dawn install.
If clean theme works, compare the live theme’s product form, variant picker snippet, price container, and product JavaScript.
Disable product option or swatch apps one at a time on the duplicate theme where possible.
Restore the expected product form markup and selectors instead of adding a second competing variant script.

Common misunderstanding

The picker showing options does not mean the selected variant is changing. The visible controls, hidden variant id, product media, price container, URL, and add-to-cart state all have to stay in sync.