Shopify Variant Picker Not Updating Price or Image

The real symptom

Merchants describe this a few ways: “the price only changes after refresh,” “the image does not switch when I pick a color,” “the wrong variant adds to cart,” or “some options work but one color/size combination gets stuck.” These are classic signs that the variant picker UI and the actual selected variant state are out of sync.

Likely causes

• Variant data is correct, but the theme script is broken. This is common in older custom themes or purchased themes with modified product forms.
• The price container selector changed. JavaScript may be trying to update an ID or class that no longer exists in the section.
• The product form ID is mismatched. The variant picker must be associated with the correct product form.
• The selected variant input is not updated. The hidden name="id" input must receive the selected variant ID before add to cart.
• Variant images are not assigned in admin. Shopify can only switch to a variant image if the variant has associated media.
• An app replaced or interfered with the product form. Swatch apps, subscription apps, bundle apps, and page builders can all modify product behavior.

Confirmed Community fix

Community threads repeatedly narrow this down by comparing the broken theme against a working theme. Recent variant pricing threads point to theme product-form JavaScript not updating price on variant change, while another recent case found that a product-options app was overwriting the theme’s correct price behavior. Older threads around variant images and selected values point to the same practical method: verify the variant setup, then isolate whether the live theme code or app code is failing to react to variant changes.

Admin path

1. Go to Shopify Admin → Products.
2. Open the affected product.
3. Confirm each variant has the correct price.
4. Confirm each image or color variant has the expected media assigned.
5. Go to Online Store → Themes.
6. Preview the product in a clean theme, preferably Dawn or another current Shopify theme.
7. If the clean theme works, duplicate the live theme before editing code.
8. Check the product template, variant picker snippet, product form, and product JavaScript.

DevTools checks

• Open the browser console and change variants. Any JavaScript error is a strong clue.
• Inspect the product form and confirm there is a hidden input like name="id" with the selected variant ID.
• Change a variant and watch whether that hidden input changes.
• Inspect the price wrapper and compare its ID/class to what the theme script expects.
• Disable swatch/product-options/product-form apps in a duplicate theme if an app is injecting variant behavior.

Useful Liquid/code check

In Dawn-style themes, the variant picker is tied to a product form ID and section ID. If a customization duplicated a product form, moved the picker, or replaced the price block without updating the JavaScript target, the picker can appear to work while the product state stays stale.

{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}

Do not paste random variant JavaScript into a live theme. First identify whether the existing product script is failing because of a selector mismatch, missing form ID, duplicate form, app conflict, or missing variant media.