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:

  1. 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?
  2. 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.
  3. 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.
  4. 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.

Buy the 72-hour install — $997Merchant FAQAll playbooks