color swatch v5 - best magento extensions and modules · 2015-12-14 · 1.1 general information...
Post on 20-May-2020
5 Views
Preview:
TRANSCRIPT
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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).
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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).
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
Step 5. Next is the Prices screen, fill out the Price and any additional information
considering price
Optionally enter Meta Information
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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).
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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:
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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)
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
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 .
top related