Superstore includes a Color swatches option to display specified variants as thumbnail previews for colors, patterns, or shades.
To set up swatches, first follow this guide:
Using color swatches for product variants
Access theme editor settings for color swatches
Go to your Superstore theme > Customize > Theme settings > Products
In this theme setting, scroll down to the Color swatches portion.
Limit swatches to appear on product page
To only include swatches on the product page, select Show color swatches on product pages only.
Enabling this option will display the swatches for the product page, as well as the quickshop and featured product section if these features are also enabled. Disabling this option will include the swatches on the collection page cards and tag filters.
Control the appearance of the swatches
Choose a swatch shape option
Select either Square or Circle to display the swatch images in rectangular or circular containers.
Choose a product card style
Select an option under Product card swatches style to keep the swatches visible or have them reveal with cursor hover.
Choose a filter swatch style
Select either Grid or List to display the tag filter swatches as a grid or in a list.
Adjust the swatch sizes
Use the provided sliders to determine the size of the swatches as they appear on the Product cards, Product page, and Filters sidebar.