- Video Tutorial
- Basic Terms and Definitions
- Variant Groups
- Advanced Options
- Variant Matrix
- Variant Inventory Tracking
Variant options are an integral part of the AmeriCommerce online stores platform. Using variants will reduce the amount of products needed. This provides a simple, easy to use site for potential customers to browse. An example of Product Variants would be a T-Shirt that is offered in different sizes. You would create a Variant Group for "Size" and then create the variants on the product, such as Small, Medium, and Large.
Basic Terms and Definitions
Variant - Smaller differences of a product. Differences such as alternate colors, size, weight, etc...
Variant Group - The functionality that groups Variants together. Here you can set how the variants display, such as in a dropdown or radio button list.
Default Item Text - An option on the variant group. If filled in, the variant choice dropdown will have this text selected as the variant upon page load. This variant is not selectable on the Product Display page.
Surcharge Type - Allows additional or reduced pricing on the variant. Options are Total, + Percent, + Dollars, + Dollars Once, - Percent, - Dollars, - Dollars Once. NOTE: multiple variant groups set to total for the surcharge type on a single product can cause pricing conflicts such as splitting the totals set.
Variant Package - Enable this option if you have a required variant on an item. Does not allow any other variant options associated with the group. Also hides this variant group from the product display page.
Variant Matrix - Used with multiple variant groups on a product. The system creates a quantity input table with all the possible variant combinations. This allows customers to order multiple variant combinations at once. This is great for Wholesale stores.
Variant Swatch - A small picture associated with variant options. These show a visual information about a variant, such as color or style.
Minimum # Selections Required: Sets the minimum number of selections required for this variant group. Minimum and Maximum variants selections are required for the CheckBoxList group. The Variants could be Sauce Type with multiple options, the customer will have to at least choose 1 sauce type.
Maximum # Selections Allowed: Sets the maximum number of selections required for this variant group. Minimum and Maximum variants selections are required for the CheckBoxList group. In the Example of Sauce Type this would most likely be set as a minimum and maximum of 1.
You need to create the Variant Groups before assigning variants to products. Log into the admin panel, then go to Catalog > Variant Groups. You can choose to Edit a variant group, or click the New button to begin a new group.
Here you will want to name the group, and set the display type. The options are:
- DropDown (default option)
- Checkbox List
- RadioButton List
- ItemRepeater (Advanced Option) - Click here for more info.
Now that you have the Variant Groups created, now it is time to set up the variants. To begin, Edit the product you'd like to add, and choose the Options/Variants tab. Here, you can click New Variant, or Edit an existing variant.
First, choose the Variant Group this will fall in. The Label is the actual option that the customer sees and chooses. Use the Surcharge and Surcharge Type fields to increase/decrease the price with the variant. You can do this by a flat dollar amount or percentage.
The Weight and Weight Type field is also there to add or remove some weight from the package if need be. Finally, the Variant Sort Order option changes what order the variants display in.
There are options to include a Variant Swatch and/or a Variant Photo. The Variant Swatches display on the product display page, above or to the right of the Variant option. These are smaller pictures showing a visual representation of the product. Use it to display differences such as color, pattern or style. You can also set the Variant Swatch Color to be a hexadecimal color instead of uploading images.
Choosing a variant option will replace the main product photo with the Variant Photo.
There are a couple more options that can be chosen. You can choose to Hide a variant option here if desired. Setting the variant option as default will select this option when the Product Details page loads. Additionally, you can add an Attribute to a specific variant, useful for filtering.
The Is Variant Package option is intended for specific situations. This will make it the default variant option, and will remove the options to change the variant. The variant option will still show on the shopping cart page and invoices.
Multiple variant combinations can be ordered with the Variant Matrix display. If enabled, this will create a quantity input table of all the possible variant combinations. The product will need to have at least two Variant Groups associated with it for the option to work.
To enable, go to Themes > Edit Theme > Product Details > Basic Settings. Here there is an option for Use Matrix Style Variant Display. Enable this option for the Variant Matrix.
Variant Inventory Tracking
There is also functionality in the Variant system to allow inventory tracking of variants. You will want to read our Variant Inventory Tracking KB for more information on this.
Item Repeater (Advanced Setting)
The variant group type, Item Repeater, allows brands to customize how they display their variants.
Note: this is considered an advanced setting and will require brands to add HTML/CSS to fit their active theme.
We have all new merge codes to go with it:
If not already present, you will need to add the merge, `$$VARIANTCUSTOMITEM$$`, just under the $$VARIANTGROUPCONTROLS$$ inside the variant layout area on the Product Details page.
<div class="Variant mt-2">
Then add the following below the Variant layout area:
<div class="card variant-repeater__card">
<img class="card-img-top" src="$$VARIANTPHOTO$$" alt="Card image">
<p class="card-text" >$$VARIANTNAME$$</p>
The VariantRepeater layout area above is what controls the display of the variant group. You can add your own markup between the layout tags along with the aforementioned variant merge codes.
Brands can display the ItemRepeater on grouped products as well. Add the $$VARIANTCUSTOMITEM$$ merge to the product group specific layout areas under $$VARIANTGROUPCONTROLS$$ just like the above. However, for the Group Products, you will need to add a new layout area outside of the "ProductGroupDetail" layout area.
Linking to a Product Details Page With a Specific Variant Selected
To link to a product details page with a specific variant selected you will need to append the variant inventory ID to the URL for the product.
For Example: https://yourstore.com/outdoor-chair?VariantInventoryID=10
The variant inventory ID's can be found at Tools > Data Export > Product Variant.