How to Upload Magento Swatch Images to Configurable Products

Right after Magento 1.9.1 rolled out, talks about Magento configurable swatches captivated the net. This shopping cart version comes with long-awaiting built-in swatch functionality, what provides online sellers with the possibility to improve configurable product display.

What Is Magento Swatch Image?

Formerly configurable product selections were not represented visually and came in dropdowns at storefront. Swatches somewhat enhance catalog visualization and allows to create image-based dynamic configurable merchandise. Having set swatches for configurables, you will get it on the product page instead of plain text in dropdowns, what respectively ensures positive customer experience and lets make the selection simply clicking on desired icon.

Sounds nice, doesn’t it? Although, to make your configurables more attractive and set differential pictures for each option, you are expected to cope with a couple of settings, outlined below.

• How to Bulk Upload Magento Swatch Images

Adding Magento Swatch Images Through the Admin

To upload swatches via Admin, you need to accomplish actions, as they are arranged here.

1. Magento Configurable Swatch General Settings

First and foremost you need to activate swatch image option. Navigate to System->Configuration and move down through left-hand menu to Catalog->Configurable Swatches tab and set Enable field to Yes (by default it is disabled)

Next in turn is specifying values of which configurable attributes will acquire swatches. In other words, you should select attributes that will be represented by swatches at product page. All available configurable attributes are enumerated in “Product Attributes to Show as Swatches in Product Detail” box and you can choose one or more.

From the dropdown below you can choose what attribute will be displayed as Magento swatch image for products on the category page or, as it is commonly said, in product listing

Let’s get back to configurable product image settings. You can find the fields, related to swatch dimensions and determine in pixels width and height of swatches on product detail page, product listing page, and in layered navigation.

2. Swatch Images Media Storage

Magento requirement, you should follow strictly to get swatches applied to product selections and bypass inconveniences is that, you have get them uploaded to Media Storage.

Thus before you start attaching images to product selections, you have to upload them to this folder on FTP. You can do it using any FTP client or in the way outlined below:

1. Navigate to CMS->Pages->Manage Pages and enable editing of any page. In this way you can access the editor and Media Storage respectively
2. Switch to Content tab in the left menu
3. Press Insert Image option accessible in the editor and select swatches folder in the directory tree





4. Hit Browse Files button and select image/images, you will use as Magento configurable swatches





5. Complete the process pressing Upload Files button

3. Assign Swatches to Products

Finally, you have come to the point. Attach swatches to Magento products as we do

1. Find associated simple product in the list and enable its editing
2. Load the image to be displayed as a swatch for selection this simple product represents. For example, this simple is “cardigan beige-36” what means we need to assign “beige” (attribute value name) swatch image to it and add -swatch to the label. Swatch image ascribed to certain variation is recognized by the label, so you have to configure them properly.

Image will not change until it is assigned as Base to associated products. You can optionally upload the image of desired size and make it base, so customer will see it when choosing this or that selection at your Magento store

Now add swatches to each of associated items in the way we have described.

You can find all these manipulations long-drawn-out and would gladly simplify swatch image handling. Store Manager for Magento provides such a possibility.

Starting from version 2.27.1.1413 Store Manager supports swatch images and allows to fluently attach them to selections bypassing numerous configurations.

Adding Magento Configurable Swatches with Store Manager

1. Upload pictures to media/wysiwyg/swatches via intuitive FTP Swatches Browser
   
   
   
   
   

   *Please, make sure Magento swatch names coincide with configurable attribute value it will represent

   
   

   Once images have been uploaded, you can see them in FTP Swatch Browser together with formerly added swatches

   
   
   
   
   

   Swatches will already be displayed on the product page instead of color options, if their names coincide as it has been indicated above.

   
   
   
   
   
2. Since your aim is to get image changed, when specific option is selected by customer at the storefront, you need to assign corresponding image to each of simple items that belong to configurable products and make it base.


If you have multiple images in Image Gallery, among which swatches, and do not want them to be displayed it the Gallery at product page, you can exclude these images marking them as swatches in Store Manager. Go to main configurable product, switch to "Image Gallery" tab in the lower grid and press "Generate Swatches" button on the toolbar. Swatches will be added with "-swatch" label respectively.

Right after each simple item has necessary image ascribed, image will change when site visitor selects this or that option.

*Please note, Magento 1.9.1 and higher comes with image management changes. One and the same image can not be assigned to multiple products with identical name. Store Manager works due to Magento logic, regenerates image name (e.g _1) if it is assigned to several products and adds the same image with different names.

Display image for configurable attributes and demonstrate product view according to selected option with Magento swatch images.