>Magento Tutorial: Create Color Swatches for Configurable Product

Magento Tutorial: Create Color Swatches for Configurable Product

Inserting Magento configurable color swatches to your Magento store takes time, but as a trade-off, it would bring better sales for your Magento site. Without any advanced actions, your Magento configurable products are solely able to display on “related products” page and all you can do is praying God for wishing the customers pay attention to the related product bar and click through. Moreover, selecting single products for just each variation in color, size, fabric shall be the constant nightmare for customers which causes great satisfaction to reduce on customers. As a result, you need one effective way to import Magento configurable products with color swatches in Magento 1.9.1.

Magento swatches for configurable products can be any attributes which can be created by yourself. On your Magento site, you can use swatches on the individual product page, in layered navigation or the product lists. When your customers and visitors click a swatch, the product image can be updated immediately and display product’s appearance with that color swatch. And what will you have? Better customer experience, higher visitor satisfaction when they see nicer appearances of the products are inevitable.

This tutorial shall be its best if you are using Magento Community Edition (1.9.1 or later) or Magento Enterprise Edition (1.14.1 or later). If your Magento versions are older, you could bear in mind Magento Color Swatch Extension that supports the useful function and Magento Pro Configurable Product Grid Table View Extension by BSSCommerce that enables not only color swatches but also tier price, auto-calculated total prices and nice table view display of associated and configurable products.

magento pro configurable grid table view extension

Add Color Swatches to the Catalog Item

(For Magento 2, check out the tutorial on 2 Easy Steps to Add Color Swatch in Magento 2)

1. Create an attribute

  • Go to CatalogAttributesManage Attributes
  • Select Attribute with the following properties:

– “Scope” as “Global

– “Catalog Input Type for Store Owner” as “Dropdown

– “Apply to” as “Configurable Product” or “All Product Types

– “Use to Create Configurable Product” as Yes

2. Create an Attribute Set with needed options (Size, Color: orange, blue, red, etc.)

magento attribute set color swatches

  • Go to CatalogAttributes ⇒ Manage Attribute Set “Add New Set
  • Name the attribute set. “Base On” as “Default” (with the existing properties). Then save the attribute.

magento appropriate image

  • Drag the Attribute created above to the suitable group on the left-hand side and saved.

magento drag attribute

3. Set a Configurable Product

  • Set the Attribute Set created above with Product Type to “Configurable Product.”

magento configurable product

  • Tick the boxes for the attribute sets you to want to be configurable

magento tick boxes attributes

  • Create a needed base product, fill out the following Magento characteristics: Name, Description, SKU, Short Description, Status, Visibility. And then “Save.”

magento color swatches description

  • Fill out Price and Tax Class of product on Price Screen
  • Select Categories, tick the needed categories.

magento color swatches select category

  • If you have multi-stores, click needed websites and tick the web stores.
  • Click through “Inventory.” At this point, you can manage each product individually or to have the products all be based on the same inventory stock (ex. if the Magento admin has a white tee shirt that they dyed many different colors, such as 5 green, 5 yellow and red shirts). To do the former, leave the Magento default configuration settings and change the “Stock Availability” to “In Stock.” Then save.

magento configurable product inventory

  • Create the Magento Associated Products. You can “Auto-generate” the Name, SKU for single associated products. ⇒ Change to “Enabled,” the Visibility to “Not visible individually” and Stock Availability to “In Stock.” Choose the quantity.

magento create associated product

magento select attribute

magento select attribute 2

4. Enable Magento Configurable Swatches

Going to System ⇒ Configuration. Then select “Configurable Swatches” that is under the Navbar Header. Set “Yes” on “Enabled” and bear in mind to include “Product Attributes to Show as Swatches in Product Detail.” Save!

magento configurable product swatches

5. Add the swatches in

Go back to Magento “Catalog” ⇒ “Manage Product” ⇒ Main ProductImages

  • Upload images for swatches. It is suggested that the images be a .png file.

magento upload swatches

  • Set one of the images to default / chosen on needs

magento image default

  • Label image swatch and save. This step enables to change product color while viewing.

magento label image

6. Reindex and clear all the cache

7. Repeat steps for setting swatches you need

Let’s begin Color Swatch with Pro Configurable Product Grid Table View now! 

magento pro configurable grid table view extension

For interest, Configurable Product Grid View extension for Magento 2 is now also available. Check it now!