10. Generate Swatches for Configurable Product

fmProducts, fmImageLoadForm

Note, this option is available to stores based on and further versions of Magento shopping cart!

To be able to use swatches in Store Manager and see them on the product page of your store like an illustration below, you need to perform the appropriate settings in your Admin Panel firstly.

Swatches on the Front-end

Go to your back-end area ‘System-> Configuration’.

Find ‘Catalog’ in the left menu and select ‘Configurable Swatches’ to proceed with settings :

Configuration area in the Admin Panel

You will see the form with general settings. Choose variant 'Yes' on the top field - it gives a possibility to assign swatches to the appropriate configurable product and view them in the product details.

Enable Swatches in Admin Area

After this you should select configurable attributes, swatches will be displayed for at the product page

Select Attribute as Swatches

Do not forget to press 'Save' button to keep your entry.

You should note, the configurable attributes should meet the following requirements: have the 'Dropdown' type and scope 'Global', being applied to the Configurable Products or All products:

Configurable product requirements

If you performed the correct actions and enable the swatches from your Admin area, you can see the following option in Tools section of Store Manager as an illustration below:

FTP Swatches Browse

Press it to browse FTP swatch images folder. You can preview selected media file on the right panel.

Preview Swatches

To upload your own images to the catalog press the appropriate button at the top and find the necessary illustration.

Choose own swatches

You can add multiple images at once. The images will be uploaded after pressing the next button.

Upload own swatch image

Please note, due to Magento logics, only '.png’ images can be added as product swatches!

Go to your product list and choose the products to which you want to add the appropriate swatches.

To be able to see the swatches general options you can use the context menu in your Product Page:

Swatches Context Menu

Or the image gallery’s lower tab under the product list:

Swatches options

Press 'Generate Swatches' button from the top toolbar to assign the corresponding image as a media pattern.

The program will generate the swatch name automatically from the existing on the FTP swatches list and will consist of the option’s name of all lower-case letters always! separated by a hyphen.

If the attribute's option name is, for example, Sky Blue, the swatch filename should be as follows: 'sky-blue.png'. 'Swatch' marker will be added to the label (see an illustration below).

Swatch label name

Please take into account, in order to get swatches assigned automatically, its name should be identical to attribute value name (for example, for Blue attribute name value the swatch filename should be

'blue.png', for Sky Blue - 'sky-blue.png' etc).

If image filename, associated with attribute value name, does not exist on FTP, you will get the following message:

Generate Swatches Message

- press 'Yes' to manually add swatch image from existing in FTP folder images. FTP Swatches Browser with all swatch images will appear. Double-click the image you want to be assigned to the selected

product and it will be assigned as swatch immediately;

Generate  Swatch Manually

- if you press ‘skip’, no swatch image will be uploaded to the selected product;

- if you choose 'still add' - the program will generate the most suitable pattern of all existing on FTP swatch images or just add the label of swatch filename to the FTP content without an image;

- to abolish your actions press ‘Cancel’ option.

The process of swatch image generation with Store Manager for Magento is shown in the screenshot.

Swatch image generation

During the process of associated products creation it's possible to configure the generation of the appropriate swatches to these products in a single window-form:

Generate swatch image during creation

If necessary, you can remove generated swatch image for the current product, after pressing the appropriate option from context menu (a) or from image gallery toolbar (b):


Delete swatches from context


Delete from the image gallery

You have three variants of your further actions:

    • to delete swatch image for the selected item but keep it on the FTP
    • to erase swatch for product and from FTP content as well
    • cancel the swatch deletion.
Message during swatches deletion

Check whether the assigned images are visible as the swatches in the product details at the front-end. By helping with right-mouse clicking open the context menu of the selected configurable product and

choose ‘View Product Page’ selection:

View product page

You should see an item with the possible examples of swatches under the main details:

Swatches in the Product Page

Use the following guide concerning the basic principles of swatches formation:

How to upload Magento Swatch Images to Configurable Products

By eMagicOne Inc.