How to customize Swatch item element

📖 In this article, we are going to learn more about the Swatch item element which you can add in the Product Image’s sections and how to use it to optimize your theme’s layout and make it look the way you’d like it to.

⚠ This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.

On this page

About Swatch item

Swatches are a feature that allows customers to choose between different product options, such as color or size, right on the search results page.

How does ‘Swatch by Color & Image’ work?

After you have set up your product’s variants within Shopify Admin:

Upon reading the variant names you have specified (in this example, “Black”, “White” and “Sky blue”), the theme will look for either an HTML color name or a .png image file in Contents > Files with a filename-friendly version of the variant name.

Naming your swatch files

  • For Color Swatches, based on the example case above, this is how you name your swatches to make them work properly with our visual editor later:
    • Black swatches should be named black.png
    • Sky blue swatches should need to be named sky-blue.png
    • White swatches should be named white.png

To sum up, we have this formula: colorname.png

⚠ Please make sure that all is lowercase, no special characters

  • For Size Swatches, the same rules apply, for example, a Size S swatch need to be named size-s.png.

⚠ .jpg files will not be shown, you must use .png

How does the swatch look?

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

  • Go to your Shopify store’s Admin > From the home Dashboard > select Content > Files:

  • You will see the list of uploaded files on the right main screen. To learn more about this Shopify's Files feature, please visit this article.

How to edit swatch item element

How to access Swatch item settings

  1. From the app's admin, go to Integration menu > select Shopify Integration > 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.

Styling configuration

Show option value when hovering

For example, this appears at the swatch when hovered:

Swatch Type

Decide which variant option you’d like to display for your Shopify product’s swatches.

💡 The available options will be based on how you set up your product’s variants from Shopify Admin.

⚠ Once an option is selected, you will not be able to use it again for other Swatch item element in the same Product Image.

  • Click Save button to save all changes you have made.

Swatch by

Decide how you’d like to display your variant option’s swatches. 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

When you have more than 4 swatches to be displayed on the Product Image, decide how the button to show more will display. For example, it's the +10 button:

There are 2 options:

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

  • Click Save button to save all changes you have made.

Change product image when interacting with swatch icon

This setting will decide what kind of interaction with the Swatches your Product Image will react to based on its settings. There are 3 options:

  • None: nothing will happen.
  • Hover: when the swatches are hovered.
  • Click: when the swatches are clicked at.

  • Click Save button to save all changes you have made.

Swatch shape

Decide how you’d like to display your Swatch icons. There are two options:

  • Square
  • Circle

Click Save button to save all changes you have made.


You can check more information about the STYLING tab here.

Tutorial video

Watch our tutorial video to learn how to customize the Swatch item element:


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