Firstly, if you haven´t done yet, <a href="https://help.sitedu.de/articles/the-site-dude-online-shop-store-settings-f0a2d0-39ac1" rel="noreferrer" class="PlaygroundEditorTheme__link">set up your general store settings</a>. You can add new product moving the cursor to toolbar on the left and selecting "Add to cart" button. Fill up requested data like the product name, price, and thumbnail and press the "Add product" button. <img src="https://help.webwave.me/lib/dkwr2z/add-to-shoping-cart-l9s9hnvd.gif" alt="" width="inherit" height="inherit"> <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Settings for the "Add to cart" element</h2><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Add a product</h3> 1. Select "Add to shop cart" button from the toolbar on the left side of the builder. 2. Enter the product name, price, description, thumbnail, you can also send a message after purchase. When you click on&nbsp;more options, you can add and manage variants. <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Availability&nbsp;- set the availability of your product in stock.</li><li value="2" class="PlaygroundEditorTheme__listItem">Delete&nbsp;- button that allows you to delete the product.</li><li value="3" class="PlaygroundEditorTheme__listItem">Thumbnail&nbsp;- optionally, you can add a thumbnail of your product, which will be displayed in the cart. preview, the 3rd step of your order and in the sent order summary email.</li><li value="4" class="PlaygroundEditorTheme__listItem">Product name&nbsp;- define the name of your product, which will be displayed during ordering.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Gross price - assign the price of the product.</li><li value="6" class="PlaygroundEditorTheme__listItem">TAX %&nbsp;- if a different vat is applicable for the service/product, enter it here.</li><li value="7" class="PlaygroundEditorTheme__listItem">Product description&nbsp;- add a description of your product, which will be displayed in the 3rd step of the order under the product name.&nbsp;</li><li value="8" class="PlaygroundEditorTheme__listItem">Message sent after purchase&nbsp;- in this step you can add an additional message to the customer, which will appear in the order summary email sent, e.g. a link to a digital product.</li><li value="9" class="PlaygroundEditorTheme__listItem">Product variations&nbsp;- adding product variations allows us to sell one product in different sizes or colors without having to create a separate article for each variation</li><li value="10" class="PlaygroundEditorTheme__listItem">Track quantity&nbsp;- set the quantity of the product in your inventory.&nbsp;</li><li value="11" class="PlaygroundEditorTheme__listItem">Specify shipping method&nbsp;- select a shipping method for your product, this feature allows you to sell digital products as well as physical products on one page.&nbsp;</li><li value="12" class="PlaygroundEditorTheme__listItem">Specify weight&nbsp;- specify the weight of your product so that the customer can choose the appropriate shipping method depending on the weight.</li></ul> &nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Edit existing product</h3>1. Select a button, which is assigned to the product.2. In Settings Panel go to "Edit product". <img src="https://help.webwave.me/lib/dkwr2z/shop4-l9myvmof.png" alt="" width="inherit" height="inherit"> &nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Edit button style</h3>Add to shop cart button has exactly the same features as a regular button. If you don't know how to edit it, read this article on the&nbsp;<a href="https://help.sitedu.de/articles/the-button-element-f0a2d0-65be4" rel="noreferrer" class="PlaygroundEditorTheme__link">button element of the SiteDu.de builder</a>.&nbsp;&nbsp;

Learn about the Add to Cart element and how to add products in the SiteDu.de builder

Firstly, if you haven´t done yet,[set up your general store settings](https://help.sitedu.de/articles/the-site-dude-online-shop-store-settings-f0a2d0-39ac1). You can add new product moving the cursor to toolbar on the left and selecting "Add to cart" button. Fill up requested data like the product name, price, and thumbnail and press the "Add product" button.  
  
![](https://help.webwave.me/lib/dkwr2z/add-to-shoping-cart-l9s9hnvd.gif)

## Settings for the "Add to cart" element

### Add a product

1\. Select "Add to shop cart" button from the toolbar on the left side of the builder.

2\. Enter the product name, price, description, thumbnail, you can also send a message after purchase. When you click on****more options****, you can add and manage variants.

* ****Availability****\- set the availability of your product in stock.
* ****Delete****\- button that allows you to delete the product.
* ****Thumbnail****\- optionally, you can add a thumbnail of your product, which will be displayed in the cart. preview, the 3rd step of your order and in the sent order summary email.
* ****Product name**** - define the name of your product, which will be displayed during ordering.
* Gross price - assign the price of the product.
* ****TAX %**** - if a different vat is applicable for the service/product, enter it here.
* ****Product description**** - add a description of your product, which will be displayed in the 3rd step of the order under the product name.
* ****Message sent after purchase**** - in this step you can add an additional message to the customer, which will appear in the order summary email sent, e.g. a link to a digital product.
* ****Product variations**** - adding product variations allows us to sell one product in different sizes or colors without having to create a separate article for each variation
* ****Track quantity**** - set the quantity of the product in your inventory.
* ****Specify shipping method**** - select a shipping method for your product, this feature allows you to sell digital products as well as physical products on one page.
* ****Specify weight**** - specify the weight of your product so that the customer can choose the appropriate shipping method depending on the weight.

### Edit existing product

1\. Select a button, which is assigned to the product.

2\. In Settings Panel go to "Edit product".  
  
![](https://help.webwave.me/lib/dkwr2z/shop4-l9myvmof.png)

### Edit button style

Add to shop cart button has exactly the same features as a regular button. If you don't know how to edit it, read this article on the[button element of the SiteDu.de builder](https://help.sitedu.de/articles/the-button-element-f0a2d0-65be4).

<a href="" target="_self" class="PlaygroundEditorTheme__link">How to enable the WebWave cart?</a><a href="https://help.webwave.me/default-tax-rate" target="_self" class="PlaygroundEditorTheme__link">Default tax rate.</a><a href="https://help.webwave.me/how-to-change-currency" target="_self" class="PlaygroundEditorTheme__link">How to change currency?</a><a href="https://help.webwave.me/how-to-add-a-product" target="_self" class="PlaygroundEditorTheme__link">How to add a product?</a><a href="https://help.webwave.me/how-to-set-up-product-variants" target="_self" class="PlaygroundEditorTheme__link">How to set up product&nbsp;variants?</a><a href="https://help.webwave.me/how-to-enable-shipping-of-your-products" target="_self" class="PlaygroundEditorTheme__link">How to enable shipping of your products?</a><a href="https://help.webwave.me/how-to-add-terms-and-conditions-of-your-shop" target="_self" class="PlaygroundEditorTheme__link">How to add "Terms and Conditions" of your shop?</a><a href="https://help.webwave.me/information-visible-after-purchase" target="_self" class="PlaygroundEditorTheme__link">Informations visible after purchase.</a><a href="https://help.webwave.me/change-mail-to-operate-the-store" target="_self" class="PlaygroundEditorTheme__link">Change mail to operate the store</a>&nbsp;You can add new preoduct moving the cursor to toolbar on the left and selecting "Add to cart" button. Fill up requested data like the product name, price, and thumbnail and press the "Add product" button. <img src="https://help.webwave.me/lib/dkwr2z/add-to-shoping-cart-l9s9hnvd.gif" alt="" width="inherit" height="inherit">

Adding Products to your Website: The Add to Cart element

The Add to Cart element

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?