Variant picker

Setting	Description
Color scheme	Applying a color scheme to a variant picker block (except collections columns) automatically updates all associated colors set in the theme settings according to the created color schemes.
Type	Dropdown Pills

Pills type

Dropdown type

Color Variants

Setting	Description
Type	Dropdown Pills
Swatch	Circle Square Square image (Below is an explanation of how to configure this style) None
Pills style	Default: circle or square shapes Outlined: circle or square shape inside frame

Pills style: Default with circle swatch

Pills style: Outlined with square swatch

Dropdown type, square swatch

The "Square Image" style is one of the ways to display color swatches. Instead of a color, you can add an image of the product or any other image, such as a fabric texture, to the color swatch. This style features slightly larger swatches for better image visibility.

To create a color variant and display it using the "square image" color swatch, follow these steps:

Go to the admin panel and navigate to the "Products" section.
Click on "Add Product" in the top right corner or select one of the already created products.

Note that when creating a product, you must either automatically assign or manually select a product category to be possible the use of the "square image" color swatch style.

When you reach the "Variants" section and click the plus sign "Add options like size or color," select "Color" from the dropdown menu.

After selecting the color, click on the second field and choose "Add new entry" from the dropdown menu.

Fill out the form that appears:

In the "Label" field, enter the color name that will display next to the color swatch.
The "Color" field allows you to add the hex color code.
Then, using the image selector, upload the image you want to display in the color swatch.
In the next field, select the base color, which will not be displayed but will be used for filtering.
Leave the "Base Pattern" field with the automatically selected option.

Click the "Save" button and add the created color variant to your product. Also, save the changes.
Go to the product page to view the color variant with the image you added.

There is another way to create a color variant and display it using the "square image" color swatch:

Go to the "Content" section in the admin panel.
Select the "Metaobjects" subsection.

Click on the "Standard Product Attributes" tab.
In the list, select "Color."

In the top right corner, click the "Add entry" button.

Fill out the form as explained above and save it.
Go to the "Products" section and open the product to which you want to add the created color variant.
Add the previously created color variant in the "Variants" section or in the "Metafield Categories" section.
Go to the product page to view the color variant with the image you added.