Shopify color swatches not working? 8 fixes
Your Shopify color swatches are not working. They are missing from the product page, showing the wrong color, or not responding when a customer clicks on them. You installed a swatch app, configured your products, and now nothing renders.
This is one of the most common support requests we get. The good news is that swatches not working almost always comes down to one of 8 causes, and most of them take under 5 minutes to fix.
In this post
- 1. App embed not enabled
- 2. Wrong theme detected
- 3. Swatch data missing
- 4. Product not configured
- 5. Theme CSS conflict
- 6. Multiple swatch apps conflicting
- 7. Page builder not detected
- 8. Cache issue
- How to use Rubik’s debug mode
- Still not working?
- Frequently asked questions
1. App embed not enabled
This is the most common cause. You installed the app, configured your products, but forgot to enable the app embed in the theme editor. Without the embed turned on, Rubik’s swatch code never loads on the storefront.
How to fix: Go to Online Store > Themes > Customize. Click “App embeds” in the left sidebar (the puzzle piece icon). Toggle Rubik Variant Images to ON and click Save. Refresh your product page. Swatches should appear immediately. If you have multiple themes, enable the embed on each one separately.
2. Wrong theme detected
Rubik uses a theme_id to load the correct rendering code. If the theme_id in the app does not match your active published theme, swatches will not render. This happens when you duplicate a theme, switch themes, or install a new version.
How to fix: Add ?debug=true to any product page URL. The debug panel shows which theme_id the app detected vs. which one it expected. If they do not match, open the Rubik app, go to Settings, and update the theme selection to match your current active theme. The published theme is the one in Online Store > Themes with the green “Current theme” badge.
3. Swatch data missing
Swatches render based on data in Shopify metaobjects. Each swatch needs a hex color code or an image. If the data is empty, the app has nothing to render.
How to check: Open the Rubik app swatch settings. Look at the option values (Red, Blue, Black, etc.). If any value is missing a hex code or image, that swatch will not display.
How to fix: Assign a hex code or upload a swatch image for each option value. For solid colors, use a hex code like #FF0000 for Red. For patterns or multi-color options, upload a small square image. For more on setup, read how to add color swatches on Shopify.
4. Product not configured
You set up swatch data globally, but you did not assign images to variants for this specific product. The swatches might appear, but clicking them does nothing because there are no variant-image mappings.
How to check: Open the product in the Rubik app. If the variant-image assignment panel is empty, the product has not been configured.
How to fix: Assign images to each variant in the Rubik app. Drag and drop photos to the correct variant groups. For large catalogs, use the AI auto-assign feature to match images to variants automatically. Once saved, swatches will respond to clicks and the gallery will update.
5. Theme CSS conflict
Rubik renders swatches inside a Shadow DOM, which isolates its CSS from your theme. This makes CSS conflicts rare. But custom CSS added to the theme, aggressive CSS resets, or styles injected by other apps can occasionally interfere with swatch positioning or visibility.
How to fix: Right-click the area where swatches should appear and choose Inspect. Look for the Rubik shadow root element. If it is present but hidden (display: none or opacity: 0), something outside the Shadow DOM is overriding its container. Check your theme’s custom CSS for rules targeting variant selectors or swatch containers. Remove or scope those rules. For more, see our swatch CSS customization guide.
6. Multiple swatch apps conflicting
Two swatch apps on the same product page will always conflict. Both try to inject swatches into the same element, and the result is double swatches, broken layouts, or nothing rendering at all.
How to check: Go to Apps in your Shopify admin. Count how many variant image or swatch apps you have installed. Common culprits include Variant Image Wizard, CSA Color Swatches, and theme-built-in swatch features.
How to fix: Pick one swatch app and disable or uninstall the others. If your theme has a built-in swatch feature, disable it in the theme settings before using Rubik. You cannot run two swatch renderers on the same page. For help choosing, read about mixed swatch types per option.
7. Page builder not detected
If your product pages are built with EComposer, GemPages, or PageFly, the default theme detection will not work. Page builders replace the standard product template with their own markup, and Rubik needs to know which one you are using.
How to check: Add ?debug=true to the URL to see what Rubik detected. You can also view the page source. If you see EComposer, GemPages, or PageFly markup instead of your theme’s standard product section, you are on a page builder template.
How to fix: Open the Rubik app settings and select the correct page builder as your theme type. Save and refresh the product page. The app will use the correct selectors to find the gallery and variant options within the page builder’s DOM. For a full walkthrough, read our EComposer variant images guide.
8. Cache issue
Shopify’s CDN caches storefront assets aggressively. If you just changed settings or updated the app, the browser or CDN might still serve the old version.
How to check: Open the product page in an incognito window. If swatches work in incognito but not in your regular browser, it is a cache issue. If they do not work in incognito either, add ?run_rubik=true to force the app to load fresh.
How to fix: Hard refresh the page. On Mac: Cmd + Shift + R. On Windows: Ctrl + F5. Clear your browser cache if that does not help. For CDN cache, wait 5 to 10 minutes after making changes and test again.
How to use Rubik’s debug mode
Rubik includes built-in debug tools that help you pinpoint exactly what is going wrong. Add these parameters to any product page URL to activate them:
?debug=true– Shows a debug panel with theme detection info, app version, metafield data, and error logs. This is the first thing to try when swatches are not working.?swatch_debug=true– Shows swatch-specific debug info, including which option values were found, what swatch data exists for each one, and whether the swatch container was injected into the DOM.?run_rubik=true– Forces the app to run, bypassing any cache or conditional loading logic. Useful for testing after changes.?stop_rubik=true– Prevents the app from running. Useful for isolating whether Rubik is causing a layout issue or another app is responsible.
You can combine parameters. For example: yourstore.myshopify.com/products/example?debug=true&swatch_debug=true. Debug panels are only visible to you, not to customers.
Still not working?
If none of the 8 fixes solved the problem, reach out to support. Check the knowledge base for step-by-step articles, browse the full documentation, or open a live chat from the Rubik app in your Shopify admin. Include the debug output from ?debug=true and ?swatch_debug=true when you contact support.
Watch the setup walkthrough
Frequently asked questions
Why are my Shopify color swatches not working?
The most common reason is that the app embed is not enabled in the theme editor. Other causes include a theme_id mismatch, missing swatch data, CSS conflicts from other apps, or browser cache. Go through the 8 fixes above to identify your specific issue.
Why are my Shopify swatches showing the wrong color?
The hex code assigned to an option value does not match the actual product color. Open the swatch settings in Rubik and verify each value. If “Navy” shows as bright blue, the hex might be #0000FF instead of #000080. Update the hex code and save. For more, read how to fix swatch color accuracy.
Why are my Shopify swatches visible but not clickable?
Another app or theme script is likely intercepting the click event. This is common when two swatch apps are installed. Disable other swatch or variant option apps and test again. Add ?stop_rubik=true to the URL to confirm the issue is not on Rubik’s side.
Do color swatch apps slow down Shopify stores?
It depends on the app. Some swatch apps make external API calls on every page load, adding latency. Rubik stores all swatch data in Shopify metafields, which load natively with the page. No external requests, no render delay. For a deeper look, read how swatch apps affect store speed.
Related reading
