Product Variant Overview

• Overview
• Video Tutorial
• Basic Terms and Definitions
• Variant Groups
• Variants
• Advanced Options
• Variant Matrix
• Variant Inventory Tracking

 

Overview

---

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.

 

Video Tutorial

---

 

Basic Terms and Definitions

---

 

Variant Groups

---

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
• QuantityGrid
• ItemRepeater (Advanced Option) - Click here for more info.

 

Variants

---

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.

Variant Pictures

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.

 

Advanced Options

---

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. 

Variant Matrix

---

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: 

• $$VARIANTNAME$$
• $$VARIANTPHOTO$$
• $$VARIANTSWATCH$$
• $$VARIANTPHOTO$$
• $$VARIANTWEIGHT$$
• $$VARIANTWEIGHTYPE$$

 

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. 

<ac:layoutarea id="Variant"> 
<div class="Variant mt-2">
<div><strong>
$$VARIANTGROUPNAME$$ 
$$VARIANTGROUPHEADER$$ 
</strong></div>
$$VARIANTGROUPCONTROLS$$ 
$$VARIANTCUSTOMITEM$$
<ac:visibilityarea id="VariantGroupSwatches"> 
<div class="clearfix">
$$VARIANTGROUPSWATCHES$$
</div>
</ac:visibilityarea> 
$$VARIANTGROUPFOOTER$$
</div>
</ac:layoutarea>

 

Then add the following below the Variant layout area:

<ac:layoutarea id="VariantRepeater">
<div class="card variant-repeater__card">
<img class="card-img-top" src="$$VARIANTPHOTO$$" alt="Card image">
<div class="card-body">
<p class="card-text" >$$VARIANTNAME$$</p>
</div>
</div>
</ac:layoutarea>

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. 

 

 <ac:layoutarea id="ProductGroupDetail">
...
<ac:layoutarea>
<ac:layoutarea id="ProductGroupVariantRepeater">
...
</ac:layoutarea>

 

 

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.