We offer complete support for all our extensions, modules and themes for Magento. No extension will be left without an update for a new version. No clients will be left forgotten. Stay in tact with the most recent extensions update and new extensions delivery through our Twitter feed and Facebook page.
Search In Catalog
Colors, Sizes and Materials Swatch v.2.0
1Color swatch configurations
2Attribute icon settings
3Avaliable attribute icons
4Setting up custom attribute icons for a simple product
5Attribute icon on the frontend
6Description window for an icon
7A swatch without avaliable photo
8Different images are displayed on the frontend
12Attributes on a category page
Magento Colors Swatch User Guide
How to Use
Let’s see how this module will look like on your website.
When a customer visits a product page he sees a full range of options to select from: size, color, material and other available parameters.
An icon can be supplied with a description window which includes enlarged swatch and a text message.
If a swatch does not have a sample photo – you can indicate that with a specific message.
To stimulate your customers to make purchases you can also program the module to display a special ‘Only … left in stock’ notification when a specific set of attributes is chosen for a product.
The module also comes with built-in Cloud Zoom and FancyBox plugins.
How to Configure
Now, when the module is installed, it is high time to set up proper configurations. Go to your admin panel to System – Configuration – Colors, Sizes and Materials swatch. There you will see three main sections which make the main module settings. Let’s start with the Colors, Sizes and Materials Swatch section.
This section is comprised of the following options:
- Enabled – select Enable to switch on the module;
- Show not available variants – select Yes if you want to also display items, which are not available in stock;
- Image Switcher Enabled – this option allows changing the image of an item when different attributes are selected on the frontend;
- Attributes that change images – select attributes that will trigger the changing of an image on the frontend. If you have only one attributed selected here, then uploading an image even to one simple product will affect the whole group of simple products which are related to the same attribute. However, if two or more attributes are selected in this field, then you will need to upload an image for each simple product to make the picture change on the fronted upon choosing different attributes. You can also create different sets of attributes for different types of products. For example, in our case we created a separate set of attributes for shoes and a separate set of attributed for clothes;
- Show ‘Photo not available’ message – select Yes if you want to display a specific text for items without an image;
- Message – specify the text which will be displayed on the frontend for items without a photo;
- Product view – this option is inherited from the module ‘Product Zoom Light’;
- Display number of products remaining – enable this option if you want to display a special notification for a product that has only certain number of items remaining;
- Display when number of products left – set the number of remaining items, when the special notification should be displayed;
- Message – enter the text message which should be displayed on the frontend for a product when the specified number of items is left.
- Enable display attributes on products list - enable this option if you wish to show up attribute icons on a category page;
- Attributes – select which attributes should be displayed in a category page;
- Switch image width/height – set up the width and height sizes of a product image on the category page.
If you enable the last section all your products on the category page will be supplied by selected attributes, so your customers will be able to switch between available product options right on your category page, without the necessity of loading the product page.
Next section is Attribute icon.
In this part you can select those attributes which you want to output not as a standard Magento dropdown list but either as an icon or color or text.
Here you can find the following parameters:
- Attributes to replace – select the attributes which you want to be displayed either as an icon or text or color;
- Swatch width/swatch height – set up dimensions of the swatch icons;
- Product list icon width/height – set up dimensions of swatch icons on a category page.
The final section is Product Zoom Light which is responsible for product zoom settings.
The module comes with two zoom technologies: Fancybox and Cloud Zoom which provide perfect solutions for customers to have a closer look into each product you offer.
The settings include the following parameters:
- Image Sizes – specify image parameters on the product page;
- Cloud Zoom – set up parameters for the Cloud Zoom technology;
- Fancybox – set up your preferred parameters for the Fancybox zoom.
Once you are ready with all settings just click Save and the module will start working for you.
How to assign specific icons for an attribute?
If you need to assign specific icons for an attribute (such as color, icon or text) that you are going to use for various products associated with that attribute, you need to go to Catalog – Attributes – Manage Attributes – click the necessary attribute – go to the Attribute Icons tab.
Here you will see the list of options which this specific attribute has. Assigning more options for an attribute will allow you later to use this very attribute for different type of products and items.
Each option has a dropdown list where you can select to use either an image or color or text as a description for an attribute.
The settings allow not only setting a specific color or text as an attribute description, but even to upload different images which will be used as an attribute icon and an attribute description separately.
This is how it will look on the frontend:
In case you do not want a description window to pop-up, simply leave this field empty and do not upload any image for that option.
How to create individual attributes icons for a product?
If you do not want to use default options but wish to assign some specific attribute icons for a particular configurable product go to Catalog – Manage products – click the required configurable product – go to the Attribute Icons tab.
Here you see the list of all available attribute options which you can select and use when creating a simple product.
To create a custom option simply disable the Use Default box and then customize the option to your liking.
This way images uploaded for a specific product will be displayed for that product only, while uploading images for an attribute make them appear for all products associated that attribute.
In case an option does not have an icon yet, then by default it is considered as a text option and the description field will contain just the attribute name.
Setting up different images for category pages and product pages
Module configurations also let you upload and use different images for product pages and category pages. For instance, your category page may show just color icons while the product page may display images for the same attribute.
These configurations are available under the Catalog – Manage products – click a configurable product – go to Attribute icons. In the dropdown list select Color-Category/Image – Product page:
The above settings let you display a color icon on the category page, while the product page will show an image which you download and select here.
If you select – Product page you will be able to assign different images to be used on a category page and product page.
Submit a ticket
Please include your order/license number!
We need to know when the extension was purchased and if you are a real customer.
Please be specific!
We can't help you if we can't understand the problem. Be sure to give us all possible information about the issue.
Please include this information with a ticket to ensure really quick problem solution.
In order to analyze the reasons of the issue and fix anything on your store we often need to access your store.
FTP: xxx.xxx.xxx.xxx (or example.com)
We do not keep your passwords.
And admin access