Adding Product Variants to Website Builder for eCommerce (v7)

If you’re using Website Builder to sell products in an eCommerce store, you’ll probably want to add different variations of the same product. For example, if you’re selling shirts in your store you'll want to have more than one size and color available. Luckily, it’s easy to add variations to the products on your list using our Website Builder with up to 200 options available for a single product.

Adding a product variation

First, you will need to add a product. Let’s assume in this case that you are selling a shirt. Start by entering the basic info about it, like the price, description, and a few photos. Then, save the information. After saving it, scroll down and click the Add Product Variants button.

You will type in a name for your variation in the Options Name field. In the case of selling shirts, let’s say our first option is “Size.” Then in the Choices field, you’ll type the different sizes you’re offering, such as small, medium, and large. Once you have added all the options for size, you can click the Add Another Option button if you want to add a different variation as well, such as color. When you are finished adding options, click Save.

Once you have saved, it will show you a table of all the option combinations you have entered, along with other information such as the price. The system assumes that all of the variations have the same as the information you entered when first setting up the product. For example, it assumes that all variations are the same price. If you need to change this information, you can click Edit Variants.

Creating custom variants

In the Edit Variants section, you will see options to change the Price, Weight, Stock, and Visibility of these products. Price is how much you are charging for the item. So, for example, if your red shirts cost more than your green shirts, you can set the pricing to reflect this here. Weight is the shipping weight of the item. Stock is how many you have in stock; please note that this option will only show if you have previously chosen to keep track of your inventory. The last option is Visibility. If you turn the visibility off, then customers will not see this option when they try to make a purchase. This is very useful if, for example, you run out of a certain product and don’t want to advertise it.

Once you click Save, you'll be brought back to the table of options, now with the edited values. If you need to make any changes to the variations you’re offering, you can click the Add/remove options & choices button. Adding new options will delete any edits you have made to price or other options, so keep in mind that you will have to re-add these. 

The third button you will see under the table of options is Reorder Dropdown Values. This changes what order customers will see the options in when they are browing your store. For example, let’s say you want to make sure that small red shirts are the first option customers see in the drop-down menu. To do this, you will click the Reorder Dropdown Values button. You will see all of your options and you will be able to drag and drop them to be higher or lower in the drop-down menu. So you can drag “Small” and “Red” to the top so that these are the first options customers see.


Have more questions? Submit a request


Article is closed for comments.