Products – Add variants

At any time you can «add» one or more variants to a product and «edit» them, sort them and display the corresponding product preview or delete entire variant groups.

After logging into Designer, follow these steps:

1. Navigation

You begin on the home page of Designer's editor and are thus in the «Site editor» view. Click left on the menu item «Store».

2. Product overview

You will be automatically redirected to the «Product Overview» page. Click on the desired article or click on the «3-point symbol» and select «Edit».

3. Product variants

In the product detail view that now opens, switch to the «Variants» menu item and then click on the «Add product variants» button.

4. Enter variants

Under «Options name», give a name to the variant («Colour», for example). 

Under «Choices», you can now enter the relevant variants. Enter a variant and then press «Enter». Once you have added all of the variants, click the yellow «Save» button.

5. Add additional variants

You will now be redurected to the «Variants overview page» of the corresponding product. The variants you have just entered are displayed here.

If you now want to enter further variant groups, click on the button «Add / Remove Option».

Now enter another option as explained under point 4 (here e.g. size).

Once you have entered all options with the corresponding variants, click on the yellow «Save» button.

You can confirm the warning message that is now displayed by clicking on the «Add option» button if you want to enter another variant.

All possible selections are now created automatically from both variants. You will immediately be taken to the «Variants overview page» of the corresponding product. All variants (combinations of color & size) are now displayed here.

6. Edit variants

To edit the detailed information of the variants, click on the «Pen» icon next to a variant entry.

In the popup window that opens, you can now adjust the desired values per variant option, such as:

• SKU - are generated automatically, can be adjusted as required
• Price - adjustable per variant
• Weight - adjustable per variant
• Stock - enter the warehouse stock of this product variant
• Visibility - activate / deactivate the product variant

Click on the yellow «Save» button.

You will immediately be taken to the «Variants overview page» of the corresponding product. All adjustments are immediately updated for all variants.

7. Reorder the dropdown values

If you now want to adjust the order of the variants per option, click on the button «Reorder dropdown values».

Now drag and drop the desired variant to the new location and save the order by clicking on the «Save» button.

8. Preview

If you would now like to view the product and all of its variants as it will appear in your store, click on «Preview» at the top of the page.

You will now see a preview of your store with the product details view.

To return to the administration page, click «Return to edit» at the top of the page.

9. Delete entire variant groups

To remove a variant group, click on the «Add / Remove Option» button on the variant overview page.

Click on the «Waste» symbol in the popup that opens to delete or remove the corresponding variant group.

A warning message appears. If you confirm this by clicking on the «Delete option» button, all stored variant details (such as article number, price, weight, etc.) are deleted.

If you are sure that you no longer need this opiton (here e.g. colour), confirm the deletion by clicking on the button «Delete option».

Confirm the deletion of the variant option by clicking the yellow «Save» button here.

The Colour option is now automatically removed from all variants. You will immediately be taken to the «Variants overview page» of the corresponding product.

To update the other variants again in price, weight and stock quantity, you can «edit» them again.