Creating Attribute/Product Image Swatches in Magento

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.

 

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

 

This will display all of your 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.

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.

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.

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.

 

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.

 

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

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

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.

 

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

 

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