Get started building your WooCommerce store or web application — Call us today at (206) 806.7809
Reading Time: 4 minutes

In this lesson, let’s look at how we can add swatches to our products in Magento.

Swatches for Magento Product Images and Attributes

A swatch is a color sample. Think about the last time you went to your local paint store – they have a swatch for every color of paint that they can produce, and it’s crucial that the swatches match the actual paint color. If they didn’t, you’d have a lot of angry people wondering why the room they painted doesn’t look the way they thought it would.

Some products sold online are the same way. If you are selling clothes, for example, and you are offering different color options, it is important that your customers see color options that actually match the color of the clothes they will be buying. Every specific shade has to be represented accurately.

Example Configurable Product

To get started, let’s assume that we have an existing configurable product in our shop. In this example, let’s use our top-selling hoodie.

Magento Color Options


As you can see, we have several color options. Let’s see where these options come from!


Using the navigation bar, browse to Stores, then Product (under Attributes).

Stores Attributes Product


This will display all of your product attributes.

Product Attributes

In this example, we already have a “color” attribute – if you’re just getting your store set up, or you don’t yet have a color attribute, you can create one using the Add New Attribute button. Watch our video on Adding Product Attributes for help with the attribute creation process.

Select Visual Swatch

On the attribute details page, you’ll be able to set up the attribute as either a Visual Swatch or a Text Swatch.

Catalog Input Type

Manage Swatches

A text-based swatch is often used for sizes or other values that can be represented numerically. A visual swatch is going to be representing colors, or specific shades of colors.Manage Swatches

Setting an Image as the Swatch with Magento

Take note that in addition to colors, you can also upload an image that can be displayed in place of a solid-colored swatch.

Image Swatches

If you opt to choose a color, you’ll be able to use a built-in color picker to match your exact shade. Or, if you prefer, you can enter a specific hex value or RGB values to denote your desired color shade.Color Picker


If you want to add a completely new swatch, just scroll down to the end of your list of swatches and click the Add Swatch button. A new swatch row will appear.

When you are finished adding or editing your swatches, click the Save Attribute button in the upper right corner.

Add the Swatches to Products

If you are updating existing swatches, you’ll also need to update any products that need to reflect the change. To do this, use the navigation bar and browse to Catalog, then Products.

Catalog Products


Find the product you want to modify and mark the checkbox in the first column to select the product.

Select Products

Then click the Actions drop-down and choose the “Update Attributes” option.

Update Attributes

Update the Swatch Attributes

Scroll down to the color attribute (if you didn’t already have one, make sure you created one) and click on the Change checkbox.


Then click on the drop-down and select the swatch you are updating.

Change Swatch


Finally, click the Save button in the upper right corner.


Save Swatches

If you are prompted to refresh your cache, do that as well.


Your team is about to get a whole lot mightier.

If it sounds like we might be a good fit, send us a message. We’ll get back to you within 24 hours. And then we can hit the ground running.