Playbook · Shopify color swatch wrong
Swatches show. Colors lie.
Written for a Shopify owner whose color / option swatches mount on the PDP or collection cards but paint the wrong hex or image for each option — mismatched metafield color maps, CSS filters shifting hue, option-value order drifted from swatch assets, theme hardcoding colors by position, swatch apps mapping wrong keys — or you chased missing swatches, a broken picker, or a stuck gallery instead. DIY-first: prove option values vs map → correct paint → retest. Distinct from color swatches not showing, variant picker broken, and variant image not swapping. Soft-link size chart not showing when the leftover gap is fit guide, not color paint. No earnings claims, no invented case studies.
Nico at Latch AI Ops · Sep 10, 2026 · ~12 minute read
Buy the 72-hour install — $997Swatches missingVariant pickerMerchant FAQ
01
Color swatch wrong — not missing swatches, not picker broken, not gallery stuck.
Several “color looks wrong on the product page” bugs look alike. They do not share a fix. This page is only when swatches mount and are clickable, but the painted hex or swatch image does not match the real option — wrong metafield map, CSS filter, position-based theme colors, swatch app key mismatch. Swatch UI never mounts is shopify-color-swatches-not-showing. Cannot select options at all is shopify-variant-picker-broken. Gallery stays on featured after a correct select is shopify-variant-image-not-swapping.
Soft-check shopify-size-chart-not-showing / size-chart-popup-not-opening when the leftover gap is fit guide, not color paint, and variant-picker-not-updating when selection works but price / ATC also stay stuck.
02
Prove option values vs hex/image map + computed styles.
Open a live multi-color PDP. Confirm swatches mount and each click updates ?variant= or the product form variant id. In Admin → Products → Options, list the exact option values (case-sensitive). Soft-check theme / metafield color maps — often product.metafields.custom.color_swatches, variant metafields, or a theme JSON map keyed by option value. Soft-check DevTools computed background-color / background-image on each swatch — note filters, opacity, mix-blend-mode. Soft-check swatch apps that replace native option UI.
If swatches never appear, switch to shopify-color-swatches-not-showing. If clicks do nothing, switch to shopify-variant-picker-broken. If paint is correct but the gallery never swaps, switch to shopify-variant-image-not-swapping.
03
Correct metafield/theme/app mapping; remove filters; retest.
Align each option value to the correct hex or swatch image asset (fix typos, case, and renamed options). Remove theme CSS filters / blend modes that shift hue. Stop hardcoding colors by position — key by option value. Disable fighting swatch apps until one clean map remains. Publish Current theme, hard-refresh the PDP, and click each swatch.
Honest retest: each swatch paints the intended color; click still selects the matching variant; console stays clean. Soft-link shopify-color-swatches-not-showing when UI never mounts. Soft-link shopify-variant-picker-broken when selection itself fails. Soft-link shopify-variant-image-not-swapping when paint is correct but gallery stays stuck.
04
You tested missing swatches, picker broken, or gallery stuck instead.
Swatch UI never mounts is shopify-color-swatches-not-showing. Cannot select size / color at all is shopify-variant-picker-broken. Gallery stays on featured after select is shopify-variant-image-not-swapping.
The only honest test for this page: swatches mount and clicks update ?variant= / form id, but the painted hex or swatch image does not match the option label. Anything else is a different product.
05
When to stay DIY vs pay $997.
Stay DIY if you can spend one afternoon on the list above: prove option values vs hex/image map, correct metafield/theme/app mapping, remove hue-shifting filters, retest. That is the whole playbook. No agency required. Short answers also live on the merchant FAQ. Related pages: color swatches not showing, variant picker broken, variant image not swapping.
Pay for help when the work is not the color map itself — it is connecting the stack you already have so theme / swatch / metafield exceptions land in a channel you already check, and the live store is one workflow instead of a spreadsheet plus a Slack bot you forgot. That is the Latch AI Ops install.
What $997 USD one-time buys: lead capture on the live store, ops alerts in a channel you already check, and a checkout-ready workflow. 72 hours after collaborator access, not after payment. One live Shopify store. Access plus a delivery thread. Store URL collected at checkout. Not a SaaS seat, not a theme rebuild retainer, not a conversion guarantee, not a brand or theme job.
Other shops' public ranges, not testimonials: a checkout / ops install typically runs $500–$2,500. A full ops consulting block typically runs $2,000–$5,000. $997 is the cheap end of that work, sold as a 72-hour install of three systems — not as an earnings number or conversion-lift claim.
What it does not buy: more orders, recovered revenue, a forever swatch guarantee, or a case study. Latch AI Ops has not published customer proof because there are no customers yet. You are buying the install.
Checkout is on Whop. Operator is Nico. United States offer. You can revoke collaborator access after handoff. We do not take owner passwords.