Color Swatches

Color Swatches showcased in a product cardColor Swatches showcased in a product card

Color Swatches showcased in a product card

#1. The Value of Color Swatches

Color is often a crucial product variation but can easily be overlooked or misinterpreted if not clearly indicated in the product grid. (Source: Baymard Institute).
For many industries, color variations are key factors in a shopper’s product choice. If users are not aware of color options for products, there is a risk that they will not find a suitable item and abandon the site.
Variations indicated by text are often overlooked when scanning the website, while the visual representation of the available colors offers the shoppers sufficient information and inspiration.

#2. Color Swatches Components

Icons

  • The icons will indicate the different available variants
  • The swatches should be large and well-spaced to ensure smooth interaction.

Preview color option

  • When clicking on the color icons the shopper will preview the relevant image without needing to visit the product page.

Additional variants

  • When all color swatches don’t fit on one line within list items, the number of other colors available is clearly shown (e.g., “+8”), giving users a good idea of the extent of the variations available.
Color Swatch showcasing available variants. Shifting variant on click.Color Swatch showcasing available variants. Shifting variant on click.

Color Swatch showcasing available variants. Shifting variant on click.

#3. Implications for Mobile

When space becomes limited, which is often the case on mobile sites it’s crucial to keep the icons large and prominent.
On mobile devices, it’s often the case that even fewer swatches can be shown compared to desktop. Therefore, it’s critical to indicate the number of colors available so that the shoppers don’t get the impression that the color range is small.

#4. Requirements

👍

Merchant Dashboard Settings

For this module to work, you will have to update a few settings in your Dashboard.

Color Mapping

This module uses Color Mapping. You can find the settings within your dashboard under Settings > Primary Setup > Color Mapping. (It's the same as for the filters that display color icons rather than text.)

Filter Settings

The Front-End is going to need some fields to be returned in the API response. Namely, the following fields are required:

  • color
  • id
  • product_url
  • image_url

In order to set this up, you can find a guide below that will walk you through what needs to be adjusted for every field listed above.

📘

The filter doesn't have to be active as in the image shown below in order to be included in the API response that you are going to need.

Simply click on the pencil/edit icon to see further options ...

... and then you can return the colors in the API response by toggling on:

  • Return in search response
  • Return in response per each variant

Optionally you can enable return in autocomplete response if you plan on showing the color swatches in your autocomplete as well.

Last, but not least, you will have to sync the products. You can find the settings for this within your dashboard under Settings > Product Sync.

Now you're ready to adjust some code!

#5. Time Estimates

Set up in Platform: n/a
Integration: 0.5 hour
Styling: 0-2 hours (optional)

#6. Functional Overview

To apply the color swatches module, we need to adjust a component in the code. We have prepared some snippets that we will link below in the Integration Steps. To give you an overview, these are the components we are going to work with:

  • components/Cards/Product/view.tsx
  • styles

#7. Integration Steps

  1. Create a new component called ColorSwatches
  2. In order to successfully import the Color Swatches into your product card component, here are a few steps to follow:
  1. Add styling. The style shown in this example can be applied directly, or customized freely to fulfill desired brand tonality.

📘

GitHub Code Access

The complete module can be found here.

#8. Modifications

Show/Hide Tooltip: Breakpoint

This module is hiding the label showing the name of the color on hover for mobile screens. By default, that would be around the screen size of 767px in our system.
The CSS snippet for this can be found here and can be easily adjusted by altering the max-width.

#9. MJS Version

This module has been optimized for MJS version 6.16.10