Enabling Color Swatches in Shopify

Color Swatches are used for displaying product variant swatches below the product thumbnails on the search landing page. On 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 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.color-swatches-option-name
  2. By default, Klevu identifies color variant values (i.e Red, Blue, Green etc…) and uses the CSS colors to displays 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 the 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                               swatch-asset-folder
  4. We expect you to follow the Shopify’s color image naming convention. Please, see the examples below
    • for pink color, the file should be named as pink.jpg
    • for dark blue, the file should be named as dark-blue.jpg
  5. Perform the On-demand synchronization. Go to Apps → Klevu Search  Catalog Sync → On-demand Sync → Sync Now
  6. Enable the feature from Klevu Merchant Center
    • Go to  Apps → Klevu Search
    • Go to Customizations→ Color Swatches & Image Rollover
    • Check the “Enable Color Swatches” box color-swatches-kmc
    • Click on the Save button
  7. You are done. Color Swatches should be visible on store frontend                                                                    color-swatches