Introduction

Options / Variations - There is a good explanation on the differences between Options and Variations here.

Home → Item Management → Items → Click on the Item ID you would like to edit

Variations

This is an incredibly powerful tool for catalog users that have Items with variations. It basically allows you to define selectable options for your items that have different flavors (colors, sizes, etc.). Although you could utilize Item Options to fill this need, you wouldn't get the inventory control and reporting that Variations will fulfill.

The variations code will not work if you have the following characters in your item ids: < > & " ' + - (greater than, less than, ampersand, double quote, single quote,plus, minus and spaces)

In general, it's a very bad idea to have these characters in your item ids at all, regardless if you are using variations. The item ids serve as keys and are embedded with html in hundreds of places. Using html special characters greatly increases the likelihood of something breaking.

We receive numerous support calls about this. No spaces allowed. The item ids are concatenated into html element id and class names. Those values are then used in jQuery selectors. The characters above drastically change the jQuery selectors and break the code. Sorry. There is no work around.

An item variation configuration will consist of a 'Parent' item, which contains the variation assignment and is the assigned item to your storefront, and a set of 'Child' items, which are the inventoried items that will be added to the cart after the customer makes their specific variation selection.

Method 1 - Variation Wizard

First click on the new button to create the parent item. Then click on the Options from the menu. (any edits will be saved).

In the Variations section click the Variations Wizard button as shown below.

The wizard will pop up on the screen. Enter the names of the variations for the product and click next as shown below. In the case of this shirt we have Size and Color as our two variations.

Next we enter the values for the Color variation as shown below and click next

Then we enter the values for the Size variation as shown below.

Finally we assign items to the variation matrix. Notice that the system will automatically suggest item IDs for the child items and will create them if they don't exist.

Once the wizard completes the complete matrix will display on the page as shown below.

The item list should now look like the screen shot below.

Method 2 - Item setup without the variation wizard

First click on the new button to create the parent item. Then click on the Options from the menu. (any edits will be saved).

We'll configure the first child item. In this case it is the small black shirt. Shown below are the minimum fields that we will configure on the item. Click the Catalog tab when finished. Your changes will be saved.

To speed things up we will use the copy tool to make six more copies of this item. Check the box and click the copy icon as shown below.

Enter all the additional item ids into the box separated by commas as shown below and click copy.

After the copy operation completes you will see the items in the list. You will need to click on each item and adjust the description until your list looks like below.

Once you have the items created you will now need to create the variation on the parent item and assign the items into the variations. We do this by editing the parent item in this case its item "Earth_Tone_Teapot" and click on Options.

Simply add the variation name into the field provided and click "Add". You will need to do this for all the variation types you have, in this example they will be Color and Size.

After clicking Add a new section will be provided so that Color options can be configured. Simply add your option name and then click "Add New". Once you are done adding in all of your options simply click "Save Variations", this will save and refresh the page.

We will do this for both Color and Size, until we have all of our variation options configured. Once that is complete you can move down to Variation Item Assignment. From here we simply provide an item id and then set the variation options that apply to the item.

Item Variation Assignments

Once you have added all of the items and there variations simply click save and you are ready to go.

Method 3 - Configuring Large Numbers of Variations with Batch Item Import

Obviously there was a lot of clicking to perform the configuration of a single item with variations. The fastest way to configure variations is with a spreadsheet and the batch item import. The easiest way to illustrate the composition of the spreadsheet is with a screen shot of the example configured above.

Obviously there are additional columns in the spreadsheet associated with description, cost, weight, etc, but the example above shows the variation configuration. Notice the parent item always has to come first in the spreadsheet. If you use a naming convention where the child item always has the parent item as a prefix then the nature sorting of your spreadsheet will take care of this requirement. Next there are three columns for each variation: name, parent and value. Make sure the name and parent are consistent for each variation in the spreadsheet. In this example we have Color,SHIRT and Size,SHIRT in colors Z,AA and AC,AD. The variation value columns cover the individual values associated with each child item.

Once your spreadsheet is created you can upload it with batch item import tool.

Sorting Options

Sort Order of the Variation

You can reorder your variations using the "Sort Order" field that appear within each configuration variation.

For example if you preferred to have the customer select their size before being prompted to choose the color. The sort order would be "1" for the "Size" variation and a "2" for the "Color" variation:

Sort Order of the Variation "Options"

Similarly, you can also set the sort order the options to your variations using the "Sort Order" field that appear within the list of options to each variation.

For example you might decide that you prefer to have the "Black" color option to appear first in the variation drop-down menu, to do that simply enter "1" into the Sort Order field for "Black" and "2" for Blue" then click the "Save variation" button.

Drag-and Drop Sorting

Sort Order - Use Drag and Drop!

In addition to the sort order sorting, you can use drag-and-drop within the variation options. To do so, move your cursor in between the "Variation Value" and "Multimedia" columns and the cursor will change to the "hand" then click to hold that variation value and drag it to the location you want it to appear in the list.

Make Default

You can configure a specific variation option as the default option. This will cause the variation to show this choice by default, so the customer would not need to click the drop-down list to make a choice. To set a variation option as the default option, click the "Make Default" button next of the variation option you want to make default.

Deploying the Buy Form

Deploying the form with the variations is quite simple. First click on the [view] link associated with the parent item "Shirt". There is a section of the links page labeled Buy Form as shown below. Copy the content from the buy form to the HTML page on your site. Please note that this form will be very plain and require some styling. You'll notice that this form will have select boxes for each variation, but no option elements specified. Allow the values are dynamically populated by the two JavaScript files loaded at the end of the form. The form only needs to be redeployed to your site if you add/remove a new variation. Simply adding or removing a child item does not require the form to be redeployed.

Once the form is on your site it will look like the following screen shot.

Notice that we have four options for size when the black color is selected, but only three options for size when the blue color is selected. Variations support the concept of not every single combination being possible. The select boxes will update on the fly as the customer chooses options so that there is never an invalid combination of selections that the customer can make.

Troubleshooting

Things to look for if the form is not populating the drop-down menu for the item variations:

Make sure at least one item is configured with inventory in stock or the enable inventory tracking turned off. Otherwise, the javascript that is creating the array of the variations will return a null value.
When testing the variation code is being tested in a local HTML page prior to being publish to your live website, the javascript tagsa below the form code will need to be edited to add the "http:" prefix to the script src URL's.

If you select a large blue shirt and click add to cart you will notice that the child item is added to the cart.

jQuery Dependency

The catalog variation support requires jQuery 1.7.2. The form will automatically detect and include jQuery if it's not already on the page. The code should be backwards compatible with 1.4.2 which you may be using already on your site.

Delete Variations

Use caution here as clicking the "delete" button at the bottom of a variation column will delete the variation and all its values. There is no "confirm delete" dialog.

Delete Items

To remove an Item from the listing, click the "delete" button to the right of the row the item is in. Caution, there is no "confirm delete" dialog. Click the "delete" button to the right of the Item you want to remove. This does not delete the item from your store. It only removes it from the Variations screen. There is no "confirm delete" dialog.

FAQ

Q: I have items configured using item variations, do I configure the sale price only on the parent item?

A: When using variations, it's the "Child" items that eventually get added to the cart, so in order for the sale cost to properly apply to the item the customer is selecting, make sure to apply the sale cost to all children items.

Q: I have items configured using item variations, but I'm not seeing the child items appearing in the drop-down list?

A: If the drop-down list is not being populated, check to see:

You have a parent item and separate child items (you cannot configure the variation configuration on an item assigned as a child item, you'll need a separate parent item and set of child items.)
Make sure that if the child items have "Track Inventory" configured, that the item has allocatable inventory. If the item is out of inventory it will not appear in the variation drop-down list.
Also check to make sure that the child items are not set to inactive.

Browser not supported