Swatch fix

Shopify Swatch Not Rendering

Set up color swatch. Product page shows dropdown. Here's why + fix.

Last updated: July 30, 2026By the Print It My Way team

Install Print It My Way — Free

5 common causes

  1. Metafield type wrong (should be 'color')
  2. Metafield namespace/key mismatch
  3. Theme doesn't support metafield swatches
  4. CSS overrides hiding swatch
  5. Cached page

Dawn setup

  1. Products → Metafields → Add 'Color' metafield type = Single line text (or Color)
  2. Set value per variant (hex code)
  3. Theme customize → Product template → variant picker style = Swatches

Theme code check

Older themes don't render metafield swatches. Upgrade to Online Store 2.0 theme or add custom code.

Cache clear

Hard refresh Ctrl+Shift+R. Test in incognito. Wait for Shopify CDN cache.

Frequently asked questions

Why isn't my Shopify color swatch rendering?

5 causes — metafield type wrong, namespace mismatch, theme incompatible, CSS override, cached page.

How to set up swatch on Dawn?

Products → Metafields → Color metafield → hex per variant. Theme customize → picker style = Swatches.

Metafield namespace for swatch?

Dawn expects specific namespace. Check theme docs or use theme editor 'Add color metafield' shortcut.

Older theme without swatch support?

Upgrade to Dawn or 2.0-compatible theme. Or add custom Liquid code.

Swatch shows wrong color?

Hex code typo. Verify metafield value (e.g. #FF0000 for red).

CSS hides swatch?

Inspect element in browser DevTools. Check for display:none or visibility:hidden overrides.

App-based swatch vs metafield?

App: more flexible, works on any theme. Metafield: native Dawn, simpler.

Swatch on mobile only broken?

Responsive CSS bug. Test with browser DevTools mobile view + real device.

Related reading

Try it free on Shopify

Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.

Install Print It My Way