Custom Options
Swatch
User manual
Table of contents
1. Overview
1.1 General information
1.2 Key features
1.3 About this manual
2. Installation
2.1 Disabling compiler and cache options
2.2 Check your current theme/package
2.3 Extracting the extension files
2.4 Upload files to web server
3. Configuration
3.1 Upload swatch images
3.2 Create a simple product
3.3 How are swatches displayed in front-end?
4. Settings
4.1 Show custom option swatch in shopping cart
4.2 Adjust swatch image size
4.3 Set custom options as required
4.4 Rearrange the order of swatches
4.5 Set the price modifiers
5. Custom Options Swatch and Magmi importer
6. More information
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
1. Overview
1.1 General information
Custom Options Swatch is an extension for Magento that allows you to assign any custom
option you want to any of your products. The custom options are displayed as clickable
images instead of Magento’s default selection, which makes your store more engaging and
visually appealing. Custom Options Swatch does not require any additional plugins or
coding.
1.2Key features
•
Show custom options of your products as swatch images l
•
Easily set the swatch label
•
Set the custom options as required
•
Adjust the swatch images size and order
•
Can be used on most Magento product types
•
Optionally show custom swatches in the shopping cart
•
Add the price modifiers which update depending on selected swatch
•
Import swatches in bulk via Magmi (Magento Mass Importer)
•
With built-in Simple Configurable Product feature you get the flexibility of
configurable products with direct control over options of associated simple
products
1.3About this manual
This user manual is intended to be used as a step-by-step guide for installing and
configuring Custom Option Swatch extension for Magento.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2. Installation
In most cases the extension comes in a .zip file ready for extraction to your computer or
web server.
2.1Before extracting the files you should make sure that
compilation and caching options are disabled.
Compilation: Log into your Magento admin panel and go to
System>Tools>Compilation. If the Compiler Status does not read "Disabled", click
the Disable button in the upper right corner.
Cache options: Go to System>Cache Management to view the current status of your
cache. To disable cache options click Select All on the left side, and from the drop-down
Actions menu select Disable, then Submit.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2.2Check which package/theme your Magento website uses.
By default, Magento uses default package/theme structure unless you installed a custom
package/theme.
To check your current package/theme, go to System>Configuration and click Designon
the left-hand menu
If the Current Package Name is "default", you are using the default package. If it isn't,
please take a note of the package you are using.
On the same page, in the Themes box, you'll see the name of the theme your Magento
website is using. If the fields are blank, your current theme is default. If not, please take a
note of your current theme.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2.3 Extract the extension files to your local computer.
If your Magento website doesn't use the default package, browse the extension files,
navigate to /app/design/frontend/ folder of the extracted extension files, and rename the
default folder to your package name.
In case your Magento doesn’t use the default theme navigate to
/app/design/frontend/defaultor your package name/ folder and rename the default
folder to match the name of your theme.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
2.4 Upload extension files to Magento web server.
We recommend that you log out of administration and log back in when you install Custom
Option Swatch extension to your Magento or you could be presented with 404 page when
trying to save the extension settings.
After upload is complete, open your Magento admin panel in web browser and go to
System> Configuration. There should be the Custom Option Swatch tab under Catalog
section in the left-hand menu.Click on it to open the Custom Option Swatch settings page
To make sure the extension is installed properly go to Catalog>Custom Option Swatch
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
If the Custom Option Swatch menu item is missing from the Catalog dropdown and you
can't access the Swatch Management screen, something went wrong with the installation.
Please review the steps described above
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
3. Configuration
3.1Upload swatch images
In order to use Custom Option Swatch you must upload swatch images first. Go to
Catalog>Custom Option Swatchand click the New Swatch (Texture) button in the upper
right corner.
Fill out the label and select the swatch image that you want to upload from your computer,
then hit the Save and Continue Edit button in the upper right corner of the page.
Add swatch page will show up:
Fill out the label and select the swatch image that you want toupload from your computer,
and then click the Save and Continue Edit button in the upper right cornerof the page.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
When the page reloads it should look like this:
You should be able to see the swatch image that you uploaded and the label you entered.
Repeat the process for all the swatches you would like to add.
Go back to Catalog>Custom Option Swatchand you should be able to see all the
swatches that you’ve just created
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
3.2Create a simple product to test the extension
Go to Catalog>Manage Productsand click Add Product in the upper right corner. On the
New Product settings page select “Default” for the attribute set and “Simple Product” for
product type and Continue.
Fill out the required fields and enter any additional information.
Next, go to Custom Option Swatch tab and click Add New Option.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
Fill out the Title of the custom option and in Input Type dropdown select Swatch Selection.
A new area with Select Swatches button will appear.
Click Select Swatches and select the swatches you want to add to this product by ticking
the checkbox next to the swatch name. ClickAdd Selected Swatches to Options.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
The Custom Options page should look like this:
Now you can save the product by clicking Save in the upper right corner.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
3.3 How do Custom Option Swatches look like in your online store?
Here’s how the product custom option swatches look like on the public product details
page:
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
And here’s how the selected swatch looks like:
Selected custom option can be displayed as swatch in the shopping cart as well:
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4. Settings
4.1 Show custom option swatch in shopping cart
By default, when customer adds the product with custom options to shopping cart,
selected custom option will be displayed as a swatch image. To change that, go to
System>Configuration and select the Custom Options Swatch from the left-hand menu.
From "Show in Shopping Cart as" drop-down choose Option Value and selected custom
option will be displayed as a swatch label.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4.1 Adjust swatch imagesize
Go to System>Configuration and select the Custom Options Swatchtab. Hereyou can
adjust swatch image width and height in pixels
4.3 Set custom options as required
Go toCatalog>Manage Products and then click Edit next to the product you want. Select
the Custom Options tab from the left-hand menu, find the desired optionand choose "Yes"
from the "Is Required" drop-down.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
Your customers will have to select a custom option before purchasing the product:
4.4 Rearrange the order of swatches
Go toCatalog>Manage Products and then click Editnext to the desired product. Set the
order swatches will be displayed in by entering the appropriate numbers in Sort Order
fields
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
4.5 Add the price modifiers
On the same page you can set the price modifier for each option. Here’s how swatches look
like with the price modifiers:
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
5. Custom Options Swatch and Magmi importer
Magmi (Magento Mass Importer) supportsMagento default custom option types, however
it is possible to use it for importing custom option swatches too.
1. Create swatch options; it is very important to assign proper name to swatches,since we
will use swatch name to connect them with product custom options. You can import
swatch images using Custom Options Swatch Importer
2. Import products using Magmi tool. Here is an example of code (part from CSV file) to
import product that have “swatch” custom option:
store;websites;attribute_set;type;category_ids;sku;name;weight;price;Color:swatch:1;Size:drop_down:1
admin;base;default;simple;4;SK00001;Test product;1;10;Red|Blue|Green|White;S|M|L|XL|XXL
After you finish 2nd step products will appear under Catalog->Manage products section,
however they will not have assigned images for custom options.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved
3. Open Catalog>Custom Option Swatches->Magmi repair tool and import same file
that you used to import products.
After process is finished a report message will be displayed with number of processed
products and how many of them are successfully repaired.
4. Now edit product and open “Custom Options” tab; images for custom options should
be displayed properly
Since this process involves operations with data base we recommend that you always
create data base backup in case that something went wrong or you want to restore to
previous point. “Repair tool” uses simple code and read/write only within plugin tables, also
it provide solid performances while keeping low memory usage during repair process.
6. More information
For more information about Custom Options Swatch, or any other Magento extension by
ExtensionsMall, please visit our website:www.extensionsmall.com .
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved