custom options swatch · 2.4 upload extension files to magento web server. we recommend that you...

Custom Options Swatch User manual

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

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


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.


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.


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.


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.


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


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


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.


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


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.


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.


The Custom Options page should look like this:

Now you can save the product by clicking Save in the upper right corner.


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:


And here’s how the selected swatch looks like:

Selected custom option can be displayed as swatch in the shopping cart as well:


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.


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.


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


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:


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.


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 .

custom options swatch · 2.4 upload extension files to magento web server. we recommend that you...

Documents