Uploading Swatch Images
The swatches folder in Media Storage is the most common place where uploaded swatch images are stored. Swatch images that are uploaded to Media Storage are globally available and can be used by any product. The name of each uploaded image file must exactly match the attribute value that it represents. In this example, each file name is a color.
Swatches in Media Storage
Swatches can also be associated with a specific product, and uploaded directly to the product’s thumbnail gallery. Swatches that are uploaded directly to a product do not appear in the gallery or in layered navigation. However, in some cases, there are advantages to using this method. It is also the recommended method for languages with a non-Latin character set, such as Arabic, Chinese, Cyrillic, or Japanese.
The system uses a “fall back” method to locate swatches. It looks first to see if there are any swatches associated with the product image. If it doesn’t find a swatch, it then looks in Media Storage.
If you use a language other than English for attribute values, it is recommended that you upload swatch images to each configurable product, rather than to Media Storage. Files uploaded to Media Storage can only include the characters a-z and 0-9. Characters from non-Latin alphabets, such as Arabic, Chinese, Cyrillic, and Japanese are not recognized by the system. To learn more, see the developer documentation.
Method 1: Upload Swatches to Media Storage
Before uploading swatch images, make sure that the file names exactly match the corresponding attribute values. For example, if you upload a file named “gray.png,” it will match the attribute value “Gray,” but not “Grey.”
All file names are converted to lowercase. In addition, any characters other than a-z and 0-9 are replaced with a hyphen. Therefore, the swatch name “Royal Blue” becomes “royal-blue.”
If you have access to the server, swatch files can be uploaded to the following location:
-
[Magento install directory]/media/wysiwyg/swatches
|
|
1.
|
On the Admin menu, select CMS > Pages > Manage Content. |
|
2.
|
In the list, click to open any page in edit mode. |
The purpose of this step is to launch the editor. Media Storage can be accessed from any place the editor is used.
|
3.
|
In the panel on the left, select Content. |
|
4.
|
From the editor, click the Insert Image button. In the directory tree on the left, click the swatches folder, and do the following: |
|
a.
|
Click the Browse button, and locate the swatch image files that you want to upload. |
You can upload individual images, or multiple images at the same time.
|
b.
|
Click the Upload Files button to copy the file to Media Storage. |
Newly uploaded images appear at the bottom of the list.
Uploading Multiple Swatches
|
5.
|
When you are done, click the Close button in the upper-left corner of the Media Storage window. Then, click the Back button to exit the editor. |
|
6.
|
If prompted to refresh the cache, click the Cache Management link in the message at the top of the workspace, and refresh any cache that is invalid. |
|
7.
|
Go to your storefront to verify that the swatches work correctly. The text-based swatches should now be replaced with the swatch images that you uploaded. |
|
8.
|
If any drop-down options from the configurable product are missing from layered navigation, return to Cache Management and click the Flush Magento Cache button. |
Method 2: Upload Swatches as Product Images
Use this method to associate swatch images with a specific product. Swatches uploaded with this method take precedence over those uploaded to Media Storage.
|
1.
|
On the Admin menu, select Catalog > Manage Products. |
|
2.
|
Find the product the configurable product in the list, and open the record in edit mode. |
|
3.
|
If the image is intended for a specific store view, set Choose Store View to the store view where the images will be used. |
|
4.
|
In the panel on the left, click Images. Then, do the following: |
|
a.
|
Click the Browse Files button, and select the images files to upload to your store. |
|
b.
|
Click the Upload Files button to upload the selected images to your store. |
Product Swatch with Label
|
c.
|
Enter a Label for each swatch image uploaded, in the following format: color name, followed by a hyphen, and the word “swatch.” This label identifies the image as a swatch that is associated with this specific variation of the product. |
Do not select any of the remaining options. It is not necessary to select the Exclude checkbox, because by default, Swatch images do not appear in the thumbnail gallery.
|
5.
|
When complete, click the Save button. |
|
6.
|
When prompted to clear the cache, click the Cache Management link in the message at the top of the workspace, and refresh any cache that is invalid. |
