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.
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
Reminder
Magento configurable attributes are used to generate configurable products respectively. It must belong to the attribute set, main configurable and simple associated products belong to. You should strictly follow requirements when creating configurable attribute and set their properties in the following way:
- Scope = Global
- Catalog Input Type for Store Owner = Dropdown
- Apply to = Configurable Product or All Product Types
- Use to Create Configurable Product = Yes
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:
- Navigate to CMS->Pages->Manage Pages and enable editing of any page. In this way you can access the editor and Media Storage respectively
- Switch to Content tab in the left menu
- Press Insert Image option accessible in the editor and select swatches folder in the directory tree
- Hit Browse Files button and select image/images, you will use as Magento configurable swatches
- Complete the process pressing Upload Files button
Important
- Magento allows to add “.png” images as swatches
- Pay attention to image name, configurable value name and swatch name should coincide, for example, if you have “white” value, swatch name should be “white.png”
- Keep to file name rules - they are converted to lowercase; furthermore if some contain symbols other than a-z and 0-9, these will be substituted by a hyphen
3. Assign Swatches to Products
Finally, you have come to the point. Attach swatches to Magento products as we do
- Find associated simple product in the list and enable its editing
- 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.
Manage Magento Swatches FREE Start Now
Adding Magento Configurable Swatches with Store Manager
- Upload pictures to media/wysiwyg/swatches via intuitive FTP Swatches Browser
- 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.
*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.
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.
Related Articles:
Change the Order of Configurable Product Drop-Downs
Check how to modify the order of configurable product drop-downs displayed on the front-endmassive or one by one. Read More...
Create Magento Configurable Products From Existing Simples?
Find out how to convert simple Magento products into configurable by configurable attributes or by certain parameters (EAN code, ICEcat code etc). Read More...
Convert Simples with Custom Options Into Configurable
Check the reasons why you may need to convert simple products with custom options into configurable and the ways to accomplish that. Read More...
Export Magento Configurable Products with Relations
Configure export of Magento configurable products with relations by checking a box. Read More...
I am trying to add swatches and want them to change when specific product is selected. How can I bulk add images to simple products? I have a lot of configurable products, hope it can be done
Hi, Marquis.
You can add images to configurable product selections in the process of import. For that you should have image indicated for each simple item in the file, in Base Image column (image should be assigned as Base to simple item if you want it to be displayed when corresponding swatch is selected). You can find step-by-step image import tutorial in this article - https://www.mag-manager.com/useful-articles/magento-product-management/import-images-with-store-manager-for-magento/