Quick Checks
Do swatches work on regular (non-bundle) product pages?
Is your theme using native Shopify swatches or a custom implementation?
Have you enabled swatches in the bundle settings?
Understanding Swatch Support
MOD Bundles is designed to work with native Shopify swatches. However, swatch display can vary because:
Themes implement swatches differently
Some themes use custom JavaScript for swatches
Swatch styling may need theme-specific CSS
Step 1: Check Your Theme's Swatch Implementation
Test on a Regular Product Page
Go to a non-bundle product with color variants
Check if swatches display there
If swatches don't work on regular products:
The issue is with your theme's swatch setup, not MOD Bundles
Configure swatches in your theme first
If swatches work on regular products but not in bundles:
Continue to the next steps
Step 2: Check Bundle Swatch Settings
In MOD Bundles, ensure swatches are enabled:
Open MOD Bundles
Go to Customization
Look for swatch-related settings
Enable color/variant swatches if available
Save changes
Step 3: Check Variant Option Names
Swatches typically display for options named:
"Color"
"Colour"
"Size" (sometimes)
If your variant option is named differently (e.g., "Shade", "Finish"), swatches may not automatically appear.
To check:
Go to Products in Shopify admin
Open a product in your bundle
Look at the variant option names
Rename to "Color" if appropriate
Step 4: Theme-Specific Configuration
Some themes require additional setup for swatches to appear in app blocks.
Common Theme Settings
Go to Online Store → Themes → Edit theme
Look for theme settings related to:
Swatches Color swatches Variant displayEnsure swatches are enabled globally
Dawn Theme
Dawn uses native swatches. Check:
Theme settings → Product → Enable color swatches
Custom/Premium Themes
Premium themes often have their own swatch systems. Check your theme's documentation for:
How to enable swatches
Required meta fields or settings
CSS class names for swatch styling
Step 5: Add Swatch CSS (If Needed)
Sometimes swatches exist but aren't styled correctly. Add custom CSS:
/* Basic swatch styling */.bundle-color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;}.bundle-color-swatch.selected { border-color: #000;}/* Ensure swatches are visible */.bundle-variant-swatches { display: flex; gap: 8px; flex-wrap: wrap;}Add this CSS in MOD Bundles → Customization → Custom CSS.
Common Issues
Swatches Show as Dropdown Instead
Some themes default to dropdowns for all variants. To force swatches:
Check theme settings for "Variant picker type"
Look for options like "Swatches" vs "Dropdown"
Swatches Missing Colors
Swatch colors come from:
Variant color names (e.g., "Red", "Blue")
Product variant images
Theme color mappings
If colors are wrong or missing:
Ensure variant names match expected color names
Add variant-specific images
Check theme's color swatch mapping
Swatches Work for Some Products, Not Others
Check the products where swatches don't work:
Do they have a "Color" option?
Are variant images uploaded?
Is the option name spelled correctly?
When to Contact Support
If you've tried the above and swatches still don't appear:
Tell us your theme name — we can check compatibility
Share your store URL — we'll inspect the implementation
Describe what you see — dropdowns instead of swatches? Nothing at all?
We can often configure swatches manually for your specific theme.
Alternative: LinkedOptions App
If you're having persistent issues with variant names and swatch display, the LinkedOptions app can help manage variant option names and their order across products.