You've taken your first step, the layout of your online store has been created. Now it's time to proceed with adding products to the shop. To add products, you can use our Product element. 


The Product element has a number of functions that you can use for your shop. We'll explain in this article which functions it has and how to use it.


Add a product with the Product element

In the Editor, drag the Product element from the menu on the left and drop it in place on the store page. To add a product, click on the blue Choose product button.



In the Choose product dialog, click on the option + Create new product.

If you already have a number of products on your website or online store, you will get an overview of the available products here. From here you can also choose or search for the right product. 



When you add a new product, you can enter various product details:

  • Product name: Give the product an appropriate name (this is the name you'll see on incoming orders).
  • Description: Enter a short description with more information about the product.
  • Image: Add one or more images showing what the product looks like.
  • Shipping: You can set shipping costs per product or based on weight (this is covered in more detail in step 4).
  • Tax rate: If you've set multiple tax rates for your online store, you can indicate the rate per product. This is not necessary if you only have one tax rate. Check out this article for more information on setting tax rates.
  • Price: Enter the sale price for the product.
  • Inventory: This is automatically set to show infinite stock. If you have limited stock, disable the unlimited stock option and enter a number. Stock levels are automatically updated after every customer order.
  • Product variant(s): Add one or more product variants where applicable, e.g. different sizes, colors, or designs. You can also set different prices per variant with which you can offer volume discounts.
  • Product personalization with custom fields: Offer your customers the option to personalize products, for example with engraving or printing.
  • Number: If you've enabled the item numbers option in settings, you can add item numbers for products and product variants.



✔ Tip: Set up your online store's layout by creating product categories.


Single products or product gallery

Alternatively, you can use the Product gallery element to add products to your website. This works in much the same way as the Product element.


We recommend using the Product element for individual products, for example if you offer a smaller range of products. The Product gallery element is more suitable for displaying several products on one page, and automatically ensures a uniform design that displays well on both desktop and mobile devices.


When using the Product element, your store will look something like this:



If you opt to use the Product gallery element, your store will look like this:



✔  Tip:  If you choose a product gallery, you can also activate the Product Filters option.


Your visitors can hover their mouse cursor over a product to see the Add to cart button, as shown here:



If a customer adds the last of an item to their basket, the Add to cart button will switch to a Sold out button. To prevent confusion, the customer will see a notification confirming that the last item is currently in their basket.


✔ Tip: Will you be adding a lot of products to your online store? If so, proceed to step 3 and step 4 to set up payment and shipping methods first.