Skip to main content

Setup Guide

Complete these 3 steps to show swatches on your product pages. Takes about 5 minutes.

Step 1: Enable the App in Your Theme​

Before swatches can appear, the app must be turned on in your theme.

  1. In Shopify admin, go to Online Store → Themes
  2. Click Customize on your current theme
  3. In the left sidebar, find App embeds (or Theme settings)
  4. Find Color Swatch x Product Bundle and switch it on
  5. Click Save
tip

If you don’t see App embeds, look under Theme settings. Some themes list app embeds there.

Step 2: Add Swatches to Your Product Page​

Now add the swatch block where you want customers to see it.

  1. In the Theme Editor, go to a Product page template
  2. In the area where variants appear (e.g., near “Add to cart”), click Add block
  3. Under Apps, select Color Swatch x Product Bundle
  4. Place the block where you want swatches (usually above or instead of the default variant picker)
  5. Click Save
tip

If you’re replacing the default variant dropdown, you may want to hide it. Look for the variant picker block in your theme and hide it, or check your theme’s settings.

Step 3: Choose Swatch Styles for Each Option​

Tell the app how to display each product option (Color, Size, etc.).

  1. Open Color Swatch x Product Bundle from Apps in your Shopify admin
  2. Go to Product Options Settings
  3. For each product (or use defaults), pick a swatch style:
    • Color → Rounded Swatch, Square Swatch, or Image Swatch
    • Size → Dropdown, Pill Button, or Rectangle Button
    • Style (or other options) → Any style that fits
  4. Click Save

Optional: Customize How Swatches Look​

  • Go to Appearance to pick the default style
  • Go to Customize Styles to change colors, borders, sizes, and hover effects

Check That It Works​

  1. Visit a product page with variants (Color, Size, etc.)
  2. Confirm swatches show instead of (or alongside) dropdowns
  3. Click swatches and ensure the image and price update
  4. Add to cart and confirm the correct variant is selected

Troubleshooting​

ProblemWhat to try
Swatches don’t showEnsure App embed is enabled (Step 1) and the block is added (Step 2)
Wrong variant selectedCheck that option names match (e.g., “Color” vs “Colour”) in Product Options Settings
Changes not showingSave your changes in the app; updates appear right away
Swatches and dropdown both showHide the theme’s default variant picker if you’re replacing it with swatches