Setup guide
Get swatches on your product pages in about 5 minutes. Follow these three steps in order.
Video: Activate on your store
Step 1: Turn on the app in your theme
- In Shopify admin, go to Online Store → Themes
- Click Customize on your current theme
- Open App embeds in the left sidebar (some themes put this under Theme settings)
- Find Codexian Color Swatches and switch it on
- Click Save
Step 2: Add swatches to your product page
- In the Theme Editor, go to a Product page
- Click Add block where variants usually appear
- Under Apps, select Codexian Color Swatches
- Drag the block above Add to cart (or wherever you prefer)
- Click Save
If your theme still shows an old variant dropdown, hide that block so customers only see swatches.
Step 3: Choose a style for each option
- Open the app from Apps in Shopify admin
- Go to Product options
- Pick how Color, Size, and other options should look
- Click Save
Not sure which style? Browse the swatch style gallery.
Optional: Make it yours
- Swatch gallery — Set your store’s default swatch style
- Style editor — Change colors, borders, and sizes
Check your storefront
- Open a product that has variants (e.g. Color or Size)
- Confirm swatches appear and look right
- Click a swatch—the main image and price should update
- Add to cart and confirm the correct variant was added
Something wrong?
| What you see | Try this |
|---|---|
| No swatches at all | Complete Step 1 (app turned on in theme) and Step 2 (block added) |
| Wrong variant in cart | In Product options, check option names match your product (e.g. “Color” vs “Colour”) |
| Swatches and a dropdown both show | Hide your theme’s default variant picker in the Theme Editor |
| Changes not visible | Click Save in the app; refresh your product page |
Need more help? Use the chat button on this site or contact support from inside the app.