Color Swatch v5. User manual

Transcription

1 Color Swatch v5 User manual

2 Table of contents 1. Overview 1.1 General information 1.2 About this manual 2. Installation 2.1 Installation requirements 2.2 Installation instructions 3. Creating an Attribute 4. Assigning Swatch Images to Attribute Options 5. Creating an Attribute Set 6. Creating a Configurable Product 7. Add the Associated Products 8. Color Swatch Settings 8.1 General 8.2 Popup Info Box Settings 8.3 Custom Stock Status 8.4 Product List Swatches 8.5 "Shop By" Settings 9. Advanced Features 10.More Information

3 1. Overview 1.1 General Information Color Swatch is Magento extension that improves the look of your online store and it is easy to install and integrate without any programming knowledge. It can be used together with Magento s default drop down boxes on configurable products and, most importantly, it is compatible with all versions of Magento. Our new Color Swatch combines all features of our previous Swatch extensions, such as Product List and Detail Page Swatches, and also includes some very useful new ones. Color Swatch extension shows your product attribute options as swatches on configurable products. This also means that you can use Color Swatch extension for any type of attribute (size, manufacturer, etc.) and not just the color. In addition, Color Swatch changes the product images and prices, as well as the more views images depending on the swatch selection. It can be applied to multiple attributes of a single product and you can upload a different swatch image for each attribute option. You can also set up different swatch images for normal, hover, active and disabled state of attribute options and configure swatch image size via Magento administration. Also, pop up boxes are shown on swatch hover, with additional details of the swatch selection 1.2 About this manual This user manual is intended to be used as a step-by-step guide for installing and configuring Color Swatch v5 extension for Magento.

4 2. Installation 2.1 Installation requirements Color Swatch extension for Magento is encoded via ioncube. To run Color Swatch, you must have ioncube loader ( installed on your web server. For more information about the ioncube loaders, please visit or contact your webmaster. 2.2 Installation instructions In most cases the extension comes in a.zip file ready for extraction to your computer or web server. To install the extension you should extract the files from the archive to your local computer or web server and copy them to the root folder of your Magento website. By default the Color Swatch extension is installed in the Magento s default package and theme ( /default/default/ ). If you are using a custom package and/or theme on your Magento website, you will have to copy the Color Swatch extension files to appropriate package / theme folders. When you copy the files, log in to your Magento admin panel and go to System>Configuration. There should be the Color Swatch Settings tab(3) in the left-hand menu in Extensionsmall section. This tab opens the settings page for Color Swatch extension(4).

5 Go to Catalog(1)>Manage Color Swatch(2) to open the Swatches page. Here you will be able to upload the swatch images for each of your attribute options (3)(4)(5).

6 If you installed the extension on a new Magento installation that has no products, but only default attributes, you ll notice that you don t have any attribute options available on the Swatches page. You need to create attributes that you want to use on your Magento website, and assign attribute options to them. If you installed the extension on a Magento system that already has products and attributes and attribute sets, you ll probably see quite a few attributes on the Swatches page where you ll be able to assign swatch images to each of those attribute options.

7 3. Creating an Attribute Step 1. Choose Catalog > Attributes > Manage Attributes, then click on the Add New Attribute Step 2. Enter the Attribute Code (2) and set the following attribute properties: Scope: Global Catalog Input Type for Store Owner: Dropdown (3) Apply To: All Product Types or Configurable Product (4) Use To Create Configurable Product: Yes (5) Step 3. Click Save and Continue Edit in the upper right corner, or click on the Manage Label/Options tab on the left

8 Step 4. Enter the Titles (1) for the attribute, and labels for all attribute options (2). Step 5. Select the Default attribute option and Save. To effectively use attribute, it is best to add it to the attribute set. 4. Assigning Swatch Images to Attribute Options Step 1. Choose Catalog > SMD ColorSwatch to access the swatches settings. Step 2. Click on the "Browse" button (1) next to the desired attribute option to upload swatch image and optionally enter title label (2) for each value.

9 Step 3. Repeat for all attribute options that you want to upload a swatch image to, and click "Save" in the upper right corner Step 4. You should be able to see the swatch image for every attribute option. 5. Creating an Attribute Set For assigning an attribute to Configurable Products it is necessary to add the attribute to the attribute set. Step 1. Choose Catalog > Attributes > Manage Attribute Sets > "Add New Set" Step 2. Name the Attribute Set and Save

10 Step 3. Drag the Attribute (1) from Unassigned Attributes list to appropriate group on the left Step 4. Save the Attribute Set 6. Creating a Configurable Product Step 1. Select Catalog > Manage Products and click "Add Product" button

11 Step 2. Set the Attribute Set to the one you created (1) and Product Type to Configurable Product (2) and Continue Step 3. Check the box next to the Attribute you want to be configurable and Continue Step 4. Fill out the following fields: Name, SKU, Status, Tax Class, Visibility and/or other information about the product

12 Step 5. Next is the Prices screen, fill out the Price and any additional information considering price Optionally enter Meta Information

13 Step 6. Upload and assign Images for this Configurable Product Step 7. In Description tab add information about your product which will be shown on Product page Step 8. In Color Swatch tab you can enable/disable the following options: -Enable Extensionsmall ColorSwatch -Show attribute on Product list Page -Enable Extensionsmall Zoom Step 9. You can set the custom "Out Of Stock Message" to be displayed in Custom Stock Status tab.

14 Step 10. Set the inventory options, set store in Websites tab and select you product categories in Category tab Make sure you click "Save and Continue Edit" before you go to Associated Products tab. 7. Add the Associated Products Now you need to create Simple Products for every attribute option of your configurable products Step 1. Select the first attribute option from the attribute drop-down (1) and enter necessary information in fields in "Quick simple product creation" box and click on Quick Create

15 Step 2. Repeat this process for every attribute option you want that is available on you configurable product (2)(3)(4). Step 3. Click Save and Continue button in the upper right corner. All your simple products should now be visible on the lower part of the Associated Products tab page. Step 4. If you want Color Swatch extension to change the main image of the product when the option swatch is selected you should upload images for each of the associated products that represent attribute option by selecting the Edit option (1). Step 5. You can upload as many images as you want, but make sure you have selected the image you want to be the main one (1).

16 Step 6. Repeat this step for every of the associated products. Step 7. Hit the "Save" button in the upper right corner The product page should now look something like this:

17 8. Color Swatch Settings Go to System > Configuration > SMDesign ColorSwatch to set the additional options of the color swatches 8.1 In General box you can set the following options: a) Enable Color Swatches on Product page by selecting "Yes" in "Show ColorSwatch" field. Otherwise color swatches will be replaced by Magento default drop-down selection b) Show Magento default drop-down in addition to Color Swatch by selecting "Yes" in the "Show Drop-Down Select boxes" field c) Set the Swatch image width and height in pixels individually

18 d) Select whether you want More View images to be updated when different swatches are selected. When set to Yes more view images will be updated when user select different swatches. e) Set the number of attributes shown per page in backend

19 8.2 Popup Info Box Settings a) To show Popup Info Box when user hovers the swatch image select "Yes" in "Show Popup Info Box" field (2) b) Choose "Use Info text from config." from Text to show in Popup Info Box drop-down c) Enter the text you want in the Info text box that is just below d) You can choose to show swatch description in pop-up box (the text you enter in the label field underneath each swatch in Catalog > SMDesign Color Swatch page) e) Set the Popup image width and height in pixels

20 8.3 Custom Stock Status a) Enable custom "Out Of Stock Message" for simple products (1) b) Type your own default Out of Stock (2) and Not Available message(3) 8.4 Product List Swatches - show color swatches on your category product list pages in both grid and view mode.

21 a) To enable product list swatches, go to System>Configuration and select Color Swatch Settings tab from the left-hand menu. b) Open the Product Catalog Page settings box c) Set Show Color Swatch on product page to Yes (2) d) Set the other options including to show more options available link, number of displayed swatches and Product Image height and width. e) Save your configuration f) Now you can set which product will be displayed with swatches on the product list page. Go to Edit next to the desired product and on the Color Swatch tab there should be Show attribute on Product list page. Set the option to Yes

22 8.5 "Shop By" Settings To turn on Shop By settings, go to Configuration>Color Swatch Settings and then open Shop By settings box(1). a) To display swatches in Shop By box(1), select "Yes" in "Show Swatches in 'Shop By'section" drop-down (2) b) To show swatches in Currently Shopping By box, select "Yes" in "Show Swatches in'currently Shopping By' section" (3) c) Choose Shop By box layout type between List and Grid (4) 9. Advanced Features Go to Catalog>SMD ColorSwatch to access the Swatches page, and then click on Advanced settings (1)

23 Here you can assign separate swatches for active(2), hover(3) and disabled state(4) of the attribute option. By clicking on the browse buttons next to each of the attributes options/values you can upload special swatches for active state from your local computer.

24 Once you ve uploaded the images, click the Save button in the upper right corner. On the product page it looks like this: When the user hovers over the swatch with their mouse cursor, the hover swatch will be shown in pop-up, but only if that option is selected in popup info box settings (2). In case the certain option is out of stock or disabled, the disabled swatch will be shown 10. More information For more information about Color Swatch v5, or any other Magento extension by ExtensionsMall, please visit our website: