Color Swatches Pro: Magento Extension by Amasty. User Guide

User Guide: Color Swatches Pro

Page 1

Color Swatches Pro

Magento Extension User Guide

Official extension page: Color Swatches Pro

Support: http://amasty.com/contacts/

http://amasty.com/color-swatches-pro.html


http://amasty.com/

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

Page 2



http://amasty.com/


Page 3

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.

http://amasty.com/


Page 4

After you install the extension, a new tab called ‘Attribute Images’ will appear for attributes.


Please click ‘Save and Continue Edit’ button to save color swatches dimensions. At the next step you need to upload attribute images.

Tick this checkbox before clicking ‘Save Attribute’ button to enable image-based selection of options for configurable product attributes.



At this tab you can specify color swatches size on product and category pages.

http://amasty.com/


Page 5




To set attribute image you can either upload it or simply drag and drop it to the place

To upload images to the necessary attribute please go to Catalog -> Attributes -> Manage Attributes, filter out the Color attribute and click on it.

http://amasty.com/


Page 6




In case you need a solid color for any product attribute you can use our Color Picker option with a color palette

http://amasty.com/


Page 7

Choose the configurable product info that you’d like to replace by simple product info. Multiselect is available.

2. General Settings You can find the extension settings in admin panel -> System -> Configuration -> Color Swatches Pro.

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 ‘No’ to set each price for configurable product manually.



http://amasty.com/


Specify CSS for product image block which is reloaded when customer chooses different color options.

Page 8



2. General Settings

http://amasty.com/


Page 9



2. General Settings

Detect CSS in your Magento theme right from the product page.

http://amasty.com/


Page 10

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.

2. General Settings

Use this option to cross out color swatches of the products that are currently out of stock.

http://amasty.com/


Page 11



See the example of crossed out product that is currently out of stock.

2. General Settings

http://amasty.com/


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.

Page 12

3. Category Grid and Image Size Settings

You can easily specify the product thumbnail size.



To improve category pages performance, set re-indexation feature to ‘Yes’ (see page 13).

http://amasty.com/


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 drop-down and click on the Submit button.

Page 13




http://amasty.com/


Page 14


Set up the dimensions for preview image.



http://amasty.com/


Page 15

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.

http://amasty.com/


Page 16

4. Zoomer Settings

Set various visual effects for the outside zoomer window display.



http://amasty.com/


Page 17

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.



http://amasty.com/


Page 18

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.



http://amasty.com/


Page 19

7. Use price of simple products

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.

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.



http://amasty.com/


Page 20

8. Images of associated products for swatches

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

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.



http://amasty.com/


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.

Page 21

9. Front end examples

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

Dropdown fields are used for selection attributes.



http://amasty.com/


Page 22

Thumbnails carousel with one visible item and enabled pagination.

“Outside” zoom

“Inside” zoom




http://amasty.com/


Page 23

Attribute tooltip on the product page




http://amasty.com/


Page 24

Attribute tooltip on the product list page




http://amasty.com/


Lightbox

Navigation “Previous” button

Navigation “Next” button

Thumbnail helper


Support: http://amasty.com/contacts/ Page 25


http://amasty.com/


Page 26

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.



http://amasty.com/


Thank you!

Your feedback is absolutely welcome!

Should you have any questions or feature suggestions, please contact us at:

http://amasty.com/contacts/

Page 27 Support: http://amasty.com/contacts/


http://amasty.com/contacts/


http://amasty.com/

Marketing

Color Swatches Pro: Magento Extension by Amasty. User Guide