Variant picker

Pills type

Dropdown type

Color Swatch

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:

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

3. 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.

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

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

6. 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.

7. Click the "Save" button and add the created color variant to your product. Also, save the changes.
8. Add a "Featured Product" section in the customizer and include a previously created product in that section to see how the color swatches are displayed.

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

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

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

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

6. Fill out the form as explained above and save it.
7. Go to the "Products" section and open the product to which you want to add the created color variant.
8. Add the previously created color variant in the "Variants" section or in the "Metafield Categories" section.
9. Add a "Featured Product" section in the customizer and include a previously created product in that section to see how the color swatches are displayed.