Magento Color Swatches

Color swatches allows creating a visual presentation of custom options for configurable products. The feature shows images instead of a drop-down menu or radio buttons to display custom options in a more attractive way to your customers.

For example, if you sell shoes of a different color, you can display images for each color. When the option gets out of stock, it’s crossed out on the front-end.

 

Color Swatches option is available only in Magento CE 1.9.1(or later) RWD theme.

Color Swatches can be used on product pages, in product listings and layered navigation.

Creating Color Swatches

Step 1. Create an attribute under Catalog - Attributes - Manage Attributes - Add New Attribute.

In the Properties tab set the following values:

• Scope - Global;
• Catalog Input Type for Store Owners - Dropdown;
• Apply To - All Product Types or Configurable Products;
• Use To Create Configurable Product - Yes.

In the Manage Labels/Options tab add color values:

Step 2. Create an attribute set under Catalog - Attributes - Manage Attribute Sets - Add New Set. Name the set and choose an attribute the newly added set should be based on.

Next, drag and drop the attribute from the Unassigned to the Groups table.

Step 3. Enable Configurable Swatches under System - Configuration - Catalog - Configurable Swatches.

Step 4. Create a configurable product under Catalog - Manage Products - Add Product. Select the necessary attribute set and a configurable product type. Choose configurable attributes.



Note! You won’t be able to change these attributes later.

Now simply add information as you would do for a configurable product type. When done, jump to Images tab and upload the mail product’s image and images for color swatches. When done, re-index data and clear the cache.

If you are not comfortable with admin panel, you can use 3d party Magento product optins extension or the same one for Magento 2.