Variant picker

Settings

Setting	ID	Type	Default	Description
Block class	class	text	mb-2
Select the first available variant	select_first_variant	checkbox	true
Show for a single variant	show_single	checkbox	false
Dynamic availability	dynamic_availability	select	show	When an option is selected, options below it will be updated to show their availability
Variant style	selector_style	select	button
Size	swatch_size	range	120
Width	swatch_width	select	auto
Shape	swatch_radius	select	rounded-circle
Background	swatch_bg	color_background	#ffffff
Border color	swatch_border	color	#D1D5DB
Text color	swatch_text	select	base-text
Custom color	swatch_text_custom	color_background
Background - selected	swatch_bg_selected	color_background	#ffffff
Border color - selected	swatch_border_selected	color	#D63939
Text color - selected	swatch_text_selected	select	base-text
Custom color	swatch_text_selected_custom	color_background
Size	button_size	range	120
Width	button_width	select	auto
Shape	button_radius	select	rounded-md
Background	button_bg	color_background	#ffffff
Border color	button_border	color	#D1D5DB
Text color	button_text	select	base-text
Custom color	button_text_custom	color_background
Background - selected	button_bg_selected	color_background	#ffffff
Border color - selected	button_border_selected	color	#D63939
Text color - selected	button_text_selected	select	base-text
Custom color	button_text_selected_custom	color_background
Show radio	enable_option_radio	checkbox	false	When variant style is buttons
Show swatches label text	swatches_label	checkbox	false
Update url when variant selected	update_url	checkbox	false
Enable size guide	enable_size_chart	checkbox	false
Link label	size_chart_label	text	Size guide
Variant option name	size_chart_variant	text	Size	This is usually 'Size'
Page containing size guide	size_chart_page	page
Style	size_chart_style	select	link
Color schema	size_chart_color	select	secondary
Custom color	size_chart_color_custom	color	#111827

Option values

• Dynamic availability (dynamic_availability): Off (off), Show (show), Hide (hide)
• Variant style (selector_style): Buttons (button), Dropdown (dropdown)
• Width (swatch_width): Auto (auto), Half (50%), Full (100%)
• Shape (swatch_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud)
• Text color (swatch_text): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom)
• Text color - selected (swatch_text_selected): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom)
• Width (button_width): Auto (auto), Half (50%), Full (100%)
• Shape (button_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud)
• Text color (button_text): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom)
• Text color - selected (button_text_selected): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom)
• Style (size_chart_style): Button (btn), Outline (btn-outline), Link (link)
• Color schema (size_chart_color): Primary (primary), Secondary (secondary), Success (success), Warning (warning), Danger (danger), Base text (base-text), Heading text (heading-text), Black (black), White (white), Gray 100 (gray-100), Gray 200 (gray-200), Gray 300 (gray-300), Gray 400 (gray-400), Gray 500 (gray-500), Gray 600 (gray-600), Gray 700 (gray-700), Gray 800 (gray-800), Gray 900 (gray-900), Random (random), Custom (custom)

Presets

• Variant picker