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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-store-navigation.jpg.pagespeed.ic.ggeefVK3fz.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-overview.jpg.pagespeed.ic.HbI69Z8dxw.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-button.jpg.pagespeed.ic.xXqRiEvJ0K.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-add.jpg.pagespeed.ic.QiAq3D5xGn.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-more.jpg.pagespeed.ic.RLs-yWm_F1.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-more-add.jpg.pagespeed.ic.ghUqvnZDrV.jpg)
You can confirm the warning message that is now displayed by clicking on the Add option button if you want to enter another variant.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-more-alert.jpg.pagespeed.ic.mASsNc5te2.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/designer-shop-product-variants-overview.jpg)
6. Edit variants
To edit the detailed information of the variants, click on the Pen icon next to a variant entry.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/designer-shop-product-variants-edit.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-edit-details.jpg.pagespeed.ic.3xRugB4FIP.jpg)
You will immediately be taken to the Variants overview page of the corresponding product. All adjustments are immediately updated for all variants.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/designer-shop-product-variants-updated.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/designer-shop-product-variants-sort-button.jpg)
Now drag and drop the desired variant to the new location and save the order by clicking on the Save button.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-sort.jpg.pagespeed.ic.i1s_BO0y-p.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/designer-shop-product-variants-preview-button.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-preview.jpg.pagespeed.ic.NpHFy8YlQR.jpg)
9. Delete entire variant groups
To remove a variant group, click on the Add / Remove Option button on the variant overview page.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/designer-shop-product-variants-delete-button.jpg)
Click on the Waste symbol in the popup that opens to delete or remove the corresponding variant group.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-delete-select.jpg.pagespeed.ic.n4Sp6woTD8.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-delete-alert.jpg.pagespeed.ic.Uzg7qgmxiK.jpg)
Confirm the deletion of the variant option by clicking the yellow Save button here.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-delete-save.jpg.pagespeed.ic.vRPWVrDdf_.jpg)
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.
![](https://www.hoststar.at/sites/default/files/en/support/products/designer/shop/xdesigner-shop-product-variants-delete-successful.jpg.pagespeed.ic.DPAXeWgLfl.jpg)