Playbook · Shopify color / variant swatches not showing
Shopify color swatches not showing.
Written for a Shopify DTC owner whose color / variant swatches are missing or broken on the product page or collection — theme option UI still Dropdown / Buttons, color metafields or option-value color/image empty, swatch apps unpublished or fighting native chips, or image-based / collection-card swatches unbound. DIY-first: prove theme option UI vs metafields vs apps vs image-based swatches; repair the live path; retest on the live storefront. Distinct from collection quick view / quick add broken, size chart not showing, the generic PDP variant picker not updating (price / image / ATC cycle), and sticky add-to-cart bar missing. No earnings claims, no invented case studies.
Nico at Latch AI Ops · Sep 8, 2026 · ~12 minute read
Buy the 72-hour install — $997Variant pickerSize chartMerchant FAQ
01
Color / variant swatches missing or broken — not quick view, not size chart, not generic variant picker, not sticky ATC.
Several PDP / collection surfaces can look like “swatches are broken.” They do not share a settings panel. This page is only when color circles / chips / image swatches are missing, blank, wrong-color, or non-clickable on the product page or collection cards (theme option UI, color metafields / option values, swatch apps, image-based swatches). Collection Quick view / Quick add modals are shopify-quick-view-not-working. Size chart / fit guide popups are shopify-size-chart-not-showing. The generic product-page variant picker that fails to update price, media, or Add to cart (regardless of whether options render as dropdowns or chips) is variant-picker-not-updating. Sticky / floating add-to-cart bars are shopify-sticky-add-to-cart-missing.
02
Prove theme option UI vs color metafields vs swatch apps vs image-based swatches on a live PDP and collection.
Open a live multi-color product URL and a collection that shows that product — not only Theme editor preview. Capture four proofs before you install another swatch app:
- Customize Current → product information / variant picker: is the Color (or Colour) option type set to Swatches / Color / Pills — not Dropdown or Buttons — on the published theme?
- Products → [product] → Variants / Options: does each Color value have a hex / swatch color, or a linked image for image-based swatches? Empty color values render blank chips even when the UI type is correct.
- Theme settings → App embeds: is a color / variant swatch app enabled on Current? Two swatch apps plus native chips often blank each other — DevTools: confirm one swatch node mounts.
- Collection / product-card settings: is “Show color swatches” / “Show variant images on cards” enabled on Current if buyers expect chips on the grid? Missing collection chips with a working PDP is still this playbook’s collection surface.
If you only tested a collection quick-view modal, a size chart popup, a sticky ATC bar, or the generic “picker does not update price/image” path with dropdowns that already look fine, you are on the wrong playbook.
03
Theme option UI set to Dropdown / Buttons instead of Swatches / Color on Current.
Online Store 2.0 themes (Dawn and cousins) usually gate color circles behind the variant-picker block’s per-option type: Dropdown, Buttons, or Swatches / Color / Pills. After a theme update, a developer paste, or a Markets / language duplicate of the product template, Color can fall back to Dropdown while Size stays Buttons — buyers report “swatches disappeared” even though variants still work. The setting can also be correct only on a draft theme while Current still publishes Dropdown.
Fix path: Customize Current → product template → Variant picker / Product information → set the Color option to Swatches / Color / Pills → Save / Publish Current. Confirm the live PDP shows chips, not a select menu. Theme editor publish / save failures are theme-editor-publish-failing. Liquid / section errors after a template edit are liquid-error-on-product-page.
04
Color metafields / option values empty, or swatch apps fighting native chips.
Native swatches need a color (or image) on each option value — Shopify’s category metafields / product option values, or a theme metafield such as custom.color / metaobject color entries. Empty values render hollow or transparent chips. Separately, swatch apps (App embed + theme app block, or a script that injects chips) can fight the theme’s native swatches: embed off on Current, enabled only on a draft, scoped to Markets the buyer is not in, or set to replace native while the theme still renders its own blank chips.
Fix path: Products → Options / Variants → fill Color hex or swatch image for every value → Save. Theme settings → App embeds → enable one swatch app on Current (or disable the app and use native only) → Save. Customize Current → add the app’s swatch block where the app docs say → Save. Disable the second swatch app while testing. Generic App embeds failing across many apps is app-embed-not-loading. Product metafields not rendering on the PDP in general are product-metafields-not-showing.
05
Image-based swatches unbound, or collection card swatches off on Current.
Image-based / variant-media swatches need each Color value linked to a variant image (or a dedicated swatch image). If variants share one featured image, or media is not assigned per variant, chips look identical or blank. On collections, many themes hide color chips behind a product-card setting (“Show color swatches”, “Show available colors”, “Variant images on cards”). That setting can be off after a theme update, present only on a draft, or dropped when a developer replaced the product-card snippet — PDP swatches work, grid chips do not.
Fix path: assign a distinct image (or swatch image) to each Color variant → Save. Customize Current → collection / product card → enable Show color swatches / variant images → Save / Publish Current. Retest on a live collection URL. If the issue is CDN images 404-ing rather than swatch UI missing, chase cdn-shopify-images-not-loading. If chips click but price / gallery never update, that update path is variant-picker-not-updating.
06
You tested quick view, size chart, generic variant picker, or sticky ATC instead.
Collection quick view / quick add broken is shopify-quick-view-not-working. Size chart not showing is shopify-size-chart-not-showing. Generic PDP variant picker not updating price / image / ATC is variant-picker-not-updating. Sticky add-to-cart missing is shopify-sticky-add-to-cart-missing.
The only honest test for this page: on a live PDP or collection, color / variant swatches (circles, chips, or image swatches) are missing, blank, wrong-color, or non-clickable — fixable with Swatches option UI on Current, filled color / image option values, one swatch app path or native chips (not both fighting), image-based / collection-card swatches enabled, and no CSS / consent hide — not quick view alone, not size chart alone, not the generic picker update path alone, not sticky ATC alone. Capture option UI + metafields + app + image/collection path, fix the path. Anything else is a different product.
07
When to stay DIY vs pay $997.
Stay DIY if Color is set to Swatches on Current, every option value has a color or image, one swatch path works (native or one app), collection cards show chips when expected, and chips work on a live PDP / collection. That is ordinary Shopify admin + theme work.
Pay $997 when the gap is wiring: lead capture, ops alerts, and a checkout-ready workflow on the stack you already pay for, installed in 72 hours after collaborator access lands. Latch does not sell an earnings, conversion, or swatch-click lift number. Latch does not rebuild your theme’s swatch UI as a design agency. One live store. Clock starts when collaborator access is in.