Swatches

Control how product variant options (such as colors or materials) are displayed across product and collection pages. They enhance visual product selection and improve customer browsing experiences.

To use swatches on variants other than color, edit the corresponding labels in your language files.

Swatches type: Choose how variant swatches are displayed:

• Theme: Uses the theme’s custom-designed swatches for a polished look.

• Native: Uses Shopify’s default swatch behavior.

• None: Disables swatches entirely.

Show sale indicator: Adds a red dot below color swatches when a variant is on sale, helping customers identify discounted products at a glance.

Swatch size: Controls the display size of variant swatches to maintain consistent spacing and alignment within product grids.

Swatch style: Select between Circle or Square swatches to match your store’s visual style and product presentation. Learn more: Swatch collection styles

Collection style: Options: Text only, Slider, Slider on hover, Swatch with text, or Grid

Note: Some styles only apply when the mobile layout is set to 2 items per row.

HEX codes and files: Customize swatch appearances for specific variant names using HEX color codes or uploaded image files. Each rule should appear on its own line.

• Accepts both color values and file names.

• Upload image files under Content -> Files

• Learn more for swatches