Color Swatches are used for displaying product variant swatches below the product thumbnails on the search landing page. On the hover of a swatch, the respective variant image is shown in place of the product thumbnail.
This feature is available as part of Growth and the above plans.
How to enable the Color Swatches?
- By default, Klevu uses the Color as the Option Name in Variants. If you are using a different option name (e.g. shoe_color), please go to the Apps → Klevu Search → Settings page and provide the same option name in the Swatch Option Name field.
- By default, Klevu identifies color variant values (i.e Red, Blue, Green, etc...) and uses the CSS colors to display the respective color swatch for each color identified. In case of a multi-colored product or to display a custom image for a swatch, please follow Step 3 and Step 4 below.
- The color images for swatches should be present in the Online Store/Themes/Assets folder. If a third party app is storing color images in a different location, they will have to be copied into the Online Store/Themes/Assets folder.
Please make sure that you are adding the color images for swatches to the active theme's Online Store/Themes/Assets folder.
- We expect you to follow Shopify’s color image naming convention. Please note, the name of the file should be in all lower case. For example,
- for pink color, the file should be named as pink.jpg
- for dark blue, the file should be named dark-blue.jpg
- Perform the On-demand synchronization. Go to KMC → Catalog Sync → On-demand Sync → Sync Now
- Enable the feature from Klevu Merchant Center
- Login into Klevu Merchant Center with the registered email id and password
- Go to Customizations→ Color Swatches & Image Rollover
- Check the "Enable Color Swatches" box
- Click on the Save button
- You are done. Color Swatches should be visible on the store frontend
