Color Swatch Add-on User Guide

Color Swatch Add-on User Guide A guide to using Color Swatch add-on interface Last Updated: February 7, 2018 Version 1.0

2017-2018 Cybage. All rights reserved. The information contained in this document represents the current view of Cybage on the issues discussed as of the date of publication. Because Cybage must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Cybage, and Cybage cannot guarantee the accuracy of any information presented after the date of publication. This document is for informational purposes only. Cybage MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording or otherwise) or for any purpose, without the express written permission of Cybage Color Swatch add-on is a registered trademark of Cybage. Microsoft and Windows are registered trademarks of Microsoft Corporation. All other company, product and brand names are trademarks of their respective owners. Contact Cybage: Cybage Software Pvt. Ltd. Cybage Towers Survey No 13A/ 1+2+3/1 Vadgaon Sheri Pune 411014 Ph: 91-20-66041700 Fax: 91-20-66041701 Technical Support: For technical queries, write to: Support_Magento@cybage.com General Enquiries: For general enquiries, write to: Support_Magento@cybage.com Color Swatch Add-on User Guide i

Color Swatch Add-on User Guide Abstract This user guide addresses end user interaction with the Color Swatch add-on. It provides steps to configure the Color Swatch add-on. ii Color Swatch Add-on User Guide

Table of Contents About This Guide... 1 Chapter 1. Introduction... 3 Features... 3 Benefits... 3 Chapter 2. Administration Management... 4 Back up... 4 Clearing cache... 4 Compiling Magento... 5 Uninstalling the Add-on... 5 Configuring the Color Swatch Add-on... 5 Theme Support... 7 Chapter 3. Color Swatch Setting... 8 Attribute level... 8 Product level...10 Chapter 4. About Cybage... 18 Color Swatch Add-on User Guide iii

Introduction About This Guide This user guide explains the features and functionalities of the Color Swatch add-on. It also provides steps to configure Color Swatch add-on and use the features of the Magento store. Release history Table 1. Release history Release Version Release Date Sections Affected Description 1.0 June, 2014 All Final version of Color Swatch Add-on User Intended audience Guide This user guide is primarily intended for administrators responsible for integration of the Color Swatch add-on with Magento. How this guide is organized? The user guide is divided into the following sections: Table 2. Chapter/Appendix Getting Started Contents and description Brief Description Introduction, features, and benefits. Administration Management About Cybage Configuration details of Color Swatch add-on. Information about Cybage Software Pvt. Ltd Conventions used in this guide The conventions used throughout this guide are as follows: Table 3. Guide Conventions This Indicates... Color Swatch Add-on User Guide 1

Abbreviated menu command Menu commands in text may be abbreviated rather than full. For example, the text may ask you to click Download, and the screen may show a Download Now button. Successive menu choices Successive menu choices may appear with a greater than sign (>) between the items that you will select consecutively. Bold text Text in italics Note This shows the names of menu items, dialog boxes, dialog box elements, and commands. Reference to other documents. Notes contain additional useful information. Pay special attention to information highlighted this way. Send us your comments Send us your comments on Color Swatch Add-on User Guide, version 1.0. Cybage welcomes your comments and suggestions on the quality and usefulness of this publication. Your feedback is an important part of the information used for updating documentation. Please send us your input regarding any of the following: Did you find any errors? Is the information clear? Do you need more information? If so, where should it be? Are the examples correct? Do you want more examples? What features of this manual did you like? If you find any errors or have any other suggestions to improve the quality of this publication, please indicate the chapter, section, and page number (if available). You can submit comments to us at: Support_Magento@cybage.com If you would like a reply, please include your email ID or your name, address, and telephone number. Printing this guide This guide is optimized for printing on Letter page size (8.5 inches by 11 inches). If you would like to print on any other page size, select the Fit to page check box in the Print window before you print this guide. 2 Color Swatch Add-on User Guide

Introduction Chapter 1. Introduction Administrator can use the Color Swatch add-on for configurable products to define their color, related size, and price at Magento store. For example, you can sell t-shirts in two colors and three sizes.the addon is used to define any type of attribute such as size, price, manufacturer, and color. Features The Color Swatch add-on comes with the following set of features: Support multiple swatch images for attribute options Easy management of width and height of swatches Organization of images for the configurable product attributes Support for multiple attribute options Easy management of multiple attributes on a single product Convert product attribute options as swatches on configurable products Customers can view the simple products images based on their selection of Configurable products options Benefits Easy installation and integration Configure products easily to get more business Open source implementation Easy management of color swatches at attribute and product level Color Swatch Add-on User Guide 3

Administration Management Chapter 2. Administration Management This chapter provides configuration details of the Color Swatch add-on on Magento. It describes the following administrative tasks: Back up Clearing cache Compiling Magento Uninstall Add-on Configuring the Color Swatch add-on Theme Support Back up Always take backup of your files and database before installing this extension. It is advisable to test this extension on your development environment in order to detect any conflicts with your existing extensions Clearing cache After installation of the Color Swatch add-on, clear the Magento cache. To clear Magento cache 1. On the System menu, click Cache Management. The Cache Storage Management page opens. Cache Storage Management 2. Click Flush Cache Storage. 3. In the Cache Storage Management toolbar, click Select All. 4. In the Actions list, click Refresh. 4 Color Swatch Add-on User Guide

Administration Management 5. Click Submit. The cache is cleared. Compiling Magento The Compilation feature allows you to increase the performance of Magento. Note: Before making any changes to your Magento installation, you must disable the compilation. To compile Magento 1. On the System menu, point to Tools, and click Compilation. The Compilation page opens. 2. On the Compilation page, click Run Compilation Process. To disable compilation 1. Go to System > Tools > Compilation, and select Disable 2. Go to System > Cache Management, and select Refresh Uninstalling the Add-on You may uninstall the Color Swatch module from Magento Connect. After that you have to manually, run the following queries on your database, to delete the database table entries made by the plugin. We would recommend that this needs to be done by an experienced MySQL developer. Before uninstalling the add-on, take back up your database. Note: If you have used table prefix then replace <PREFIX> with your database table prefix otherwise remove <PREFIX> from the above queries. DROP TABLE `<PREFIX>cybage_swatches_attribute`; DELETE FROM `<PREFIX>core_resource` WHERE `code` = swatches_setup ; DELETE FROM `<PREFIX>core_config_data` WHERE `path` LIKE '%swatches%'; Configuring the Color Swatch Add-on After successful installation of the Color Swatch add-on, the administrator or the seller (based on the seller privileges) can disable or enable administrator configuration. To configure the Color Swatch add-on 1. On the System menu, click Configuration. 2. In the left navigation pane, under Cybage, click Configurable Products Swatches. The Configurable Products Swatches page opens. Color Swatch Add-on User Guide 5

Administration Management Configurable Products Swatches 3. On the Configurable Products Swatches page, provide the configuration details for the Color Swatch add-on. The following table describes the fields that you can view on the Configurable Products Swatches. Table 4. Configure Color Swatch add-on Field Action Replace Drop-Downs with Swatches Change the drop-down option with swatches. Click Yes to enable and No to keep using drop down on front end Display Color Swatches on Product List Pages Image Size of swatches on Product List in px Image Size of swatches on Product Details page in px Enable color swatch option on product list page. Click Yes to enable and No to keep it default Type size of color swatch image in pixel: Give size in numbers in text field. The same number will be used as height and width. Type size of color swatch image: Give size in numbers in text field. The same number will be used as height and width 4. Click Save Config. The Color Swatch add-on is enabled. 5. Create the directory and give the permission to upload images. <Document root>/media/swatches/images and give the permission to upload images 6 Color Swatch Add-on User Guide

Administration Management Theme Support This add-on is developed based on the default Magento theme. Any customized theme may not be supported by this add-on. If you need support for theme related issues, please contact us at: Support_Magento@cybage.com Color Swatch Add-on User Guide 7

Color Swatch Setting Chapter 3. Color Swatch Setting This chapter explains how the adminstrator can define the Color Swatch add-on at the attribute level and at the product level. The add-on works with all types of attributes such as color, size, and manufacture without affecting standard functionality of the attribute. The Add-on improves product presentation by using images instead of plain text. Attribute level Product level Attribute level You can define color swatch at the attribute level. To set the Color Swatch at the attribute level 1. On the Catalog menu, point to Attribute, and then click Manage Attribute. The Manage Attribute page opens. Manage Attribute 2. On the Manage Attributes page, click the required attribute to view its properties. The Edit Product Attribute page opens. 8 Color Swatch Add-on User Guide

Color Swatch Setting Edit Product Attribute 3. On the Properties tab, at the bottom of the page, under Swatches Properties section, in the Use Swatches list, click Yes to replace the default drop down options to swatches for configurable products. 4. On the Manage Label/Options tab, in the Manage Title (Size, Color, etc.) section, enter the label for the attribute that is displayed at Magento store. Note: If you have multi-language stores, enter different labels for different stores. If you leave the store field blank, it displays (admin) label. Edit Product Attribute- Manage titles (Size, Color, etc.) 5. In the Manage Options (values of your attribute) section, define the appropriate value for the selected attribute, and then click Save Attribute. Color Swatch Add-on User Guide 9

Color Swatch Setting Manage Options (values of your attributes) 6. Click Save Attributes. Product level Color swatches can be applied to individual product by overwriting the color swatches which are defined at attribute level. You can define color swatch at product level for the configurable products. To set the Color Swatch at the product level 1. On the Catalog menu, click Manage Products. The Manage Products page opens. 10 Color Swatch Add-on User Guide

Color Swatch Setting Manage Products 2. On the Manage Products page, click Add Product. The New Product screen opens. You will see a screen like below 3. In the Product Type list, select Configurable Product and click Continue. 4. The New Product(Default) page opens. Color Swatch Add-on User Guide 11

Color Swatch Setting Select the attributes that you want to configurable as per the above image. 5. On the Associated Products tab, in the Super product attributes configuration section, select the check box to delete the existing swatches. Figure 8 Super product attributes configuration 6. Click Browse to upload new image for the attribute. If you want to use the color as set in the attribute then do not upload any file here. By default, the attribute s color will be displayed on the product pages. If you upload a new image, then its attributes will be selected instead of the one set at the attribute level (Refer to Figure 6 for setting the image at attribute level) 7. Select the image uploading. If no image is uploaded here and there is no images uploaded at the attribute level, then the options label will be displayed instead of image. 8. Click Save. 12 Color Swatch Add-on User Guide

Color Swatch Setting The details along with the other changes like image, product names etc. are saved. After defining color swatches, the customer can view the Product Listing page, Search page and Product Details page on the Magento store. Customers will be able to view the simple products images after selecting the corresponding option Color Swatch Add-on User Guide 13

Color Swatch Setting Figure 10 Product Details page 14 Color Swatch Add-on User Guide

Color Swatch Setting Figure 11. Search Page 9. It more than one attribute is selected for creating configurable product from admin, and if one of the attribute is not selected for swatches, then attribute swatches will not be available to list page. On the product detail page, the attributes will be shown in the form of swatches or selected list (if that attribute is not selected for swatches option) as shown in the below fig. Color Swatch Add-on User Guide 15

Color Swatch Setting Figure 12. Product list page 16 Color Swatch Add-on User Guide

Color Swatch Setting Figure 13 Product Details Page: 10. On Product Listing Page, without choosing the attribute if user clicks Add to Cart, then it will be redirected to the Product Details Page. Color Swatch Add-on User Guide 17

About Cybage Chapter 4. About Cybage Cybage has a dedicated Center of Excellence (CoE) for e-commerce, carved out of years of extensive experience. More than 15 key clients spread across the globe A team of more than 540 domain experts, comprising Solution Architects, Business Analysts, and Functional Experts Strong knowledge of the domain, business processes, and industry best practices Expertise in multi-tenant, hosted e-commerce solutions Strong organizational, technical, engineering, process, and project management maturity Platform expertise Magento Intershop Hybris Broadleaf Commerce IBM WebSphere Commerce Integration services Search Payments and security Logistics Recommendation Social commerce ERP Omnichannel Unification and centralization of data Development of omnichannel-ready services Seamless user experience across all channels 18 Color Swatch Add-on User Guide