Is your Shopify variant picker not working correctly?

Maybe the customer selects a different size or color, but:

The price doesn't change
The product image stays the same
The Add to Cart button adds the wrong variant
The selected option doesn't update
Some variants appear unavailable
The variant URL doesn't change
The product form keeps the old variant

These problems are often caused by theme JavaScript, product-form code, incorrect variant data, custom Liquid, or app conflicts.

Having a Shopify variant problem right now?

I troubleshoot Shopify Liquid, JavaScript, theme, product and Add to Cart issues.

Get Shopify bug-fixing help on Fiverr →

Let's go through the fixes.

1. Check the Variant Data in Shopify Admin

Before touching your theme code, make sure the variants themselves are configured correctly.

Go to:

Shopify Admin → Products → Your Product → Variants

Check:

Variant name
Price
Inventory
Availability
SKU
Variant image

Shopify stores important information such as price, inventory and images at the variant level.

For example, if you have:

Color: Black / White

Size: Small / Medium / Large

make sure the combinations you expect customers to select actually exist.

If the admin data is incorrect, changing theme JavaScript won't solve the underlying problem.

2. Price Doesn't Change When a Variant Is Selected

This is one of the most common symptoms.

For example:

Small — $20

Customer selects:

Large — $30

But the product page continues displaying:

$20

This usually means the variant selection is changing visually, but the theme isn't correctly updating the price element.

Shopify's theme architecture expects the selected variant to drive product information such as price and media.

What to check

Open your browser's developer tools and check for JavaScript errors.

Also inspect the product variant picker and price element.

If the theme's JavaScript expects a particular selector or element and custom code has changed it, the script may no longer find the price element.

This can happen after:

Custom Liquid changes
Theme updates
Page-builder changes
App installation
Custom JavaScript

3. Variant Image Doesn't Change

Another common problem is:

Customer selects Red → Product image stays Black

If the correct image is assigned to the variant, Shopify can display that variant image when the selection changes. Shopify allows an image to be assigned to each product variant.

First check the admin

Go to:

Products → Product → Variants

Check whether the variant has the correct image assigned.

If the image is correctly assigned but doesn't change on the storefront, investigate the theme's variant JavaScript and media-gallery code.

Common causes

Broken variant JavaScript
Custom product gallery
App conflict
Incorrect variant data
Theme update
Custom Liquid

4. The Wrong Variant Is Added to Cart

This is more serious because the customer may believe they purchased one variant while Shopify actually adds another.

For example:

Customer selects:

Blue → Large

But the cart contains:

Blue → Small

The visible selector and the actual product form are no longer synchronized.

A Shopify product form needs to submit the selected variant correctly.

A typical form uses a variant ID:

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

The important part isn't simply having the input.

The value needs to change when the customer selects another variant.

If the visible picker changes but the hidden variant ID remains unchanged, the wrong product variant can be added to the cart.

Wrong variant being added to cart?

This usually needs theme/product-form debugging rather than simply changing the button.

Get Shopify theme debugging help on Fiverr →

5. Check the Browser Console for JavaScript Errors

If the variant selector suddenly stopped working, open:

Chrome → Inspect → Console

Then change the product variant.

Look for errors such as:

Uncaught TypeError
ReferenceError
Cannot read properties of undefined
Failed to fetch

A JavaScript error can prevent the variant picker from updating the rest of the product page.

For example:

Variant selection → JavaScript error → price/image/form doesn't update

The selector itself may look perfectly normal.

That's why checking the console is often more useful than immediately editing Liquid.

6. Check Recently Installed Apps

Apps can modify the product page and product form.

Examples include:

Product options
Bundle apps
Subscription apps
Product personalization
Reviews
Sticky Add to Cart
Upsells
Page builders

An app may replace or re-render part of the product form.

If the variant picker worked before installing an app and stopped afterward, investigate the app first.

A simple test

Create a duplicate theme and temporarily disable the relevant app functionality if possible.

Then test:

Select variant → Price → Image → Add to Cart

If everything works again, you've found an important clue.

7. Check Custom Liquid and Theme Changes

Custom code is another common reason variant pickers break.

For example, someone may modify:

main-product
product-variant-picker
Product form
global.js
Product media
Cart JavaScript

and accidentally break the connection between the variant picker and product form.

Shopify's own troubleshooting documentation recommends reviewing recent theme code changes when theme behavior breaks and provides a Timeline for restoring previous file versions.

Think about what changed

Ask yourself:

Did the variant picker work before this change?

If yes, compare the current theme with the previous working version.

Don't randomly rewrite the whole product section.

Find the change that caused the problem.

8. Test the Variant Picker on Mobile

A variant picker can work on desktop but fail on mobile.

Test:

Chrome desktop
Mobile Chrome
Safari on iPhone if available

Check:

Dropdowns
Color swatches
Size buttons
Price updates
Image changes
Add to Cart
Sticky product buttons

Sometimes the underlying variant logic works correctly but mobile CSS or JavaScript prevents the UI from responding properly.

How to Diagnose a Shopify Variant Problem

Use this simple process:

Step 1 — Check the product in Shopify Admin

Make sure variants, prices, inventory and images are correct.

Step 2 — Select a variant

Watch what changes.

Does the:

Price change?
Image change?
URL change?
Availability change?
Add to Cart state change?

Step 3 — Check the console

Look for JavaScript errors.

Step 4 — Inspect the product form

Check whether the selected variant ID changes.

Step 5 — Check recent changes

Look at:

Theme updates
Custom Liquid
JavaScript
New apps
Product-page builders

Step 6 — Test another product

If the problem happens on only one product, the product configuration may be responsible.

If it happens across every product, investigate the theme or app.

Shopify Variant Picker Problem Checklist

ProblemLikely AreaPrice doesn't changeVariant JavaScript / price elementImage doesn't changeMedia gallery / variant dataWrong variant addedProduct form / variant IDVariant can't be selectedVariant data / JavaScriptOptions disappearAvailability logic / themeWorks on desktop onlyMobile CSS / JavaScriptBroke after app installationApp conflictBroke after theme editCustom Liquid / JavaScriptBroke after theme updateTheme customization conflict

Why Is My Shopify Variant Picker Not Working?

Usually, the problem is not the visible dropdown or swatch itself.

The actual issue may be somewhere between:

Variant Picker → JavaScript → Selected Variant → Product Form → Price/Image → Add to Cart

If one part stops communicating correctly, the customer can see a broken product page even though the Shopify Admin looks completely normal.

Shopify's developer documentation specifically recommends using variant selectors and updating product media and price when a new variant is selected.

When Should You Hire a Shopify Developer?

You should consider getting professional help if:

The wrong variant goes into the cart
Variant prices don't update
Product images don't change
JavaScript errors appear
The issue started after custom coding
An app is interfering with the product form
The theme was recently updated
The problem only happens on mobile
You have a heavily customized product page

These issues can involve several theme files, so repeatedly changing code without identifying the root cause can make the problem worse.

Need help fixing your Shopify variant picker?

Get Shopify bug-fixing help on Fiverr

Final Thoughts

A broken Shopify variant picker can affect much more than the dropdown itself.

It can cause:

Wrong price → Wrong image → Wrong variant → Wrong cart item → Lost sale

Start with the product data, then inspect the variant picker, JavaScript, product form and recently changed theme/app code.

The goal is always:

Reproduce → Inspect → Find the cause → Fix → Test desktop + mobile

If you've tried the basic fixes and your Shopify variant picker is still not working:

Fix Shopify variant, Liquid, JavaScript and theme issues on Fiverr

FAQ

Why is my Shopify variant picker not working?

Common causes include incorrect variant data, broken theme JavaScript, custom Liquid, product-form problems or conflicts with Shopify apps.

Why doesn't my Shopify price change when I select a variant?

The selected variant may not be reaching the theme's price-update logic, or custom theme code may have broken the connection between the picker and price element.

Why does Shopify add the wrong variant to cart?

The visible variant selection and product form may be out of sync. The form could still be submitting an older variant ID.

Why doesn't my product image change when selecting a variant?

First check that the correct image is assigned to the variant in Shopify Admin. If it is, investigate the theme's variant/media JavaScript.

Can a Shopify app break variant selection?

Yes. Product options, bundles, subscriptions, page builders and other apps can modify or replace parts of the product form.

Can custom Liquid break Shopify variants?

Yes. Changes to the product form, variant picker or JavaScript can cause the selected variant and the form to become unsynchronized.

Why does my variant picker work on desktop but not mobile?

Mobile-specific CSS, JavaScript or theme customizations can interfere with the picker or its surrounding product-page elements.