10. Generate Swatches for Configurable Product
Note: this option is available for stores based on 18.104.22.168 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 on the illustration below, you need to set up proper settings in your Admin Panel, firstly.
Go to your back-end area System -> Configuration - > Catalog - > Configurable Swatches:
You will see the form with "General Settings". Choose "Yes" in the top field. This gives the possibility to assign swatches to a releative configurable product and view them in product details.
After this, you should select configurable attributes to use for swatches. This way they will be displayed on a product page.
Do not forget to press the [Save] button to keep your entry.
Note: configurable attributes should meet the following requirements:
- Have the "Dropdown" type and scope "Global"
- Be applied to "Configurable Products" or "All Products"
If you performed correct actions and enabled swatches from your Admin area, you should see the following option in the "Tools" section of Store Manager, as it is shown on the illustration below:
Press [FTP Swatches Browser] to browse FTP swatch images folder. You can preview selected media file on the right panel.
To upload your own images to the catalog you should:
< - Press the corresponding button at the top and find the necessary illustration.
< - To add multiple images at once, press the next button.
Note: due to Magento logics, only .png images can be added as product swatches!
Go to your product list and choose products to which you want to add the appropriate swatches.
To be able to see swatches general options, use the context menu on your Product Page:
You can also use the image gallery’s lower tab under the product list for the same purpose:
Press the [Generate Swatches] button on the top toolbar, to assign the corresponding image as a media pattern.
The program will generate a swatch name automatically from the existing on 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 swatch assigned automatically, its name should be identical to an 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 add swatch image from existing in FTP folder images manually. 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 discard your actions, press [Cancel].
The process of swatch image generation with Store Manager for Magento is shown in the screenshot below:
During the process of associated products creation, it's possible to configure generation of the corresponding 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):
(a) - >
(b) - >
You have three variants of your further actions:
- Delete swatch image for the selected item but keep it on the FTP
- Erase swatch for product and from FTP content, as well
- Cancel swatch deletion.
Check whether the assigned images are visible as swatches in the product details at the front-end. With right-click, open the context menu of the selected configurable product and choose "View Product Page":
You should see an item with the possible examples of swatches under the main details: