Product Variants

SmithCart > Products

SmithCart allows for the assignment of an unlimited number of product variants for any given product. This gives you the ultimate flexibility when it comes to configuring product options with sizes, colors, weight, options, etc.

Contents



Introduction

Product variants are the styles a product comes in. For example, one product that comes in only one style would be a single-variant product. A product that comes in three different styles, such as Red, White, and Blue, would be a product with three variants.

Product variants are defined by their Variant Groups and Variant Names. The following are examples of Product Variant Groups of a product:

  • Size
  • Color
  • Material
  • Style
  • Other (choose a Group Name of your own)

Products Variants on the Product Listing Page

 The following is a screenshot of a Product on the Product Listing page when product variants have been configured.

 

When a product is assigned variants the “Add to Cart” button on the product listing screen automatically changes to “Add Options”. When the user clicks the Add Options button they are taken to the product detail page where they can select product variants.

Products Variants on the Product Details Page

The following is a screenshot of the product detail page where the user can select product variants.

If you have added product variant images, when the user changes the value of the product variant dropdown, radio button or checkbox the product picture will dynamically change.

The sections below will explain each aspect of Product Variants in more detail

[up to contents]



Variant Group Settings

The following settings are available to be configured for Product Variant Groups:

 

Group Name (Required) – The group name is the “type” of variant you are creating for a product. For example, size and color are examples of variant groups.

Group Description (Optional) – Enter the Group Description for the variant group. The Group Description is only used in the admin area to help you identify variant groups during setup. The Group Description is not used in the front end product catalog or checkout.

Group Help URL (Optional) – Enter the full URL (including http://) to a help page on your site that provides variant help. When the group help URL is populated a link will be displayed next to the variant group on the product details page.

Hide (Optional) – Check the hide box to define a conditional variant group. By default conditional variants are hidden and only displayed conditionally based on the selected value of another variant.

[up to contents]



Product Variant Settings

The following settings are available to be configured for Product Variant Groups:

General Setup

 

Sort Order – Order in which the product variants are displayed on the Product Details page. Enter a numeric number from 1 to 999.

Product Variant Group – The “type” of product variant for a product which is displayed next to the product variant on the Product Detail screen. For Example: Size, Color, or Model.

Variant Name – The variant name is the product variants or “option” that is displayed on the product detail page of the cart. For example: Small, Medium and Large are examples of variant names.

Variant Description – The variant description field provides an additional field for variant description information.

Required – When checked the user will be required to choose a product variant before adding a product to the Cart.

[up to contents]



Display Options

 

Display Type (Required) – The group name is the “type” of variant you are creating for a product. For example, size and color are examples of variant groups.

The following options are for product variant display types:

 

  1. Dropdown List – Allows Users to make Variant selections of the associated Variant Group in a dropdown list for users from.
  2. Radio buttons – Displays Variants of the associated Variant Group as a radio button for users to make a selection from.
    • List Columns – Formats the radio button list single column or multiple column layouts.
    • List Direction – Formats the radio button list in either a vertical or horizontal direction.
  3. Checkbox – Displays Variants of the associated Variant Group as a checkbox for users to make a selection from.
    • List Columns – Formats the checkbox list single column or multiple column layouts.
    • List Direction – Formats the checkbox list in either a vertical or horizontal direction.
  4. Grid Layout – Displays Variants of the associated Variant Group in grid format with the following fields:
    • Description (Variant Name)
    • In Stock (Quantity On Hand)
    • Price
    • Sale Price (if any)
    • Buy (Quantity)
  5. Textbox – Displays Variant as a textbox. Currently one textbox is supported per Variant Group.

    Variants defined as textboxes allow the user could enter a value into the textbox that can be used to calculate the total price of the product. For example, the price of fiber optic cable is $5/foot. If the user entered 100 into the textbox the price of the product would be calculated as follows:

    Product Price + (Variant Price x Value entered by user)

  6. Multiline Textbox – Displays Variant as a multiline textbox. Currently one multiline textbox is supported per Variant Group.
  7. Icons/Swatches – Displays a dropdown list and clickable icon image which changes the Main Product Image of the variant.

    For example, if you are selling shirts this feature will allow you to define a set of "Color Swatches" and when the user clicks on one of the swatches the main product image will change to the color selected by the user.

    • Icon Custom Image Options:
      • No Custom Image Options – No Image options will be displayed
      • Add Icon On Left – Displays Uploaded Icon on left side of the image
      • Add Icon On Right – Displays Uploaded Icon on right side of the image
      • Add Icon On Left and Right – Displays Uploaded Icon on both the left and right side of the image
  8. File Upload – Allows your users the option to upload files.

Select Image To Upload – Select a Variant Image to upload. This image will be displayed on the Product Details page.

Select Zoom Image To Upload – Select Zoom Image To Upload.

[up to contents]



Pricing and Weight

 

Price Type – Select the price type you are entering for your variant.

The following Price Type options are available to be selected:

  • No Price Adjustment
  • Absolute Price – When "Absolute Price" is selected, the variant price entered will become the product price when the corresponding variant is selected.
  • Price Adjustment – When "Price Adjustment is selected, the price and sale price entered for the variant will be an adjustment (added or subtracted) to the regular product price.
  • Percent Adjustment – When "Percent Adjustment" is selected, the regular product price will be adjusted by the percent entered in the price field.

Price – Enter the price for the variant. The variant price can be entered as the actual (absolute) price of the product or a price adjustment. If you enter price as an absolute price be sure to select the price type radio button option titled "Absolute Price". If you enter price as a price adjustment be sure to select the price type radio button option titled "Price Adjustment". Variants defined as textboxes allow the user to enter a value into the textbox that can be used to calculate the total price of the product.

Sale Price – Enter the sale price for the variant. The variant sale price can be entered as the actual sale price of the product or a sale price adjustment. If you enter price as an adjustment be sure to check the price adjustment checkbox. Variants defined as textboxes allow the user to enter a value into the textbox that can be used to calculate the total price of the product.

Taxable Amount (Optional) – If the “Taxable Amount” field is populated, the cart will use the “Taxable Amount” field to calculate tax instead of the "Price" field the cart normally uses. Tax is calculated prior to any coupon or discount.

Weight Adjustment (Optional) – Allows for the adjustment of the product weight based on the product variant the user selects. The product weight is used in calculating the total shipping cost of the customer’s order.

Lifecycle Status – Select the lifecycle status to apply to this product variant.

The following Lifecycle Status options are available to be selected:

  • Normal – This is the default setting.
  • Arriving Soon – Coming Soon is defined as a product that is available in the future, for which you have images. Customers cannot order a product with a coming soon status, the Add to Cart button will be hidden and a "Coming Soon" label will be displayed on the list page.

    Note: This option is only available when using the Variant Listing module

  • New – New is defined as a new product in your store.

    Note: This option is only available when using the Variant Listing module

  • Sale – Sale is defined as a unique discount. A "Sale" label will appear next to the item on the Variant list page, product details page and thumbnail swatches. When a Sale Variant is added to the Cart the Price used will be dependent on the Price Type and Main Product Price.

    Note: The "Enable Sale Prices" setting needs to be enabled to use this option.

  • Reduced – Reduced is defined as a unique discount. A "Reduced" label will display next to the item on the Variant List page, Product Details page and thumbnail swatches.

    Note: This option is only available when using the Variant Listing module

  • Clearance – Clearance is defined as a unique discount for a product with a clearance status. A "Clearance" label will display next to the item on the Variant List page, Product Details page and thumbnail swatches.

    Note: This option is only available when using the Variant Listing module

[up to contents]



Inventory

 

Variant SKU – A unique number that identifies your product variant.

Quantity On Hand – Current available product variant quantity available in inventory.

For more info and set up instructions on Variant Inventory, see the Variant Inventory Management section below.

[up to contents]



Conditional Variants Settings

 

Conditional Variants – Allows you to define one or more conditional variant groups. Conditional variant groups are dynamically displayed based on the selected value of another variant.

For more info and set up instructions on Conditional Variants, see the Conditional Variants section below.

[up to contents]



Other Variant Fields

 

Featured Variant – When checked displays featured variant in the Smith Slider module featured tab.

Notes – Allows you to enter product variant notes.

[up to contents]



Adding Product Variants

Once you have created your product, the you are now ready to create a Product Variant

To start setting up product variants click on the “Variants” button on the menu bar located on the Product Setup screen as follows:

When you click the “Variants” button on the top menu bar of the product setup screen the following screen will be displayed:

 

 

To add a product variant takes the following steps:

Step 1 - Add Variant Group

Each product variant must be in a variant group. (If you have already added a Variant Group you can skip this step.)

To define variant groups click on the “Variant Group” tab on the Variant Management screen as follows:

To add a new variant group, click on the “Add Variant Group” button and following screen will be displayed:

 

Enter the Variant Group information then click the "Add Variant Group" button to save.

Step 2 - Add Product Variant

To add a product variant click the “Add” button from the Variant Management screen

The add product variant screen will be displayed as follows:

Simply start entering your product variant information into the text boxes and selecting the variant options you want from the checkboxes and radio buttons and click the “Add New Product Variant” button to save.

[up to contents]



Edit a Variant

To edit a Product Variant from the Manage Products page, check the checkbox next to the Product then click the “Edit” button or simply double-click on the Product Variant you wish to edit in the grid.

 

Make the changes to the product variants and click the update button to save your changes. Click the cancel button to cancel your changes.

[up to contents]



Delete a Variant

To delete a Product Variant from the Manage Products Variants page, check the checkbox next to the Product Variant you wish to delete then click the “Delete” button to delete the selected Products.

[up to contents]



Conditional Variants

The conditional variant group allows you to define a variant group to be dynamically displayed based on the selected value of a regular variant.

When a conditional group is configured for a variant with the hide checkbox checked, by default, it will not display on the product detail page until the value of the variant that it is conditional upon is selected.

To configure a conditional variant group take the following steps:

Step 1 - Configure Variant Group

Navigate to the variant group setup screen and enter your variant group name and check the “Hide” checkbox.

Step 2 - Configure Conditional Group for Variant

Navigate to the variant setup screen to the "Conditional Variants" section.

The list box on the left titled “Variant Groups” contains a listing of all Variant Groups currently setup in your store.

The list box on the right titled “Conditional Variant Groups” contains a listing of the Variant Groups you have selected as conditional variant groups.

To create add a Conditional Variant Group do the following:

  1. In the list box on the left, highlight the group you want to add as a conditional group
  2. Click the arrow button pointing to the right >>
  3. Click the “Update” button and the bottom to save
 

Conditional Variants – Product Configurator

There are many useful scenarios for conditional variants, one example is a product configurator similar to what most of us have used if you have ever bought a laptop or server online at Dell or CDW.

For example, if you are at the Dell website and configuring a new server and you select the option for an IDE controller, the web page will dynamically display IDE hard drive options. If you choose a raid controller it will show you SCSI hard dirves. In this example you would define variants in the cart as follows:

Regular Variants - Hard Drive Controllers

Variant Group

Variant Name

Display Type

Conditional Group

Hard Drive Controller

IDE Controller

Radio Button List

IDE Hard Drives

Hard Drive Controller

RAID Controller

Radio Button List

RAID Hard Drives

 
 

Conditional Variants - IDE Hard Drives

Variant Group

Variant Name

Display Type

Conditional Group

IDE Hard Drives

320 GB IDE Hard Drive

Radio Button List

 

IDE Hard Drives

500 GB IDE Hard Drive

Radio Button List

 

IDE Hard Drives

750 GB IDE Hard Drive

Radio Button List

 
 
 

Conditional Variants - SCSI Hard Drives

Variant Group

Variant Name

Display Type

Conditional Group

SCSI Hard Drives

720 GB IDE Hard Drive

Radio Button List

 

SCSI Hard Drives

900 GB IDE Hard Drive

Radio Button List

 

SCSI Hard Drives

1.2 GB IDE Hard Drive

Radio Button List

 
 
 

Conditional Variants – Example 2

An online window and door distributor is selling windows and doors online. SmithCart conditional variants allow one variant to depend on the value of another which are mutually exclusive. For example, the variant group “Door Track Type" is defined as the type of track that a hanging door uses to install into a ceiling. There are three ways that these doors are connected into the ceiling. You can use either the standard track that comes with the door at no charge, buy a track that installs flush with the ceiling called a "Recessed track", or use "Curved Track" if the door closes around a bend. These three choices are mutually exclusive. If you use standard track, you can't have recessed track. If you have curved track, you can't have either recessed or standard. All three of these types of track have different prices based on the number of feet ordered. When you select one type from the variant drop down, the appropriate "conditional variant" opens up to allow the user to enter the number of feet of track of the type selected in the dropdown. The number of feet is then multiplied to by the price per foot and added to the base price.

[up to contents]



Copy Variants

When you "Copy” a Variant the program will copy all the product variants selected from the variant grid to the product chosen in the dropdown list.  To copy a Product Variant take the following steps:

Step 1 - Navigate to the Source Manage Product Variants

The first step to copying a Variant is to go to the Manage Variant screen of the Variants that you wish to copy.

 

Step 2 - Select the Variants

The next step to copying a Variant is to select which Variants you would like to copy from the Variant grid. To select a Variant, check to the checkbox next to the Variant.

 

Step 3 - Select the Destination Product

The next step to copying a Variant is to select which Product you would like the selected Variant(s) to be copied to. To select a Product, click the "Copy" button from the top of the Variant grid and choose the Product from the dropdown list.

 

Step 4 - Copy the Variant(s)

The last step to copying a Variant is to copy the selected Variants to the selected Product. To copy the Variants, click the "Copy" button next to the Product dropdown list at top of the Variant grid.

[up to contents]



Product Variant Inventory

SmithCart allows you to configure product variant inventory on an unlimited number of product variant combinations.

Enabling Product Variant Inventory Management

In order for the cart to manage your product variant inventory you need to enable the “Inventory Management” features in the Store Settings under the General Cart setup section. When “Enable Inventory Management” is enabled the cart will check for available quantity on hand, if quantity on hand for a product variant is less than the quantity the user has added to the cart, then the cart will display an “Out of Stock” message and not allow the user to proceed past the cart screen.

Configuring Product Variant Inventory

Variant Inventory can be configured the following 2 ways

One way of using Variant Inventory is to use the Quantity on Hand and SKU on the "Edit Product Variant" screen above. When a Product and multiple Variants are purchased the Quantity on Hand for each individual Variant will be decremented and the SKUs of the chosen Variants will be concatenated and saved with the Order.

The second option of using Variant Inventory is to configure a Quantity on Hand and SKU for each Variant combination using the Variant Inventory Management screen. To load the Variant Inventory Management screen click the “Variant Inventory” tab on the Manage Product Variant screen.

Click the “Add Variant Inventory” button and following screen will be displayed:

 

Variant Checkbox List – Check one or more checkboxes next to the variant name to define the variant(s) that define a unique inventory item.

Product Variant SKU – A unique number that identifies your product variant.

Quantity On Hand – Current available product variant quantity available in inventory.

To setup variant inventory check variants, enter sku and quantity on hand and click "Save".

[up to contents]