How to show option swatches in Search Results Widget on Shopify

You can show option swatches of product variants in product cards in the Search Results Widget. The option swatches are displayed as:

  • Color swatches or variant images for color options
    Important info

    To show colors as color swatches or variant images, all colors have to be assigned to a Color Family. If a color value is not assigned to any Color Family, a drop-down list with color text values will be displayed instead.

  • Size swatches for size options – text in frames
  • A drop-down list for other options

How to show option swatches in Search Results Widget on Shopify

How to show option swatches in Search Results Widget on Shopify

To show option swatches, follow these steps:

  1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Content tab.
  2. Set the Display option swatches toggle to ON.
  3. Select whether color swatches or variant images to show.
  4. Apply the changes.

How to show option swatches in Search Results Widget on Shopify

That’s it. The option swatches are now displayed in the Search Results Widget on the storefront.

Note

If the Show relevant product variant option is enabled in the Search & Navigation > Preferences section > Products tab, product variants relevant to the search query will be pre-selected. Otherwise, product variants will be pre-selected according to the Display price format setting in the Search & Navigation > Preferences section > Products tab.

Please pay attention, if you have changed the default names of the Color and Size product options in Shopify or you want to add other options as colors or sizes, you need to specify their names in the app. To do so, follow these steps:

  1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Preferences section > Products tab.
  2. Enter new names into the Color option names/Size option names fields. 

    How to show option swatches in Search Results Widget on Shopify

  3. Apply the changes.
Updated on November 9, 2023

Was this article helpful?

Related Articles

Back to top