How to Add Shopify Color Swatches on Collection Page?

In this tutorial, we’ll show you how to add Shopify color swatches on Collection page so your customers can see what options your products offer before they click to view it in details. Furthermore, you can also customize how your swatches look on the Collection view to make them match your store appearance and look more enticing.

A 5-minute guide to show Shopify color swatches on collection page

You’ll only need around 5 minutes to display and customize your color swatches look on the collection view (homepage, collection, categories, etc.). Let’s get started.

Step 1: Set up your product

1. Go to Shopify Admin > Products > Add product.

2. Enter your product title and upload relevant product images.

3. Scroll down to the Variants section.

4. Add an Option name (e.g., Color) and specify Option values (e.g., White, Pink, Beige).

5. Save your product.

Step 2: Set up NS Color Swatch Variant Images

1. Go to the Shopify App Store and search for NS Color Swatch Variant Images.

2. Click Install and then Open the app.

3. Follow the Get started instructions in the app’s onboarding dashboard.

4. Navigate to App Embeds and toggle NS Color Swatch Variant Images to ON.

*This feature is only available for the Growth & Pro plan of NS Color Swatch Variant Images, so make sure to upgrade your plan.

Step 3: Configure product options

1. Go to Option Configuration in the app.

2. In the dropdown menu next to the search bar, select In My Store.

3. Type the name of the product you just created or an existing product in your store.

4. The option name for that product will appear. Toggle the button to display swatches on the collection page.

5. In the dropdown menu, choose a swatch style (e.g., Square Swatch).

*A preview of the selected style will appear next to the description.

Step 4: Customize the swatch design

1. Go to Design Settings and locate the swatch style you selected.

2. Click Customize next to your chosen style (e.g., Square Swatch).

3. You can adjust various settings to customize how your swatches look, such as:

• Swatch size
• Background color
• Border color
• Hover effects
• Tooltip text
• Variant description

4. Enable Show variant description to display a label when hovering over a swatch.

💡 Tip: Use the Preview feature to see real-time changes.

5. Enable tooltip to show a zoomed-in image of the variant when hovered.

6. Once you’ve completed your customizations, click Save to apply changes.
7. Visit your online store and check how the swatches appear on the collection page.

✨ The Growth & Pro plan of NS Color Swatch Variant Images also covers many essential features for most Shopify stores that you can take advantage of:

• Automatic variant image swatches
• Multiple variant images display for a specific variant
• Show separate products as variants with individual URLs for SEO
• Quick view of product details for faster purchase

FAQs

How do I show each color variant as a product on the Shopify collection page?

You can create different product pages for each product variant, then use NS Color Swatch Variant Images > Product group feature to display them as the variants of each other. This way, you can:

• Improve SEO for your products.
• Make it easier for customers to view related product variants without navigating multiple pages.

How to add color swatches on the collection page Shopify for Dawn theme?

Currently, the Dawn theme requires you to use custom code to add color swatches on the collection page. However, you can use a Shopify app like NS Color Swatch Variant Images instead, especially if you’re not a person with a strong technical background.

You can refer back to the beginning of this blog for more detailed instructions, or watch this video guide: