Colors, Sizes and Materials Swatch v.2.0

  • Magento Colors, Sizes and Materials Swatch v.2.0
    • +$40
    Also available in Magento Bundle with up to 25% discount.

    Community Edition

    1.5.0.*, 1.5.1.*, 1.6.0.*, 1.6.1.*, 1.6.2.*, 1.7.0.*, 1.8.0.*, 1.9.0.*

    Add swatches to configurable products easily with Magento Colors, Sizes and Materials Swatch. Users click visually appealing swatches and product image as well as thumbs change respectively. Swatch icons are uploaded right through the admin panel either for the whole configurable attribute or for a particular product when they are supposed to be different for each product. Swatches of out-of-stock products can be set to be displayed.

    Key features:

    • Replace configurable product options with swatches;
    • Upload swatches both for attributes and products;
    • Swatch icons uploaded in the back office;
    • Change product images and thumbs when applying product options;
    • Configure swatches size;
    • Integrated zoom feature with flexible settings;

    Overall information

    Magento Colors, Sizes and Materials Swatch is an outstanding professional tool to set up Magento configurable products. It is perfect for huge and growing clothes stores or any other store which needs to grant its customer a possibility for great shopping.

    Upload swatch icons easily in the admin office. You may assign swatches to attributes so that they would be displayed globally for all the products that have these attributes enabled. There is also an option of uploading special swatches for particular products.

    Change the size of product images for them to fit your store's theme. And of course enjoy Magento Colors, Sizes and Materials Swatch image zoom bonus.

    • Free upgrades and support
    • 100% open source
    • 30 days money back

    Add Review

    Product Reviews:

    • David

      Feb 04, 2015
      We originally found some glitches happening when this extension was used on a site and accessed by either an iPhone or iPad.

      After raising the issue with the developer, they responded quickly and had the issue resolved within a couple of days.

      Thanks for the quick turnaround!
    • Suyati

      Oct 31, 2014
      A wonderful extension with an excellent support team. They considered a small change request and made the changes very quickly. Keep it up!
    • Seville

      Jun 27, 2013
      Had some problems with the pictures and zoom, but they were very helpful and fixed the problem.
    • Anil Gupta

      Jan 11, 2013
      This extension is great. As we have installed on our server it working fine but was conflicted with our zoom extension and quick-view-pro extension and support team has given great support by doing changes on our server. All issues are resolved by them and all extension are functions properly.

      Keep it up guys.
    • 1
      Color swatch configurations
      Color swatch configurations
    • 2
      Attribute icon settings
      Attribute icon settings
    • 3
      Avaliable attribute icons
      Avaliable attribute icons
    • 4
      Setting up custom attribute icons for a simple product
      Setting up custom attribute icons for a simple product
    • 5
      Attribute icon on the frontend
      Attribute icon on the frontend
    • 6
      Description window for an icon
      Description window for an icon
    • 7
      A swatch without avaliable photo
      A swatch without avaliable photo
    • 8
      Different images are displayed on the frontend
      Different images are displayed on the frontend
    • 9
    • 10
      Cloud Zoom
      Cloud Zoom
    • 11
    • 12
      Attributes on a category page
      Attributes 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.

    Color Swatch on the frontend

    An icon can be supplied with a description window which includes enlarged swatch and a text message.

    Icon description

    If a swatch does not have a sample photo – you can indicate that with a specific message.

    No photo 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.

    Left in stock message

    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.

    Module settings

    • 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.

    Select products attributes

    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.

    Attributes on the category 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.

    Attribute icon

    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;

    Product Zoom Light

    • Cloud Zoom – set up parameters for the Cloud Zoom technology;

    CloudZoom settings

    • Fancybox – set up your preferred parameters for the Fancybox zoom.

    Fancybox configurations

    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.

    Attribute icons

    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.

    Upload images as icons

    This is how it will look on the frontend:

    Images 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.

    Custom attribute icon

    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/SSH access

      FTP: (or

      Login: name

      Password: ****

      We do not keep your passwords.

      And admin access

      login: name

      password: ***

    * Required Fields