Product Options

Understanding Product Options

Product Options are displayed to the customer on the Product Details page. Options can be drop down menus, check boxes, radio buttons or even text boxes. They may be used for allowing the customer to choose Size, Color etc.

Navigate to Inventory > Product Options

At the top of this page, you will see Options Categories and Options tabs. These two tables Options and Option Categories work together as follows:

The Option Categories table specifies the name of the list. For example: Size, Color.

The Options table specifies the actual choices in the list. For example: Small, Medium, Large OR Blue, Red, Yellow.

Options may also be grouped into another organization structure when displayed by using the HeadingGroup field of the Option Categories table. Please note the following examples:

• HeadingGroup - Colors
• OptionCategories - Stripe 1 Color, Stripe 2 Color

• HeadingGroup - Size
• OptionCategories - Shirt Size 1, Shirt Size 2

Under Inventory ⇒ Product Options, before you can create the product options, you need to create the category they will belong to under the Option Categories tab.

EXAMPLE: To create a drop down menu option for Size:

In the Option Categories table:

1. Set the Heading Group to Size.
2. Set the OptionCategoriesDesc to Size
3. Set the AboutOptionCategories to N/A
4. Set the DisplayType to DROPDOWN
5. Add the new record.

Now in the Options table

1. Set the OptionCatID field to that of the Option Category you just created
2. Set the OptionDesc field to Blue
3. Set the PriceDiff field to 0 (meaning no cost difference for this color)
4. Set the ArrangeOptionsBy field to 10
5. Add the new record.
6. Repeat steps 1-5 (changing the OptionDesc field to Red, Yellow, etc. and also changing the ArrangeOptionsBy field to 20, 30, etc. in the order you want them to appear)

How do I sell an optional product at a discounted price if a customer buys it along with another product?

Set up the first product - ProductCode:BICYCLE and ProductPrice:$200

Set up the second product - ProductCode:HELMET and ProductPrice:$75

We want to sell the HELMET for $50 only if the customer purchases the HELMET along with the BICYCLE. So, now you want to add an option to the BICYCLE product and simply set the field PriceDiff to 50.00 and the field IsProductCode to HELMET. This way, when added to cart, the customer will only pay $50.00 for the HELMET. You can also enable the configuration variable in your store called Config_EnableDisplayOptionProducts to enable a clear breakdown of options which are actually products in the cart.

JumpToProductCode

This field of the OPTIONS table is useful to have the first drop down menu choices basically jump to a different product. For example, if your first option drop down determines what productcode should be added to cart, and the rest of the options are simply attributes to any of these products, then you will want to fill in the JumpToProductCode field of each OPTION in your first drop down menu. On the customer side, when selecting a choice from the first drop down menu(or radio buttons) and then clicking either Update price or Add to cart button, the system will jump to the other product code first, then apply all the attributes you selected to that other product, and either add it to the cart, or if you clicked Update price it would take you to that other product's page.

Color Swatches and Alternate Views

In version 3.0 and 4.0, you are able to add color swatches and alternate view images for each of your products.

Adding Color Swatches

Color swatches can be added by creating new image files for each of the options available for the products and then uploading them to /wwwroot/photos/options/.

The three files need to be named as follows:

• Tiny Swatch image: productcode-optionid-S.jpg (25x25)
• Medium Thumbnail: productcode-optionid-T.jpg (300x300)
• Large Photo: productcode-optionid.jpg (500x500)

The sizes listed are the store defaults. You may use other sizes for the images if you changed the sizes when adding the original product photos.

There are no Configuration Variables needed for color swatches.

Adding Alternate Views

To add alternate views for your product you will need to first specify a title for the alternate views in the Configuration Variable Config_ProductPhotos_AlternateViews_Title. Then create three photos with the following names and upload them to /wwwroot/photos/:

• Small Swatch: productcode-3S.jpg (75x75)
• Medium Thumbnail: productcode-3T.jpg (300x300)
• Large Photo: productcode-3.jpg (500x500)

The sizes listed are the store defaults. You may use other sizes for the images if you changed the sizes when adding the original product photos.

Inventory Control for Options

Using SmartMatch™ Technology:

This feature is designed to manage inventory for your options. The following assumes that you've already created Options & Option Categories.

1. Go to Inventory > Product Options, Click on Option Categories tab, click an Option Category to edit it. Set the Display Type field to DROPDOWN_SMARTMATCH (SmartMatch™ Technology)
2. Go to Inventory > Products, click on a Product to edit it. Fill in the OptionID(s) field(in the Product Options section) with the options. Check the Enable Options Inventory Control check box. Click the SAVE CHANGES button. This will generate the inventory control table below the product(in the Inventory Control grid section)
3. If you would like to keep track of stock status, you will need to specify a unique ProductCode for each combination in the Inventory Grid ProductCode field. By default, the Inventory Grid ProductCode is set to the ProductCode of the parent product. Click Save Changes to Inventory Control Grid

   Note: To make this super easy, enable the configuration variable Config_SmartMatch_AutoCreateChildInventory. This will generate new products named intelligently with the productcode as the prefix. If you already generated the inventory control grid, try this:

   1. Copy the OptionIDs
   2. Remove them, uncheck the Enable Options Inventory Control and click Save Changes
   3. Paste them back in the Option IDs field and click Save Changes

   Note: If you do not need to keep track of stock, you may leave the ProductCodes set the same as this parent product.

4. To prevent ordering of combinations you do not carry, simply set the StockStatus field to 0 or just erase the contents of the appropriate Inventory Grid ProductCode field in this inventory control list.

IsProductCode:

The IsProductCode field of the Options table is another way to control inventory.

For example, if you sell computers and you have an option for the customer that says Choose a Monitor and one of the choices is Sony 19-inch LCD Monitor, you can fill the IsProductCode field for this option to be SONY-19LCD. This ProductCode must exist in your database. So, if a customer purchases the computer and happens to choose the Sony 19-inch LCD Monitor as one of the options, the inventory will be deducted appropriately for that monitor in your store.