Building Superb User Experience with Color Swatches on Shopify & BigCommerce

To be completely accurate, color swatches are a type of option swatches. But what are swatches in general?

Swatches are a feature that allows customers to choose between different product options, such as color or size, right on the search results page.

Website swatches help to create a smoother customer journey, as users can choose different product options on the same page without going back to the catalog and then again to product pages – or having to reload the website. Also, swatches provide great visual information, giving customers a hint about available colors.

In addition, product color swatches increase conversion rate by reducing the number of clicks for customers to find the product they want. The shorter and easier a customer's path to the desired product is, the more likely they will convert.

Currently, website color swatches powered by Searchanise are available for Shopify and BigCommerce merchants.

Before diving into the best practices and practical hacks, let's quickly draw a line between two swatches' use cases.

First, you can display swatches on product cards on the search results page, like at the screenshot below. To do so, add color families and then follow the setup steps.

Second, you can empower customers to filter products by color and size swatches. Here's how to enable it.

The swatches described above are interactive ones. Interactive swatches allow comparing different colors directly from the product list without visiting the product page.

Non-interactive swatches require customers to visit the product page, thus reducing the UX benefits of the swatches. So, consider adding interactive swatches for the best user experience, especially if you sell visually-driven products, such as clothes, shoes, beauty products, furniture, or decor.

Pay attention to the size and spacing of color swatches to create a satisfying user experience. If the hit area is too small, it will be hard for mobile users to interact with them. To give you a reference, Baymard suggests that the minimum hit area should be at least 7mm x 7mm, and the minimum spacing between the swatches is 2 mm. You can even run a brief usability test: ask people to tap certain swatches on a mobile device to see if they have difficulties.

Pay attention to the size and spacing of color swatches to create a satisfying user experience. If the hit area is too small, it will be hard for mobile users to interact with them. To give you a reference, Baymard suggests that the minimum hit area should be at least 7mm x 7mm, and the minimum spacing between the swatches is 2 mm. You can even run a brief usability test: ask people to tap certain swatches on a mobile device to see if they have difficulties.

In the second gif, the pose of the model remains the same. Even though the color change is still visible, it is less pronounced than in the first example.

Consider displaying actual product images in swatches so that your customers can instantly grasp the available product variants:

Follow these instructions to show product previews in swatches. Please note that this feature is currently available only for Shopify users.

If you have products with different shades of color, for instance, blue, navy, and light blue, you may choose to unite them under one color swatch. In this case, when a user clicks blue swatch in product filters, they will see all products that are a similar color. To do so, set up color families.

If you want to display shades of colors as separate swatches, you can do that too:

In this case, customers will be able to see all the available colors, even though they are similar, like in the example above.

Another great hack is to display patterns (dotted, striped, snakeskin) or complex shades of color (gold, silver, chrome) in swatches. This will allow customers to get a better idea of the color variants the products have.

You can set it up in the Color Families tab in the app control panel by following these steps. Please note that this feature is currently available only for Shopify users.

Last but not least – try to avoid truncation. Truncation is the shortening of the swatches list when only a few available colors are shown, like in the picture below. It negatively affects the UX benefits of swatches, as customers have to visit the product page to view all the available colors.

If you want to avoid truncation, but the product has many options, you may end up with an excessively tall swatches list. However, you can solve this issue by using horizontal scrolling. It clearly indicates that more color options are available and allows customers to scroll through them without visiting the product page. See how smoothly horizontal scrolling works for Estee Lauder lipstick with 46 shades.

Let's now wrap up the most important points of the article:

• If you sell products that have different options, consider listing them as one product with swatches
  
• The key benefit of integrating swatches is an enhanced user experience
  
• To create the best possible UX, make sure that swatches are interactive, large, well-spaced, and change clearly
  
• Consider displaying product images in swatches
  
• And decide what makes more sense in your store: unite shades on color under one swatch or display them under separate swatches
  

If you want to integrate swatches to your Shopify or BigCommerce-based e-commerce website, install Searchanise. Apart from swatches, Searchanise provides instant site search, customizable product filters, powerful merchandising tools to increase sales, and in-depth analytics on the use of site search.