Shopify Development 
Bundled products are a proven way to boost average order value while offering shoppers more variety in a single purchase.
However, if your bundles include items in multiple colors, sizes, or styles, plain text options can feel unclear and uninspiring. Customers want a visual preview of what they’re choosing, and color swatches deliver exactly that.
In this guide, you’ll learn how to add color swatches to bundled products on both product and collection pages. We’ll cover setup, display options, and customization tips so your swatches blend seamlessly with your store’s design and all without touching a line of code.
Step 1: Set Up NS Color Swatch Variant Images
Before you can display color swatches, install the NS Color Swatch Variant Images app by following these steps:
1. Go to the Shopify App Store, search for NS Color Swatch Variant Images, and click Install.
2. After installation, open the app from your Shopify admin panel and follow the quick Get Started guide.
3. Click Embed App to open Shopify’s theme editor, toggle ON the NS Color Swatch Variant Images switch, and save your changes.
Step 2: Add color swatches to bundled products
Once the app is ready, you can add swatches to your bundled products on product and collection pages.
1. On the app’s instructions page, go to Choose Swatch Style or navigate to Option Configuration in the left-hand menu.
📝 The app automatically syncs the latest 100 products with options. If a product doesn’t appear, click Add Product Options to add it manually.
2. Select the products you want to display swatches for, then click Done. You can select multiple products at once.
3. Next, toggle ON Display Style on Product Page for the option you want to convert into swatches (e.g., “Color”).
Below the toggle, choose a swatch shape from the dropdown menu and preview the look.
4. To show swatches on collection pages, toggle ON the corresponding option and select a shape. (Requires premium plan upgrade.)
5. Choose how to display the swatches:
- Option 1: Use your existing Shopify variant images.
- Option 2: Use colors or custom images (via color picker, HEX code, or image upload).
7. If using Option 2, click Edit Swatch to assign a color or upload an image for each variant, ensuring it matches the correct variant name.
9. Once done, click Save to apply the changes.
Your swatches are now showing up in your store. But let’s go a step further and style them to match your store’s vibe.
Step 3: Customize your color swatches design
To make sure your color swatches align with your store’s design, you can adjust various visual elements:
1. In the app’s sidebar, go to Design Settings, find your chosen swatch style, and click Customize.
2. You’ll see five design sections:
- General Settings: Adjust swatch size, spacing, and border thickness
- Image Settings: Set hover effects like zoom-in/out or image positioning.
- Selected Swatch: Customize border color and thickness for the selected swatch.
- Unselected Swatch: Define the appearance of inactive swatches.
- Hover Swatch: Add effects like variant names, shadows, or zoom on hover.
3. Use the Preview to see real-time changes, then click Save once you’re satisfied. Your bundled products now feature customized, store-matching color swatches, ready to enhance the shopping experience!
For a more detailed walkthrough, take a look at this video:
FAQs
1. What are typical problems when trying to use variant image swatches with bundles?
When working with bundled products, variant image swatches can sometimes cause:
- Image mismatch: The wrong product image appears when a swatch is selected.
- Theme compatibility issues: Certain Shopify themes don’t fully support swatch display for bundles.
- Slow loading: Bundles with multiple items and high-resolution images can delay page load times.
- Limited customization: Default theme swatches may not allow shape, size, or hover effect adjustments.
Most of these issues can be avoided by using a swatch setup that supports bundles, works across all themes, and allows custom styling for a seamless shopping experience.
2. Can color swatches in bundles link to individual product pages?
Yes. You can configure your store so that when customers click on a swatch in a bundled product, they are taken directly to the corresponding individual product page.
This is especially useful if you want shoppers to view more details, read reviews, or explore upsell options for each item in the bundle.
With NS Color Swatch Variant Images, you can easily enable this feature by setting swatches to link directly to their original product pages, no coding required. This creates smoother navigation, increases product discoverability, and enhances the overall shopping experience.
