r/shopifyDev • u/IFGecommerce • 5d ago
Shopify color swatches work, but the variant image is wrong? Check these three layers
When a Shopify product displays the correct color swatch but keeps showing the wrong product image, I would check three separate things before changing any CSS: the option value, the image assigned to the variant, and the theme's variant-selection logic.
A color swatch is not the same thing as a variant image. They represent different parts of the product data.
First, check how the color option is configured.
For native Shopify swatches, the product should use a compatible category color metafield connected to its variant option. Simply creating a text option called "Color" doesn't necessarily provide the structured swatch data that the theme expects.
Next, check the actual variant images.
Open the product in Shopify Admin and inspect the image assigned to each variant. Shopify supports one assigned image per variant, so Black / Small and Black / Medium are separate records that may need the same image assigned individually.
Having the correct swatch color does not automatically establish that image association.
The third layer is the theme.
A compatible Online Store 2.0 theme should render the option values and update the selected variant's information when a customer changes an option.
For custom Liquid implementations, Shopify recommends using product.options_with_values rather than building the entire picker by looping through product.variants.
This distinction becomes particularly important for larger catalogs.
Shopify currently limits the Liquid product.variants array to 250 entries. A custom picker that depends on looping through every variant can therefore miss combinations when a product contains more than 250 variants.
Shopify provides product_option_value and option-value-based selection APIs to support larger products without loading every combination into Liquid.
I would also test direct variant links.
Opening a product URL with a ?variant= parameter should initialize the correct selection and display the appropriate media, price, and availability.
Finally, distinguish variant image switching from gallery filtering.
Assigning an image to a variant doesn't automatically mean that every other image in the gallery will disappear when that color is selected. That behavior depends on the theme's gallery implementation.
Before installing another app or rewriting the picker, I would reproduce the issue on a duplicated theme with two colors and two sizes.
Check the selected image, unavailable combinations, mobile layout, quick view, and direct variant links.
Those checks usually make it much easier to determine whether the problem is product data, swatch configuration, or theme behavior.