Adding swatches to products

Swatches are samples of color that help your customers choose the right product. Use the “Color” product option to add swatches to product pages in your online store. This way, customers will instantly see the difference between product variants.

You can choose to display swatches on the product grid and customize their shape and the size on the Design page in your store admin.

Creating swatches for a product

You can add any number of swatches to a product page in your store to showcase samples of the colors this item comes in. For that, create a “Color” product option for a product and set the color for each of the swatches.

To create swatches for a product:

1. From your Ecwid admin, go to Catalog → Products.
2. Open the product you want to edit or create a new one.
3. Go to the Options tab and click Add Product Options.
4. Select the “Color” option type from the Option type dropdown and rename the option if you want (e.g., into "Shades").
5. In the Option values field, enter the name of the first swatch. For example, “Green”.

6. Click on the swatch icon to set its color in your storefront. You can select from the list of popular colors or switch to the Set custom color tab to use the color chooser tool:

   

7. Click +Add Value and add the other swatches you want your product to have.
8. Click the Value selected automatically dropdown to choose if any swatch value should be preselected. By default, customers need to choose an option manually.
9. (optional) Click the six dots to the left of the swatch value name to drag and drop and rearrange the values.
10. (optional) Hover over the swatch value and click Add price modifier to specify how this option affects the base product price.
11. Save the changes.

That’s it! You’ve added swatches to your product.

Swatches will be displayed on the product page in your store, where customers can select the option they like before making the purchase. The swatches customers chose will be listed in the order details as well as in your store’s notifications and in invoices.

You can also display swatches in the product grid and customize their shape and size.

Adjusting the swatch display on the product grid

By default, swatches appear only on the product pages in your online store. You can also opt to display them on the product grid. This way, customers will immediately see the available swatches when browsing your store’s categories.

To adjust the swatch display on the product grid:

1. From your Ecwid admin, go to Design.
2. Scroll down to the Product Card details and layout block.
3. From the Color options dropdown, choose Show or Do not show.

The changes will be autosaved.

Customizing swatch shape and size

You can customize the swatch shape and size to fit your store’s style and concept. Circle, Square, and Rounded square options are available for swatch shapes. Small, Medium and Large options are available for swatch sizes.

To customize swatch shape and size:

1. From your Ecwid admin, go to Design.
2. Scroll down to the Color options block.

3. Choose the shape from the Swatch shape‍ dropdown and/or select your option in the Swatch size on product details page‍ list:

   

The changes will be autosaved.