Color Swatches Pro
Magento Extension
User Guide
Official extension page: Color Swatches Pro
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 1
Table of contents:
1. How to upload images for attributes …..…………………………………………….…3
2. General Settings ……....…………………….……..……………………………………….…7
3. Category Grid and Image Size Settings…….………………………………………....12
4. Zoomer Settings……………………………………………………..………………………...15
5. Lightbox Settings ……………………………………………………………………………..17
6. Carousel for thumbnails……………………………………………………..…….……....18
7. Use price of simple products……………………………………………………………....19
8. Images of associated product for swatches…………………………………………..20
9. Front end examples …..……………………………..……………………………………….21
10. Selection of configurable products on category page.…..………………....…..26
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 2
1. How to upload images for attributes
To upload images to the necessary
attribute please go to Catalog ->
Attributes -> Manage Attributes,
filter out the Color attribute and
click on it.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 3
1. How to upload images for attributes
Tick this checkbox before clicking
‘Save Attribute’ button to enable
image-based selection of options for
configurable product attributes.
Please click ‘Save and Continue Edit’
button to save color swatches
dimensions. At the next step you
need to upload attribute images.
After you install the
extension, a new tab
called ‘Attribute Images’
will appear for attributes.
At this tab you can specify
color swatches size on
product and category pages.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 4
1. How to upload images for attributes
To upload images to the necessary
attribute please go to Catalog ->
Attributes -> Manage Attributes, filter
out the Color attribute and click on it.
To set attribute image
you can either upload it
or simply drag and drop
it to the place
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 5
1. How to upload images for attributes
In case you need a solid
color for any product
attribute you can use our
Color Picker option with
a color palette
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 6
You can find the extension settings in admin panel > System -> Configuration -> Color Swatches Pro.
2. General Settings
Set ‘Yes’ to use only images
for selection of configurable
product options.
If you choose ‘Yes for All
Products’ the prices for
configurable products will be
automatically taken from
simple products.
Choose ‘For Specified Products’
to set manually the products
where the prices for
configurable products will be
automatically taken from
simple products. In this case
you should tick on the
checkbox ‘Use price of simple
products’ on the product
settings page.
Choose the configurable
product info that you’d like
to replace by simple product
info. Multiselect is available.
Choose ‘No’ to set each price for
configurable product manually.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 7
2. General Settings
Specify CSS for product image block
which is reloaded when customer
chooses different color options.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 8
2. General Settings
Detect CSS in your Magento theme
right from the product page.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 9
2. General Settings
By default the extension displays
‘Reset Configuration’ link on front
end for each configurable product.
By clicking it, a customer can reset
his attribute selections. If you
would like to disable this feature,
turn this setting to ‘No’.
If set this option to ‘Yes’, the
extension will automatically
select values for attributes
which have only one option
available.
Use this option to cross out
color swatches of the products
that are currently out of stock.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 10
2. General Settings
See the example of crossed out
product that is currently out of
stock.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 11
3. Category Grid and Image Size Settings
Set this option to ‘Yes’ to show
color swatches and enable
customers to select them on
category pages and search results.
Choose AJAX mode to speed up
category pages download.
To improve category pages
performance, set re-indexation
feature to ‘Yes’ (see page 13).
You can easily
specify the product
thumbnail size.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 12
After you’ve set the Indexation
option to ‘Yes’ (page 12) please go
to System -> Index Management.
Tick Amasty Color Swatches Pro,
choose Reindex Data in the dropdown and click on the Submit
button.
3. Category Grid and Image Size Settings
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 13
3. Category Grid and Image Size Settings
Set up the dimensions
for preview image.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 14
4. Zoomer Settings
If ‘Enable “Zoom” Feature’
is set to ‘Yes’, zoom effect
will be activated for product
images on front end.
There are three types of zoom
available: Outside , Inside and Lens.
Choose Outside zoom to show zoomed
product image in a separate window.
Inside Zoom will display zoomed
elements of product images right in
the main product image window.
Choose Zoom window
position and insert
corresponding position
number in the field.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 15
4. Zoomer Settings
Set various visual effects for
the outside zoomer window
display.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 16
5. Lightbox Settings
Set this feature to ‘Yes’ to
enable lightbox effect when
customers open full-size
images.
With circular lightbox,
customers can view product
images in non-stop circle.
If set this option to “Yes”
thumbnail helper will appear
in lightbox. The helper shows
thumbnails of all available
product images.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 17
6. Carousel for thumbnails
Set ‘Enable “Carousel” Feature’
to ‘Yes’ to show product
thumbnails in an attractive
carousel.
Choose how many items should be
visible in the carousel at the same
time.
This feature activates circular
carousel. It means customers will
be able to endlessly list product
thumbnails in the carousel.
This option allows you to
display pagination right under
the thumbnail carousel.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 18
7. Use price of simple products
To enable usage of simple product prices
for a configurable product, please go to
Catalog->Manage Products and open the
configurable product for which you would
like to enable this feature.
Switch it to ‘Yes’ to use prices
of simple products instead of
setting the prices for
configurable product manually.
For more details please see
page #7 of the user guide.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 19
8. Images of associated products for swatches
The extension allows you to use images of
associated products for swatches of one
attribute. E.g. you can use the images for
attribute color. For this aim please go to ‘Edit a
configurable product’ and open ‘Associated
Products’ tab.
Tick ‘Use image from product’
next to the attribute for which
you would like to use the images
of simple products as swatches.
NOTE: This option will be
enabled only in case you’ve
ticked the checkbox ‘Use images
for selection of configurable
product options’ (see page 4 of
the user guide).
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 20
9. Front end examples
Here’s an example of extension usage. These are
two screenshots of the same product. The extension
enables you to show images and descriptions of the
simple products configured by customers.
Dropdown fields are used
for selection attributes.
By default image selections are highlighted by yellow frame,
you can modify the frame look by editing the following css file:
skin\frontend\default\default\css\amasty\amconf.css
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 21
9. Front end examples
“Outside” zoom
“Inside” zoom
Thumbnails carousel with
one visible item and
enabled pagination.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 22
9. Front end examples
Attribute tooltip
on the product
page
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 23
9. Front end examples
Attribute tooltip on
the product list
page
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 24
9. Front end examples
Lightbox
Navigation
“Previous” button
Navigation “Next”
button
Thumbnail helper
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 25
10. Selection of configurable products on category page
You can let customers select
options and add configurable
products to cart right from
the category page.
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 26
Thank you!
Should you have any questions or feature suggestions, please contact us at:
http://amasty.com/contacts/
Your feedback is absolutely welcome!
User Guide: Color Swatches Pro
Support: http://amasty.com/contacts/
Page 27