A comprehensive product variant selection block that provides flexible display options for product options including colors, sizes, and other variants. The block supports both button-based and dropdown-based selection interfaces, with advanced features like swatches, tooltips, and unavailability indicators. It integrates with Alpine.js for interactive behavior and handles complex variant logic including availability checking and option state management.
Common use cases
Use button selection for better user experience when you have few variant options
Enable swatches for color options to provide visual selection feedback
Consider using unavailable indication to guide customers toward available variants
Use grid layout when displaying many options to maintain organized appearance
Configure appropriate gap sizes based on your design system and available space
Enable tooltips for swatch-only displays to show option names on hover
Test responsive behavior to ensure smooth transitions between desktop dropdowns and mobile drawers
Ensure proper styling of disabled states when using unavailability indicators
Block settings
General
Setting
Description
Options
Show advanced settings
Reveals 6 advanced options including unavailable indication, show labels, and more
Checkbox (default: false)
Content
Setting
Description
Options
Product
Select the product to display options for
Product picker
Variant selection
Controls how non-swatch variants are displayed
• Buttons (default) • Dropdowns
Unavailable indication
Controls how unavailable variants are indicated
• None • Empty (default) • Selected
Visible when Show advanced settings is on
Show labels
Displays labels for each option
Checkbox (default: true)
Visible when Show advanced settings is on
Show single variant options
Shows options when the product has only one variant
Checkbox (default: true)
Visible when Show advanced settings is on
Swatches
Setting
Description
Options
Swatch selection
Controls how swatch options (colors) are displayed
• Buttons (default) • Dropdowns
Show swatch
Displays color swatches for color options
Checkbox (default: true)
Visible when Show advanced settings is on
Show tooltip
Displays tooltips showing option names on swatch hover
Checkbox (default: true)
Visible when swatch selection is "buttons"
Visible when Swatch selection is buttons and Show advanced settings is on
Show labels
Displays text labels with swatches
Checkbox (default: false)
Layout
Controls the layout of swatch and label
• Stacked • Inline (default)
Visible when show labels is true
Size
Size of the swatch indicators
8 - 120 px (default: 16)
Visible when show swatch is true
Radius
Border radius for swatches
• None • Default • SM • MD • LG • XL • 2XL • Full (default)
Visible when show swatch is true
Spacing
Setting
Description
Options
Enable horizontal padding
Adds horizontal padding around the options
Checkbox (default: false)
Enable top padding
Adds top padding around the options
Checkbox (default: false)
Enable bottom padding
Adds bottom padding around the options
Checkbox (default: false)
Gap size
Spacing between option elements
• None • Default (default) • XS • SM • MD • LG • XL
