This document provides instructions for using the Visualize Your Attributes extension in Magento. It outlines how to enable the extension, create new visual attributes, configure design and color swatch settings, and shows examples of how the color swatches will appear on the front-end. The extension allows creating visual attributes with custom images, color codes, or text icons to represent attribute values and customize their display on product pages, lists, filters and options.

1. Visualize Your Attributes. Color Swatch
User Manual for Magento
Aitoc

2. Aitoc
Table of Content
1. Enabling the extension in Magento.
2. Creating a new visual attribute.
3. Visualize Your Attributes - design settings.
4. Color swatch settings.

3. Aitoc1. Enabling the extension
In System > Manage Aitoc Modules, check
Visualize Your Attributes and click "Save
modules settings" on the top right.

4. Aitoc2. Creating a new visual attribute
Click “Add New” to add a new attribute.
Catalog > Attributes > Visualize Your Attributes

5. Aitoc2. Creating a new visual attribute
Choose the attribute to visualize.
Attribute visuals will appear on product
pages.
Catalog > Attributes > Visualize Your Attributes - Add New

6. Aitoc2. Creating a new visual attribute
You can choose to show in navigation:
(1) icons + text + quantity
(2) icons + text
(3) icons OR text + quantity
(4) icons only
(5) text only
Catalog > Attributes > Visualize Your Attributes - Add New

7. Aitoc2. Creating a new visual attribute
Catalog > Attributes > Visualize Your Attributes - Add New
If you choose “Custom Images”, you’ll be
able to add image icons for values of the
attribute you’re creating / editing.
Click to upload an image.

8. Aitoc2. Creating a new visual attribute
Catalog > Attributes > Visualize Your Attributes > Attribute Visualization Type > Color
If you choose “Color”, you’ll be able to
specify color-code values for the attribute.
Enter color codes.
The extension will help you enter color
codes based on the web color list.

9. Aitoc2. Creating a new visual attribute
If you choose “Text Icons”, you’ll be able to
add geometrical-shape icons with text /
numerals in them for your attribute values.
You can also specify icon and text color.
Catalog > Attributes > Visualize Your Attributes > Attribute Visualization Type > Text Icons
Select colors for text icons.

10. Aitoc3. Visualize Your Attributes - design settings
Visual attributes appear in:
1. Product pages
2. Product list
3. Layered navigation filters
4. Configurable product options
You can specify icon size and font size
separately for each of these places.
System > Configuration > Design > Attribute Icons

11. Aitoc4. Color swatch settings
Here you can add a set of images for each
configurable option.
Important: the extension works for the first
configurable attribute in the product.
Catalog > Manage Products - Any configurable product > Additional images

12. Aitoc4. Color swatch settings
Color swatches - front-end examples.

13. Aitoc
Brought to you by
You can buy Visualize Your Attributes. Color Swatch at
www.aitoc.com/en/magentomods_visualize_your_attributes.html
For questions please email at sales@aitoc.com