10. Generate Swatches for Configurable Product
Note, this option is available to stores based on 188.8.131.52 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.
Go to your back-end area ‘System-> Configuration’.
Find ‘Catalog’ in the left menu and select ‘Configurable Swatches’ to proceed with settings :
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.
After this you should select configurable attributes, swatches will be displayed for at the product page
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:
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:
Press it to browse FTP swatch images folder. You can preview selected media file on the right panel.
To upload your own images to the catalog press the appropriate button at the top and find the necessary illustration.
You can add multiple images at once. The images will be uploaded after pressing the next button.
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:
Or the image gallery’s lower tab under the product list:
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).
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:
- 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;
- 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.
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:
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):
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.
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:
You should see an item with the possible examples of swatches under the main details: