Change swatch styles

Variant swatches

Modify the appearance of variants swatches by changing the Shape and Size. You can also change the Media fit for images used as swatches.

Change swatch size

Set the swatch Size for specific product templates.

STEPS

In your theme editor (Customize):

1. Open a Product template with the template selector in the top bar.

2. Click on the Variant selector block to open the settings.

3. Set the Swatch size to Small, Medium, or Large.

   

   This option applies only to the current product template.

4. Click Save.

Change swatch shape

Display all swatches with a rectangular, round, or square shape.

STEPS

In your theme editor (Customize):

1. Click on Theme settings and open the Product tab.

2. Under Swatches, set the Swatch shape to Rectangle, Round, or Square.

   

   This option applies to all swatches across your site.

3. Click Save.

Change 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.

STEPS

In your theme editor (Customize):

1. Click on Theme settings and open the Product tab.

2. Under Swatches, set the Media fit to Fill or Fit.

   This option applies to all swatches across your site.

3. Click Save.

---

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