Automatic Detection
MOD Bundles looks for swatch data in this order:
Native Shopify Swatches — Products with Shopify's native color swatches
Theme Swatch Settings — Auto-detected from common theme settings
Custom Swatches — Your own mappings in theme block settings
Swatches apply to options named "Color", "Colour", or "Finish". If you'd like swatches to work with other option names, reach out to us at support@modbundles.com and we can look into adding it for you.
Custom Swatches
Define your own color mappings in the theme block settings.
Location: Theme Customizer → Mix & Match Bundle block → Custom Swatches
Format: One per line — Color Name:value
Supported Formats
Black:#000000Navy Blue:#000080Coral:rgb(255, 127, 80)Tie Dye:#FF6B6B#4ECDC4Leopard Print:leopard-pattern.png
Hex codes —
#FF0000CSS names —
red,blueRGB —
rgb(255, 127, 80)Multi-color gradients —
#FF0000#00FF00(multiple hex codes)Images —
pattern.png(upload to Settings → Files first, 72×72px recommended)
Name Matching
Swatch names must match your variant option values. Names are converted to lowercase with hyphens:
"Navy Blue" matches
Navy Blueornavy-blue"Light Blue" matches
light-blue
Theme Swatch Setting
If your theme has swatch configuration, point MOD Bundles to it.
Field: Theme Swatch Setting
Format: settings.your_setting_name
Common values: settings.color_swatches, settings.color--swatches, settings.swatch_config
To find yours: Theme Customizer → gear icon → look for colors/swatches section.
Swatch Styling
Customize appearance in MOD Bundles → Customization:
Setting | Default |
Swatch Size | 20px |
Ring Width | 2px |
Troubleshooting
Swatches not appearing — Option must be named "Color", "Colour", or "Finish"
Wrong color — Verify hex code, check for typos in name
Default/fallback color — Color name isn't defined in any source — add a custom swatch
Image not loading — Verify file exists in Shopify Files, filename is case-sensitive