Learn how to add products to your eshop, display them in multiple locations, change product and subcategory display layouts, and insert a shopping basket.

Let’s continue with the example eshop from parts 1 and 2 of the series.

While in Webgarden administration, go to the category Coffee Beans. Hover over the green + icon in the upper right-hand corner and select PRODUCT.

Rename the product by hovering over the words NEW PRODUCT and clicking on the yellow edit icon that appears. The first product will be your breakfast blend of coffee beans, so name the product Breakfast Blend. SAVE.

Let’s fill in only the most basic product details for now. Click on the IMAGE button to insert your product image, which will upload when you save. Enter prices in all currencies available on your eshop. Enter a VARIATION NAME if there is one; otherwise just delete the word DEFAULT. Fill in the NUMBER IN STOCK to reflect how many packages you currently have ready. Then SAVE.

See how it looks on your actual website by hovering over the yellow edit icon in the upper right-hand corner of the screen and selecting SHOW.

Your actual eshop will open in a new window.

Go back to the category Coffee Beans in administration, and add two more products exactly as you did the first one. Name them Black Cat and Velvet.

Products on eshops are normally displayed as tiles, usually three per row. In the area for documents - the place where the three products have been inserted - click on the yellow edit icon in the corner.

This is where you’ll find options for changing your document display layout. The DISPLAY STYLE is already set to TILES, which is good. Change COLUMNS from one to THREE, SORT to SORT ALPHABETICALLY, and ITEMS PER PAGE to 12. SAVE.

Now the products look well organized, but the subcategories above them are not displayed nicely.

You can fix this by adjusting the subcategory display options.

Click on the yellow edit icon adjacent to the subcategories.

Under DISPLAY STYLE select the fifth option - Content is displayed as a horizontal list. SAVE.

Now It looks much better, with links to the subcategories at the top and the products below.

Some products fall into more than category. So that you won’t have create the same product multiple times, Webgarden allows you to put one item into multiple categories.

In the category Coffee Beans, create another product and rename it Kenya AA.

While in this product, hover over the yellow edit icon in the upper right-hand corner and select LOCATION.

Right now these coffee beans are only in the category Coffee Beans. But since they are single origin beans from Kenya, they should also be in the category Coffee Beans/Single Origin/Africa. Open the folder Products and keep clicking through until you find the category Coffee Beans/Single Origin/Africa. Then click on the ADD TO button located across from it.

Do the same for the category a level higher - Coffee Beans/Single Origin - because you want to have this item available there as well.

In the area at the top of the screen called CURRENT LOCATIONS, you’ll see a list of the categories where the products can be found.

Go back to the category Coffee Beans and insert another product named Sumatra Mandheling. Go to LOCATION from there.

In location add these beans to the categories Coffee Beans/Single Origin, and Asia.

If you don’t leave any categories out, it will look like this under CURRENT LOCATIONS.

Continue to add the rest of the whole coffee beans you offer to your eshop. All of them can be put into multiple locations as before. Also, add the first three blends you inserted to the category Coffee Beans/Blends.

When you are done there will be numerous products displayed in three columns of tiles in the category Coffee Beans.

Now add all the rest of the products to the eshop. Don’t forget to add each product to all the relevant locations and to change the subcategory and product display options for each category.

Before the first purchase can be made on your site, you need one more thing - a shopping cart.

Go to the HEADER. Here we have 2 elements - a logo image and a menu. You want the shopping cart across from the logo in the tile furthest to the right. Since all elements in Webgarden administration automatically shift left, you’ll need to add an invisible element to hold the space between the logo and the shopping cart.

Click on the green + icon immediately to the right of the logo. Select PARAGRAPH TEXT.

On the ADVANCED tab change the WIDTH to 3. SAVE.

Now you can place your shopping cart on the far right.

Click on the green + icon in the blank tile. In the first dialog box, go to the MORE OPTIONS tab and select the SHOPPING CART.

Within a moment the shopping cart will appear.

Have a look at your actual eshop to see the shopping cart. If you don’t see it, refresh the page (ctrl + r or F5). Try adding some products to your cart to see how it works.

Click on the price in the shopping cart to see details on what’s in the cart and pay. Here you’ll find an overview of the products selected, with options to edit the quantity or get rid of an item.