Swatches

Overview

A customizable product variant swatches block that displays color and other option swatches for products. The block intelligently detects color-type options (supporting multiple languages) and displays either custom uploaded swatch images or automatic Shopify swatches. It supports both Shopify's native swatch system and fallback asset-based swatch images for enhanced customization.

Common use cases

Display color swatches for products with color variants
Show variant option swatches for product selection
Use custom uploaded swatch images for brand-specific colors
Configure swatch limits to control how many swatches are displayed
Enable tooltips to show swatch names on hover
Set appropriate swatch sizes based on context (smaller for cards, larger for product pages)

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals show tooltip, and visibility	Checkbox (default: false)

Content

Setting	Description	Options
Product	Select the product to display swatches for	Product picker
Size	Size of the swatch circles	8 - 44 px (default: 16)
Limit	Maximum number of swatches to display	1 - 20 (default: 6)
Radius	Border radius for swatch circles	• None • Default • Sm • Md • Lg • Xl • 2xl • Full (default)
Show tooltip	Displays swatch name in a tooltip on hover	Checkbox (default: true) Visible when Show advanced settings is on

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the swatches	Checkbox (default: false)
Enable top padding	Adds top padding around the swatches	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the swatches	Checkbox (default: false)

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment of the swatches	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on

Choose which options show as swatches

In Swatches or Options, enter comma-separated names in Swatch options to show additional options as swatches, such as Material, Scent. Slab also detects native Shopify swatches and recognizes color option names automatically. Swatches displays the first matching option in product option order. Options can display multiple swatch options.

Use Swatch metafield to provide fallback images or colors for swatch options from a product metafield that references metaobjects. Enter the metafield's namespace and key, such as custom.scents.