Open navigation

Color Swatches

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?

  1. 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.
  2. 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.
  3. 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


  4. 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
  5. Perform the On-demand synchronization. Go to KMC  Catalog Sync → On-demand Sync → Sync Now
  6. 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
  7. You are done. Color Swatches should be visible on the store frontend                                                                    

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.