Product 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

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)

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