Variant swatches
Product pages
Display your product variants as Swatches to make it easy for customers to view your product options at a glance. Instead of a dropdown menu, swatches visually represent your variants as a row of clickable buttons.
You can add swatches using default colors or custom colors added to your theme settings. You can also upload custom images to represent your product variants more precisely.
Set up swatches
Swatches are enabled in your theme settings by adding the option name for your variants. You can add swatches using default colors, custom colors, or you can upload custom images.
[Required] Enable variant swatches
Use default colors for swatches
Use custom colors for swatches
Upload custom images for swatches
You can also enable Variant chips on product pages, which display product options as a row of clickable buttons with the variant name as the label. See the variant chips guide.
Appearance settings
You can choose to show swatches on products cards when hovered over anywhere on your site. Spark also has Dynamic option availability that grays out swatches of out-of-stock variants.
Enable dynamic option availability
Show swatches on product cards
Watch tutorial
Watch the tutorial video for setting up swatches, including default colors, custom colors, and custom images.
Related links
Last updated