Product Variant Swatches

Variant swatches allow your customers to select product options (like color or size) visually, instead of using traditional dropdown menus. This improves usability and creates a more modern, intuitive shopping experience.

In the Materia theme, you can enable and control both color swatches and size swatches, including how they appear and when they are triggered.

Color Swatch Settings

Enable Color Swatches

Toggle this setting ON to replace dropdowns with color swatches on your product pages.

When active, variant options that match your defined color keywords (like “Color” or “Colour”) will automatically be displayed as clickable color buttons.

Swatch Display Type

Choose how your product variants are displayed:

  • Use Color Swatches – Shows a solid color or a small thumbnail

  • Use Variant Images – (Optional in future updates) will allow thumbnails of variant images instead of solid colors

Keywords for Color Swatches

This setting detects which variant options should be treated as color-based swatches.

Example input:

plaintextCopyEditColor, Colour, Cor

Any variant name containing one of these keywords will be treated as a color swatch, using either a background color or a predefined image.

You can add multiple keywords separated by commas to support multilingual or custom label variations.

📏 Size Swatch Settings

Keywords for Size Selection

This controls which variant options should be styled as size buttons (e.g., S, M, L, XL), replacing dropdowns with visual tabs.

Example input:

plaintextCopyEditSize, Measure

Any variant name containing one of these keywords will be turned into clickable size tabs, improving user interaction and clarity.

How It Works

  • Keywords act as triggers. You do not need to configure individual swatches manually.

  • Swatches are applied automatically based on variant label matching

  • These work both on product pages and quick view modals (if enabled)

Notes

  • If a product has both color and size variants, both swatch types will work together

  • Colors can be automatically rendered using Shopify’s default swatch logic, or you can assign custom swatch files (e.g., thumbnails) in advanced setups

  • Make sure your product variant names are consistent (e.g., don’t mix “Colour” and “Color” unless both are defined in the keyword field)

PreviousProduct Card SettingsNextSearch Behavior Settings

Last updated