Detection Order
MOD Bundles pulls swatch data from multiple sources in priority order:
Theme Swatch Setting — If you provide a path (e.g.,
settings.color--swatches)Auto-detected theme settings — Common names like
color_swatches,color--swatches,swatch_configCustom Swatches — Color mappings in the block settings
Native Shopify Swatches — From product variant settings
Custom Swatches
In the Collection Bundle block settings, find Custom Swatches and enter one per line:
Color Name:#hexcode
Examples:
Black:#000000Sage Green:#9DC183Dusty Rose:#DCAE96Navy:navyBlue/White:#0000FF#FFFFFFMarble:marble-texture.png
Supported formats: hex codes, CSS color names, RGB values, multi-color gradients (#hex1#hex2), and image filenames (uploaded to Shopify Files).
Naming Rules
Swatch names must match your product variant option values. Names are converted to handles for matching:
Spaces → hyphens
Special characters removed
Lowercased
Dusty Rose → dusty-rose (matches either "Dusty Rose" or "dusty-rose" in product options)
Troubleshooting
Swatches not appearing — Only works for options named "Color", "Colour", or "Finish"
Wrong color showing — Verify hex code and check for duplicate definitions
Fallback color — The variant name isn't defined; add a custom swatch entry
Image swatches not loading — Check filename is case-sensitive and image is uploaded to Shopify Files