đ 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.
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 needs 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 Shopify's Files feature, please visit this article.
How to edit the swatch item element
How to access Swatch item settings
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the General settings section > Select Product Item section.
3. Click the Dropdown icon of the Product Item section > Select Product Information section > Select Swatch item 1, Swatch item 2, or Swatch item 3 element in the dropdown menu.
4. Drag and drop the swatch and then start using it.
â
Styling configuration
Show option value when hovering
For example, this appears on 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 elements in the same Product Image.
Click the 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 the Save button to save all changes you have made.
Change product image when interacting with the 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.
Click the 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 the 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 inquiries, please do not hesitate to reach out to our dedicated support team via [email protected].