After updating configurable swatch for our Magento 1.9.1 templates, we have received many questions from our customers that ask us how to configure swatches for Magento 1.9. In order to support you best, I am writing this post with the hope that this will be a useful guide for you to configure swatches for Magento 1.9 easily.
I. Basic Prerequisite:
Before getting started, please check following basic requirements:
1. Configurable Swatches image work with configure products
2. Configurable Swatches are based on a configurable product’s attributes; only attributes as follows can be used as swatches.
In the Admin Panel, click Catalog >> Attributes> > Manage Attributes.
3. To understand localization and fallback, you must know how to locate a configurable product’s Admin label:
3.1. In the Admin Panel, click Catalog >> Attributes> > Manage Attributes.
3.2. Click the name of an attribute (Eg: color).
3.3. On the Edit Product Attribute page, click the Manage Label/Options tab on the left. The attribute’s labels display similar to the following:
II. Setting configuration option to configure swatches
1. Log in to the Magento Admin Panel
2. Click System >> Configuration >> CATALOG >> Configurable Swatches.
3. Select the below options in General Settings.
Step 1: Enabled > > Yes
Step 2: Product Attributes to Show as Swatches in Product Detail >> Choose attributes you want to show as a swatch. This is where the attribute displays:
Step 3: Product Attribute to Use for Swatches in Product Listing >> Choose attribute you want to display as a swatch on product listing pages. This is where the attribute displays:
III. Adding Image to Swatches
For visual oriented attributes you have to choose image for theme. However, for attributes like size, you don’t need to upload images.
1. Adding Global Swatch Images.
You can use this simplest way for any products except the locales.
STEP1. Create a PNG image matching the label with a file name of all lowercase letters with hyphens. For instant, if the option label is Sky Blue, create a file named “sky-blue.png”
STEP 2: Copy the image to [your Magento install dir]/media/wysiwyg/swatches.
2. Adding Product-Specific Swatch Images
In case your products are in locales or they have specific pattern or colors that are not used by other items, you can use product specific swatches.
To do this, you need to upload the product image that match the option label and have the suffix “swatch”. For instance, if your label is Sky Blue, upload an image label: Sky Blue-swatch.