Add swatches to your product page

Place the swatch block where shoppers pick a color, size, or other option—usually on the product page, near Add to cart.

info

First turn on the app in your theme, then come back to this page.

Steps

1. Go to Online Store → Themes → Customize
2. Open a Product page (use the page selector at the top if needed)
3. Click Add block in the product area
4. Under Apps, choose Codexian Color Swatches
5. Drag the block to where you want it (above Add to cart works well for most themes)
6. Click Save

Replacing the old dropdown

Many themes show a default variant dropdown. If you want swatches instead:

1. In the Theme Editor, find your theme’s variant picker block
2. Hide or remove it
3. Keep only the Color Swatch block

If both show up, customers may see a dropdown and swatches—that’s confusing, so hide the old picker.

Next step

Choose a swatch style for each option (Color, Size, etc.) in the app.