Color Swatches Pro: Magento Extension by Amasty. User Guide.

96,403 views
106,449 views

Published on

Color Swatches Pro is a Magento color selector module which presents configurable products on a new level by animating boring text attributes. Be creative in presenting products to stand out in competitive crowd.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
96,403
On SlideShare
0
From Embeds
0
Number of Embeds
86,158
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Color Swatches Pro: Magento Extension by Amasty. User Guide.

  1. 1. 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/
  2. 2. 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 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  3. 3. Page 3 1. How to upload images for attributes User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ To upload images to the necessary attribute please go to Catalog -> Attributes -> Manage Attributes, filter out the Color attribute and click on it.
  4. 4. Page 4 After you install the extension, a new tab called ‘Attribute Images’ will appear for attributes. 1. How to upload images 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ At this tab you can specify color swatches size on product and category pages.
  5. 5. Page 5 1. How to upload images for attributes User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 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.
  6. 6. Page 6 1. How to upload images for attributes User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ In case you need a solid color for any product attribute you can use our Color Picker option with a color palette
  7. 7. Page 7 Choose the configurable product info that you’d like to replace by simple product info. Multiselect is available. 2. General SettingsYou 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  8. 8. Specify CSS for product image block which is reloaded when customer chooses different color options. Page 8 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 2. General Settings
  9. 9. Page 9 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 2. General Settings Detect CSS in your Magento theme right from the product page.
  10. 10. 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’. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 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.
  11. 11. Page 11 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ See the example of crossed out product that is currently out of stock. 2. General Settings
  12. 12. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ To improve category pages performance, set re-indexation feature to ‘Yes’ (see page 13).
  13. 13. 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 3. Category Grid and Image Size Settings User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  14. 14. Page 14 3. Category Grid and Image Size Settings Set up the dimensions for preview image. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  15. 15. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Choose Zoom window position and insert corresponding position number in the field.
  16. 16. Page 16 4. Zoomer Settings Set various visual effects for the outside zoomer window display. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  17. 17. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  18. 18. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  19. 19. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  20. 20. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  21. 21. 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: skinfrontenddefaultdefaultcssamastyamconf.css Dropdown fields are used for selection attributes. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  22. 22. Page 22 Thumbnails carousel with one visible item and enabled pagination. “Outside” zoom “Inside” zoom User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 9. Front end examples
  23. 23. Page 23 Attribute tooltip on the product page User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 9. Front end examples
  24. 24. Page 24 Attribute tooltip on the product list page User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 9. Front end examples
  25. 25. Lightbox Navigation “Previous” button Navigation “Next” button Thumbnail helper User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Page 25 9. Front end examples
  26. 26. 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  27. 27. 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/ User Guide: Color Swatches Pro

×