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.
- 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.
- 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.
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.
Merchant Dashboard Settings
For this module to work, you will have to update a few settings in your Dashboard.
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.)
The Front-End is going to need some fields to be returned in the API response. Namely, the following fields are required:
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!
Set up in Platform: n/a
Integration: 0.5 hour
Styling: 0-2 hours (optional)
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:
- Create a new component called ColorSwatches
- In order to successfully import the Color Swatches into your product card component, here are a few steps to follow:
- import all required items
- create an enhancer and don't forget to add it here as well
- make sure to pass down these props
- adjust the product card's URL to update the product URL to use the selected variant's URL
- adjust the Image component to update the image accordingly to the selected color variant
- add the imported ColorSwatches and make sure it includes all required props
- 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.
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.
This module has been optimized for MJS version 6.16.10
Updated about a month ago