Shero Support

How can we help?


Creating Color Swatches in Magento 1.9.1

How to Add Swatches to a Catalog Item 

1) Create the attribute you want (if it isn't created already)

1.a) Catalog -> Attributes -> Manage Attributes

1.b) It must have the following properties: Scope = Global, Catalog Input Type for Store Owner = Dropdown, Apply to = Configurable Product or All Product Types, Use to Create Configurable Product = Yes

2) Create the Attribute Set you want

2.a) Catalog -> Attributes -> Manage Attribute Set "Add New Set"

2.b) Name the attribute set appropriately e.g. "Canvas Posters". The attribute set can inherente an exists attribute sets properties. Save the attribute set.

2.c) Next, drag the Attribute created above (or already existing) to appropriate group on the left hand side and then save. 

3) Create a Configurable Product (Catalog -> Manage Products "Add Product")

3.1) Set the attribute set to the Attribute Set you created above e.g. "Canvas Posters". Set the Product Type to "Configurable Product" and continue. 

3.2) Tick the boxes for the attributes that you want to be configurable and continue.

3.3) Next, you will need to create the base product that you want to be configurable. Fill out the following: Name, Description, Short Description, SKU, Status, Visibility (Catalog Search). Save. 

3.4) Prices screen should load next, fill out the Price and Tax Class of the product.

3.5) Select Categories from the side bar. Tick the categories you want the configurable product to appear in.

3.6) Click Websites and Tick the Webstores you would like the configurable product to appear on. 

3.7) Click Inventory. At this point you can choose to either have each product managed individually or to have the products all be based off of the same inventory stock (e,g, if a manufacturer had a white tee shirt that they dyed many different colors, as opposed to 10 blue, 5 red and 6 green shirts). To do the former, leave the default configuration settings and just change the "Stock Availability" to "In Stock". Save.

3.8) Next you'll need to create the Associated Products. The Name, and SKU for each associated product can be left to "Auto-generate". Change the Status to "Enabled", the Visibility to "Not visible individually", and Stock Availability to "In Stock".  Enter the quantity. In this example our swatch will be based on color. As such, the color field needs to be selected. If you enter a price on this screen, it will add that to the price that was defined when you created the base product (picture 2/3). Click "Quick Create". Add as many items as you wish, then click Save - otherwise the products will show as created in the Manage Products area but not be associated with the Main Product. 

4) Next, you'll want to enable Configurable Swatches. (System -> Configuration) Then under the Navbar header "Catalog" select "Configurable Swatches". Make sure that "Enabled" is set to "Yes". Also make sure that under "Product Attributes to Show as Swatches in Product Detail" includes the attribute that you are using. In this case it is color. Save the Config. 

5) Add the swatches in. Go back to Catalog -> Manage Products -> The Main Product You Created -> Images

5.1) Upload the images that you want for the swatches. The images should be a .png file with the word -swatch afterwards. e.g. Black-swatch.png or Blue-swatch.png

5.2) Set one of the images to defaults/depending on needs. 

5.3) Label each image swatch as shown below. This will allow for changing of the product as a specific color is selected while viewing. 

5.4) Save.

6) Re-index, clear cache.