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

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