The Image Swatch UI element displays product options or variations using images instead of text or color swatches. For example, if a product is available in different colors or patterns, each product variant is presented by a small thumbnail image. Customers can click or hover over these images to see a visual representation of the different options available, helping them make a more informed purchasing decision.
To configure Image Swatch:
- Select the current condition of the element from the State dropdown on the right-side Properly Panel:
- Normal: The default state of Image Swatch when it is not being interacted.
- Hover: The state of Image Swatch when the user hovers over it with the mouse cursor.
2. Expand General to indicate the gap between the image options.
3. Make the necessary configuration of principal styling features (see Global Styles).
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.