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".
Enabling Swatches
On Product Grid Cards
Show small swatches (up to 3 colors + "+X" indicator) when inline selection is OFF:
Theme Customizer → Pack Builder block → Show Color Swatches
On Product Cards (Full)
Enable inline variant selection with "Auto" display mode for full swatches on product cards. See Variant Selection.
Custom Swatches
Location: Theme Customizer → Pack Builder block → Custom Swatches
Format: One per line — Color Name:value
Black:#000000Navy Blue:#000080Coral:rgb(255, 127, 80)Tie Dye:#FF6B6B#4ECDC4Leopard Print:leopard-pattern.png
Supported values:
Hex codes —
#FF0000CSS names —
red,blueRGB —
rgb(255, 127, 80)Multi-color gradients —
#FF0000#00FF00(multiple hex codes, creates gradient)Images —
pattern.png(upload to Settings → Files first, 72×72px recommended; PNG, JPG, GIF, WebP, SVG)
Name Matching
Swatch names match variant option values via handles (lowercase, hyphens for spaces):
"Navy Blue" matches
Navy Blueornavy-blue"Red/Orange" matches
red-orange"Café au Lait" matches
cafe-au-lait
Theme Swatch Setting
Point MOD Bundles to your theme's swatch configuration:
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.
Troubleshooting
Swatches not appearing — Option must be named "Color", "Colour", or "Finish"; check "Show Color Swatches" is enabled
Wrong color — Verify hex code; check spelling matches variant name exactly
Default/fallback color — Color name not defined in any source — add a custom swatch
Image not loading — Verify file exists in Shopify Files; filename is case-sensitive
Swatches work in grid but not modal — Check for theme CSS conflicts; try incognito mode