Did you know that displaying color variant buttons can significantly enhance the shopping experience on your Shopify store? 

Many online stores overlook this detail, but in reality, providing clear and user-friendly color buttons helps customers easily find their preferred product and increases conversion rates. 

This article will provide a step-by-step guide on how to add color variant buttons to your Shopify store, from displaying them on product pages to customizing their design to match your store’s look.

Step 1: Set Up Color Variant Buttons with NS Color Swatch Variant Images

Before you can display your color swatches, you need to install the NS Color Swatch Variant Images app.

How to Add Color Variant Buttons in Shopify

Did you know that displaying color variant buttons can significantly enhance the shopping experience on your Shopify store? 

Many online stores overlook this detail, but in reality, providing clear and user-friendly color buttons helps customers easily find their preferred product and increases conversion rates. 

This article will provide a step-by-step guide on how to add color variant buttons to your Shopify store, from displaying them on product pages to customizing their design to match your store’s look.

Step 1: Set Up Color Variant Buttons with NS Color Swatch Variant Images

Before you can display your color swatches, you need to install the NS Color Swatch Variant Images app.

Follow these simple steps to get started:

1. Visit 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, and you’ll be redirected to Shopify’s theme editor. Simply toggle ON the switch next to NS Color Swatch Variant Images and save your changes.

Step 2: Display Color Variant Buttons on Product and Collection Pages

Once the app is installed, it’s time to decide where to display your color variant buttons on your product and collection pages. Here’s how:

1. On the app’s instructions page, click Choose Swatch Style or navigate to Option Configuration in the left-hand menu.

📝 The app will automatically sync the latest 100 products with options. 

If you don’t see a product, click Add Product Options to bring it in manually.

2. A list of your products will appear. Select the ones you want to display swatches for and hit Done. 

You can select multiple products at once.

3. Next, toggle ON the Display Style on Product Page for the options you want to turn into swatches.

For example, I’m adding color swatches to a product in my florist store called “Tulips”. So I’ll toggle on the display for my Tulips color option.

4. If you want your color variant buttons to appear on collection pages, simply toggle the corresponding option. 

Please note that this feature requires an upgrade to the premium plan.

5. Now it’s time to choose the shape and style for your swatches.

Below the toggle, you’ll see a dropdown menu with shape options, such as squares, circles, and pills, along with a preview image that shows how each one looks.

For this guide, we’ll choose Circular Swatches for a clean and rounded look.

6. Next, choose how you want to display the swatches. You can either use your existing Shopify variant images or choose Color/Custom images. If you go for custom images, use the color picker, enter a HEX code, or upload images directly from your computer.

7. If you choose Option 2, click Edit Swatch to customize the look.

8. In the pop-up window, assign a color or upload an image for each variant. Just make sure each swatch matches the correct variant name.

9. Once you’ve customized everything, click Done and then 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 Variant Buttons Design

To make sure your color variant buttons align with your store’s design, you can adjust various visual elements: 

1. In the app’s sidebar, go to Design Settings and find the swatch style you selected earlier and click Customize.

2. You’ll find 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 the selected swatch’s border color and thickness.

• Unselected Swatch: Define how unselected swatches will appear.

• Hover Swatch: Add effects like variant names, shadows, or zoom on hover.

💡 As you customize, check the Preview to see how your color variant buttons look in real-time..

3. Once you’re happy with the design, hit Save to apply your changes.

Now let’s check the new look of your variants in your store!

Here’s a helpful video that walks you through the process of adding color swatches to both your product and collection pages on Shopify. 

Watch “Shopify Color Swatches on Product Page & Collection Page [2025 Newest Method]” for a step-by-step guide to enhance your store’s design and improve the customer shopping experience.

FAQs

1. What causes color swatches not to appear or to be unclickable?

There could be several reasons why color swatches aren’t appearing or are unclickable on your Shopify store:

1. Theme Compatibility Issues: Not all Shopify themes support color swatches out of the box. You may need to ensure that your theme is compatible with the swatch functionality.
2. Incorrect Variant Setup: If the variants for color options are not properly configured or linked to the images in your product settings, the swatches may not appear.
3. App Conflicts: Sometimes, other apps installed on your store may conflict with the color swatch functionality. Disabling or uninstalling conflicting apps might resolve the issue.
4. Outdated Theme or App: Make sure both your theme and the color swatch app are up to date to prevent issues due to compatibility with the latest Shopify updates.

2. Can I change only the variant buttons’ colors without affecting other buttons in the store?

Yes, you can change the color of only the variant buttons without affecting other buttons in your store by using NS Color Swatch Variant Images. 

The app provides a feature that allows you to specifically target and customize the variant buttons for different product options, such as color or size, independently from the rest of the buttons in your store.