Skip to main content

Adding Swatches to Your Product Page

The app adds swatches to your store through a block you place on your product page in the Theme Editor.

What Is the App Block?​

The app block is the Swatch block you add to your product template. It’s where customers see and click color or image swatches instead of a dropdown.

How to Add It​

  1. Go to Online Store → Themes → Customize
  2. Open a Product page template
  3. Where your product form or variants appear, click Add block
  4. Under Apps, choose Color Swatch x Product Bundle
  5. Drag it to the right spot (usually near “Add to cart”)
  6. Click Save

Where to Place It​

  • Above “Add to cart” — Common choice so customers pick variants before adding to cart
  • Instead of the default picker — Hide your theme’s variant dropdown and use swatches only

Tips​

  • Make sure the app embed is enabled first (see Setup Guide)
  • If swatches and a dropdown both show, hide the theme’s variant picker
  • You can add the block on different product templates (e.g., different themes or pages) if your theme supports it