Customizing Swatch item element

📖 This article will help you learn how to use the Swatch element in Boost AI Search & Discovery's Visual Design Editor.

On this page

Access the swatch item element

âš  This feature only works with Boost AI Search & Discovery V3. To find out which version of our app you are using, please follow this article.

  1. From the app's admin, go to Theme > Find [Target Theme] > Select Edit Visual Design.

  1. Under the General settings section > Select Product Item section.
  2. Click the Dropdown icon of Product Item section > Select Product Information section > Select Swatch item 1, Swatch item 2, or Swatch item 3 element in the dropdown menu.
  3. Drag and drop the swatch and then start using it.

Swatch element configuration

General configuration

  • Show option value when hovering: Tick/Untick to Show swatch name when hovering.

Swatch type: Show option of variant of your Shopify product

  • Note: You cannot choose repeating options, meaning you cannot select options that have already been chosen in other swatch items.

Swatch by, there are 4 options:

  • Color: Applied for products having the basic color (Blue, Green, Black, etc.)
  • Image: Applied for products having special colors (Gradient Abyss, Gradient Citrus, Cotton Candy, etc.)
  • Variant image: Apply the image you set for variants in the Shopify store admin
  • Text: Display all values of the product option (we recommend using it for product size).

Button style, there are 2 options:

  • +{{count}}
  • +{{count}} more

Change product image when interacting with swatch icon: there are 3 options:

  • None
  • Hover
  • Click

Swatch shape: there are 2 options:

  • Square
  • Circle

Click Save button to save all changes you have made.

How does ‘Swatch by Color & Image’ work?

The theme will then look at the variant names you've used (in this case â€™Black’ and â€™Light sky blue’) and look for either an HTML color name with the exact same name or a .png image file in Settings > Files with a filename-friendly version of your variant name.

Naming your swatch files

Black swatches would need to be named black.png (capitals become lowercase).

Sky blue swatches would need to be named sky-blue.png (capitals become lowercase, spaces and other special characters become hyphens).

âš .jpg file is not supported, you must use .png.

How does it look?

Where is the 'Files' option in the Shopify admin?

Go to your Shopify admin, on Shopify Admin Dashboard > Content > Files.

For further details about updating and managing your files on Shopify, please visit this article.


Should you have any questions or enquiries, please do not hesitate to reach out to our dedicated support team via support@boostcommerce.net.