Color Swatch
The Color swatch settings allow you to control how color or pattern choices are displayed on product cards and product pages.
Instead of showing the variant name as text, swatches visually represent the color or image of each variant. This helps customers quickly identify and select product styles. You can choose how swatches are displayed, specify which product option(s) they apply to, and configure custom colors or assign variant images where needed.
Option Group
Option
Explanation
Color swatch
Swatch mode: Default / Flat color / Variant's image
Select how swatches should appear. Default uses basic color circles. Flat color uses color codes from your configuration. Variant’s image displays each variant’s assigned product image as the swatch. If a swatch displays text instead of color/image, check that the variant has an image or that its color value is added to Colors configuration.
Option name(s)
Enter the product option name that represents color values (e.g., color, colour, choose color). Multiple names may be added, separated by commas. Color swatches can only be applied to one option per product.
Colors configuration
Define custom colors using a comma-separated list. Each color must be written as colorName:hexCode. Example: black:#000000,white:#FFFFFF,blue:#2196F3. Ensure formatting is precise—typos or missing symbols may prevent swatches from displaying correctly.
Show on thumbnails
Enables or disables swatches on product thumbnails (e.g., on collection pages). When enabled, swatches are shown directly on product listing cards.
IMAGE
Image hover effect: Disable / Zoom in #1 / Zoom in and rotate / Zoom in #2 / Zoom out #1 / Zoom out #2 / Slide / Shine
Controls the visual effect that occurs when the customer hovers over a product image. Choose from various zoom or motion effects, or disable the hover animation entirely.
Image ratio
Sets the aspect ratio of product images (e.g., square, portrait, landscape). This helps maintain visual consistency across listings.
Last updated