Variant picker

  • From your Shopify admin, go to Online Store -> Themes.

  • Find the theme that you want to edit, and then click Customize.

  • Choose Products from the dropdown window -> Choose Default product.

  • From the side menu, select Product information. Click + Add block and select "Variant picker" block, or click the Search bar to enter a search term.

Setting
Description

Style

Select variant type from the dropdown menu:

  • Dropdown

  • Pills

Input option name to show swatch style

Fill in the field with the same name of product variant to show swatch style.

Swatch

Enable/disable checkbox

The default theme uses Color Board from the w3schools website for the color swatches. If the color name doesn't exist on the w3schools website, it will not display on your filter.


Compare Color

Compare Color provides your customers a visual look and comparison between many colors of a product. After that, they can easily make a purchase decision and be satisfied more with the choice.

Setting
Description

SVG icon

Enter the SVG icon

Show Compare Color?

Enable/disable checkbox

Drag & Drop (On Desktop)

Enable/disable checkbox

Last updated