Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

128,112 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.

  • Be the first to comment

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. Price Settings…………………………………………………………………………………….11 4. Category Grid and Image Size Settings…….………………………………………....16 5. Zoomer Settings……………………………………………………..………………………...21 6. Lightbox Settings ……………………………………………………………………….……..23 7. Carousel for thumbnails……………………………………………………..…….…….....24 8. Settings for image label………………………………………………………………………25 9. CSS Selectors for reloadable information………………………………………….….27 10. Use price of simple products………………………………………………………….....29 11. Images of associated product for swatches………………………………………….30 12. Front end examples …..……………………………..……………………………………..31 13. Selection of configurable products on category page.…..………………....…..36 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. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  8. 8. Page 8 2. General Settings User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ If the option is enabled, product images will be reloaded once the first attribute is selected (first values of other attributes will be chosen). If a product has only one configurable attribute in the drop-down, it will be automatically selected.
  9. 9. Page 9 2. General Settings User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Set the option to ‘yes’ to display out of stock product options as crossed-out. Enable/disable swatches slider on product view pages.
  10. 10. Page 10 2. General Settings User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ See the example of crossed out product that is currently out of stock.
  11. 11. Page 11 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 3. Price Settings 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.
  12. 12. Page 12 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 3. Price Settings If you show simple options of configurable products in drop-downs, you can enable prices display for them. Choose whether to show actual prices for each configuration or the price difference. Set the option to ‘Yes’ if you don’t use drop-downs to show simple options. In case the option is enabled the prices of simple options will be displayed in a swatch title (see the example).
  13. 13. Page 13 Show prices of simple configurations associated with configurable products (the example of ‘Actual Price’). User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 3. Price Settings
  14. 14. Page 14 Show prices of simple options associated with configurable products (the example of ‘Price Difference’). User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 3. Price Settings
  15. 15. Page 15 See the example of prices displayed as swatch titles. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 3. Price Settings
  16. 16. 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 16 4. 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 17).
  17. 17. Page 17 4. Category Grid and Image Size Settings Set the option to ‘yes’ to limit the number of swatches visible on category pages. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Specify the number of swatches/images visible on a category page.
  18. 18. 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 18 4. Category Grid and Image Size Settings User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  19. 19. See the example of limited swatches display . Page 19 4. Category Grid and Image Size Settings User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  20. 20. Page 20 4. Category Grid and Image Size Settings Set up the dimensions for preview image. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  21. 21. Page 21 5. 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.
  22. 22. Page 22 5. Zoomer Settings Set various visual effects for the outside zoomer window display. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/
  23. 23. Page 23 6. 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/
  24. 24. Page 24 7. 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/
  25. 25. Page 25 8. Settings for image label Set the option to ‘yes’ to display a text label for zoomed images. User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Choose either top or bottom position for a text label. Configure display settings like opacity, text and background color.
  26. 26. Page 26 8. Settings for image label User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Show text labels together with zoomed images.
  27. 27. Page 27 9. CSS selectors for reloadable information User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ In case everything works correctly, you don’t need to change these settings.
  28. 28. Page 28 User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ If one of the blocks chosen in the ‘Reload Product Information’ option doesn’t reload properly, please specify your own data in the CSS Selectors tab. 9. CSS selectors for reloadable information
  29. 29. Page 29 10. 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 #11 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/
  30. 30. Page 30 11. 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/
  31. 31. 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 31 12. 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/
  32. 32. Page 32 Thumbnails carousel with one visible item and enabled pagination. “Outside” zoom “Inside” zoom User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 12. Front end examples
  33. 33. Page 33 Attribute tooltip on the product page User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 12. Front end examples
  34. 34. Page 34 Attribute tooltip on the product list page User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ 12. Front end examples
  35. 35. Lightbox Navigation “Previous” button Navigation “Next” button Thumbnail helper User Guide: Color Swatches Pro Support: http://amasty.com/contacts/ Page 35 12. Front end examples
  36. 36. Page 36 13. 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/
  37. 37. Thank you! Your feedback is absolutely welcome! Should you have any questions or feature suggestions, please contact us at: http://amasty.com/contacts/ Page 37 Support: http://amasty.com/contacts/ User Guide: Color Swatches Pro

×