Change swatch styles
Modify the appearance of variants swatches by changing the Shape and Size. You can also change the Media fit for images used as swatches.
Swatch size
Set the swatch Size for specific product templates.
STEPS
In your theme editor (Customize):
Open a Product template with the template selector in the top bar.
Click on the Variant selector block to open the settings.
Set the Swatch size to Small, Medium, or Large.
This option applies only to the current product template.
Click Save.
Change swatch shape
Display all swatches with a rectangular or square shape. Go to Theme settings > Swatches > Swatch shape.
You can adjust the corner radius in Theme settings > Corner rounding > Swatches.
Swatch image fit
If using custom or variant images for swatches, choose to have the images Fill the swatch area or Contain the image to show the full image without cropping.
Go to Theme settings > Product, then set Media fit to Fill or Contain.
Related links Enable swatches Use default color swatches Use custom color swatches Use variant image swatches Upload custom image swatches Show swatches on product cards Enable dynamic option availability
Last updated