2

Table of Contents

Introduction to Colors, Sizes and Materials Swatch v.2.0 .............................................. 3

How to Install and Deactivate ......................................................................................... 4

How to Configure ............................................................................................................ 6

How to Use ................................................................................................................... 19

3

1. Introduction to Colors, Sizes and Materials Swatch v.2.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.

4

2. How to Install and Deactivate

Step 1. Check Permissions.

Make sure the ''app'' and ''skin'' directories of your Magento and all directories inside them

have full written permissions or set permissions on each directory equal to 777 or 0777.

Important! Change all permissions back after installation.

Read more about permissions here.

Step 2: Use FTP client to upload all folders from the zip package to your Magento site root

folder. Be sure that you upload them to the correct directories.

Step 3: Login to your Magento administration panel

Step 4: Refresh cache (go to System > Cache Management and select Refresh) and disable

compilation (go to System > Tools > Compilation and select Disable)

Step 5: Relogin to admin panel (log out and back into Magento Admin Panel).

Step 6: Go to System > Configuration > Colors, Sizes and Materials Swatch and choose the right

settings of extension.

Recommended: You may go to the frontend and try to check out. This will help you to be sure that

Referral Bonus and Reward System is working.

Step 7: Go to System > Tools > Compilation and select Enable.

5

How to Deactivate

Step 1. Disable Extension.

Log into Magento Admin Panel and go to System → Configuration → Colors, Sizes and

Materials Swatch → Settings

Select "Disable" to deactivate the extension. Click “Save Config” button. The

extension is now deactivated.

Step 2. Clear cache.

Go to System → Cache Management. Clear the store cache.

6

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

7

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;

8

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.

9

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.

10

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;

11

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

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

12

Once you are ready with all settings just click Save and the module will start working for you.

13

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.

14

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.

15

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.

16

How to create individual attribute 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.

17

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.

18

If you select Image-Category/Image – Product page you will be able to assign different images to be

used on a category page and product page.

19

4. How to Use

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

20

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.

21

To stimulate your customers to make purchases you can also program the module to display a special

22

‘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 which are so much loved by

23

users.

24

Do you have questions about extension configurations?

Contact us and we will help you in a moment.

25

Linked

Our Office: M.Bogdanovicha 130, Minsk, Belarus

We look forward to your feedback. Comments, opinions and suggestions are

largely appreciated. Read our blog and follow us on Facebook, Twitter, Google+

and LinkedIn to know BelVG latest news, analytics and discount offers. See you

online!

BelVG blog http://blog.belvg.com Google+ page http://gplus.to/BelVG

Facebook page http://facebook.com/BelVGcom In page http://linkedin.com/company/belvg

Twitter page http://twitter.com/BelVG_com Skype store.belvg

E-mail store@belvg.com Phone US: +1 650 924 9963