Creating Magento Configurable Color Swatches for Magento Community Edition (1.9.1 or later) or Magento Enterprise Edition (1.14.1 or later) may boost up customer satisfaction with practical color swatches for configurable products.

1. HOW TO CREATE COLOR SWATCHES
FOR CONFIGURABLE PRODUCT
Provided by BSSCommerce
A Magento Extension Provider

2. OUTLINE
1. Reasons to create color swatches for configurable
product
2. Steps to create color swatches for configurable
product

3. REASONS
Drawbacks of Magento configurable products
Display on
“related
products” page
• Reduce
customer
attention
Select single
products for
each variation
(color, size…)
• Decrease
customer
satisfaction
Need to create
color swatches
for configurable
products

4. REASONS
1
• Freely create any attributes for configurable products
2
• Use swatches in product page/layered navigation/product lists
3
• Update image immediately and displayed with color swatch
 Better customer experience
 Higher visitor satisfaction

5. STEPS TO CREATE COLOR SWATCHES FOR
CONFIGURABLE PRODUCT
Create an
attribute
Create an
Attribute
Set
Set a
Configurabl
e Product
Enable
Magento
Configurabl
e Swatches
Add the
swatches in
Re -index
and clear
all the
cache

6. STEP 1: CREATE AN ATTRIBUTE
Catalog  Attributes  Manage
Attributes  Add New Attribute

7. STEP 1: CREATE AN ATTRIBUTE

8. STEP 2: CREATE AN ATTRIBUTE SET
Catalog  Attributes 
Manage Attributes Sets 
Add New Set

9. STEP 2: CREATE AN ATTRIBUTE SET
• In Edit Set Name, enter name of the new attribute set
• In Based On, choose “Default” in dropdown

10. STEP 2: CREATE AN ATTRIBUTE SET
Drag the Attribute created above to the suitable group on the left-hand side and save

11. STEP 3: SET A CONFIGURABLE PRODUCT
Catalog  Manage Products  Add Product

12. STEP 3: SET A CONFIGURABLE PRODUCT
Set the Attribute Set created above with Product Type to “Configurable Product”

13. STEP 3: SET A CONFIGURABLE PRODUCT
Tick the boxes for the attribute sets you to want to be configurable

14. STEP3:SETACONFIGURABLEPRODUCT
Fill out the following Magento characteristics: Name, Description, SKU,
Short Description, Status, Visibility. And then “Save”

15. STEP 3: SET A CONFIGURABLE PRODUCT
In Categories, tick the needed categories

16. STEP 3: SET A CONFIGURABLE PRODUCT
In Inventory, select In Stock in Stock Availability

17. STEP 3: SET A CONFIGURABLE PRODUCT
In Associated Products, set Weight, Status, Visibility, Color, Price, Quantity and
Stock Availability. Then click Quick Create to make simple products.

18. STEP 3: SET A CONFIGURABLE PRODUCT
Simple associated products have just been created

19. STEP 4: ENABLE MAGENTO CONFIGURABLE SWATCHES
System  Configuration  Catalog  Configurable Swatches
In Enabled, choose Yes
Then select Color in Product Attributes to Show as Swatches in Product Detail

20. STEP 5: ADD THE SWATCHES IN
Catalog  Manage Products  Main Product

21. STEP 5: ADD THE SWATCHES IN
In Images, upload images for swatches (png file suggested)

22. STEP 5: ADD THE SWATCHES IN
Set one of the images to default.
Label image swatches and save. (this allows to change product color while viewing)

23. STEP 6: RE -INDEX AND CLEAR ALL THE CACHE
Let's begin Color Swatch with Pro Configurable Product Grid Table View
now!

24. Pro Configurable Grid Table View
Only $39.00
 Free install
 Free support
 Free update
 30 day money back
 For more information visit: http://bsscommerce.com/
 For instant support: support@bsscommerce.com