Color Swatches Pro. Magento Extension User Guide. Official extension page: Color Swatches Pro. User Guide: Color Swatches Pro

Transcription

1 Color Swatches Pro Magento Extension User Guide Official extension page: Color Swatches Pro Page 1

2 Table of contents: 1. How to upload images for attributes General Settings Category Grid and Image Size Settings Zoomer Settings Lightbox Settings Carousel for thumbnails Use price of simple products Images of associated product for swatches Front end examples Selection of configurable products on category page Page 2

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. Page 3

4 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. Page 4

5 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 Page 5

6 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 Page 6

7 You can find the extension settings in admin panel - > System -> Configuration -> Color Swatches Pro. 2. General 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. Set Yes to use only images for selection of configurable product options. Choose the configurable product info that you d like to replace by simple product info. Multiselect is available. Page 7

8 2. General 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. Page 8

9 2. General Settings Show prices of simple configurations associated with configurable products (the example of Actual Price ). Page 9

10 2. General Settings Show prices of simple options associated with configurable products (the example of Price Difference ). Page 10

11 2. General Settings Specify CSS for product image block which is reloaded when customer chooses different color options. Page 11

12 2. General Settings Detect CSS in your Magento theme right from the product page. Page 12

13 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. Page 13

14 2. General Settings See the example of crossed out product that is currently out of stock. Page 14

15 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 16). You can easily specify the product thumbnail size. Page 15

16 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 Page 16

17 3. Category Grid and Image Size Settings Set up the dimensions for preview image. Page 17

18 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. Page 18

19 4. Zoomer Settings Set various visual effects for the outside zoomer window display. Page 19

20 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. Page 20

21 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. Page 21

22 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. Page 22

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

24 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 Page 24

25 9. Front end examples Outside zoom Inside zoom Thumbnails carousel with one visible item and enabled pagination. Page 25

26 9. Front end examples Attribute tooltip on the product page Page 26

27 9. Front end examples Attribute tooltip on the product list page Page 27

28 9. Front end examples Lightbox Navigation Previous button Navigation Next button Thumbnail helper Page 28

29 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. Page 29

30 Thank you! Should you have any questions or feature suggestions, please contact us at: Your feedback is absolutely welcome! Page 30