color swatch v5 - best magento extensions and modules · 2015-12-14 · 1.1 general information...

Color Swatch v5 User manual

Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

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


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.


2. Installation

2.1 Installation requirements

Color Swatch extension for Magento is encoded via ionCube. To run Color Swatch, you

must have ionCube loader (http://www.ioncube.com/loaders.php) installed on your web

server. For more information about the ionCube loaders, please visit

http://www.ioncube.com 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).


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


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.


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


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.


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


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


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


Step 5. Next is the Prices screen, fill out the Price and any additional information

considering price

Optionally enter Meta Information


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.


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


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


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:


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


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


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


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.


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


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)


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.


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: www.extensionsmall.com .

color swatch v5 - best magento extensions and modules · 2015-12-14 · 1.1 general information...

Documents