My color swatches look clickable but the price and photo never update
If clicking a color or size swatch leaves the price, photo, or cart selection stuck on the wrong variant, the cause is almost always missing variant data or a swatch that never triggers the theme's real variant change event.
What's going on
You click a swatch, say switching from Black to Ivory, and it visually highlights as selected, but the price stays the same, the product photo doesn't change, or worse, the wrong variant ends up in the cart when you hit Add to Cart. This is one of the most reported functional swatch failures on Shopify: it isn't a cosmetic styling bug, it's a sync bug between what the shopper sees and what the underlying variant picker actually thinks is selected.
It shows up in a few different flavors: swatches that do nothing at all when clicked, swatches that change the visual highlight but not the price or image, or swatches that change the image but add a different variant to the cart than the one shown. All three point to the same root issue, the swatch element isn't properly wired to the theme's real variant selection mechanism, which drives price, image, inventory, and cart data off a single selected variant.
Why it happens
Shopify's variant picker maps each combination of option values, like Color: Ivory and Size: M, to one specific variant, and the theme's JavaScript listens for a change event on the option input to know which variant is now active. It then updates price, image, availability, and the add-to-cart payload together. A swatch that's just a styled element or thumbnail, rather than a real, correctly valued input, can visually select without ever telling the theme a variant change happened.
The other major cause sits upstream of any code: a variant simply has no image assigned to it in Shopify Admin, or an option value has no swatch color or image configured, so even a perfectly wired swatch system has nothing correct to switch to. This is especially common on stores that bulk imported products or added variants without going back to assign per-variant images.
Because theme code behind the variant picker changes over time, custom swatch code that worked at one point can quietly stop firing correctly after a theme update changes the structure it was built against.
5 ways to fix it
Check whether Shopify's native swatch feature is already available in your theme
Shopify now has a built-in swatch system for Online Store 2.0 themes: you assign each variant option value a swatch (a color or an uploaded image) directly on the product in Admin, or through a linked metafield definition, and an updated theme renders those as clickable swatches wired to the real variant picker. In the theme editor, open the product page section and look for a variant picker or swatch-related setting. If your theme has been updated recently, turning this on and assigning swatch values in Admin often replaces a broken custom swatch script entirely, at no extra cost.
Make sure every variant actually has a swatch value and an assigned image
A surprisingly common cause isn't code at all: an option value like Beige was never given a swatch color or image in Admin, or a variant was never linked to one of the product's gallery images. If that underlying data is missing, no script can make the swatch reflect the right photo or price. Go into each variant in Admin, confirm an image is attached, and confirm the option value has a swatch defined.
If you're using a custom or app-based swatch, verify it actually changes the variant selection, not just the visual style
Shopify theme's variant picker works by listening for a real change event on the underlying option input (radio button or dropdown) to know which variant is now selected, then updates price, availability, the featured image, and the add-to-cart button together. A swatch built as a styled clickable element that only toggles a CSS class, without also updating the matching input and firing a genuine change event, can look selected while the form still points at the old variant. The fix is to bind each swatch to its real input value and trigger the change programmatically, not just restyle the swatch.
Rule out a stale or duplicated app embed as the culprit
If a swatch app is installed, confirm its app embed is actually turned on in the theme editor's app embeds section. Many swatches stopped working reports trace back to the embed being switched off after a theme update, or two swatch scripts, an old manual snippet and a newly installed app, both trying to control the same inputs and fighting each other. Once you're running the app or the native feature, remove any leftover custom swatch code so only one system owns the click handling.
Retest after every theme update, since variant picker markup can change
Shopify and theme developers periodically adjust the HTML and JavaScript structure behind the variant picker, so custom swatch code written against an older structure can silently break after a theme update even if you changed nothing yourself. After any theme update, click through every swatch on a product with multiple options and confirm price, image, and availability all update together before you publish.
Bottom line
Start with Shopify's built-in swatch feature and correct variant data before writing or paying for custom code, since most swatch click does nothing reports come down to missing variant images or swatch values, or an app embed that got switched off. If you need fully custom swatch behavior, such as unusual layouts or swatches shared across products, that's the kind of narrowly scoped build BesPoP does.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.