Create an Eshop 3: Products

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.
1. Add Your Products
While in Webgarden administration, go to the category Coffee Beans. Hover over the green + icon in the upper right-hand corner and select PRODUCT.
01 Add a product edited with marks.png
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.
02 Rename the product edited with marks.png
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.
03 Enter a few details edited with marks.png
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.
04 Show product edited with m.png
Your actual eshop will open in a new window.
05 Product on website.png
2. Change the Product and Subcategory Display Layouts
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.
06 Open the document display options edited with marks.png
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.
07 Document display options with marks.png
TIP: Get a detailed description of all the document display options available in this dialog box from our tutorial Transform the Exterior of Your Documents.
Now the products look well organized, but the subcategories above them are not displayed nicely.
08 Good products, bad subcategories.png
You can fix this by adjusting the subcategory display options.
Click on the yellow edit icon adjacent to the subcategories.
09 Open the subcategory display options edited with marks.png
Under DISPLAY STYLE select the fifth option - Content is displayed as a horizontal list. SAVE.
10 Subcategory display options with marks.png
Now It looks much better, with links to the subcategories at the top and the products below.
11 Cleaned up subcategories.png
3. Display Your Products in More Locations
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.
12 Go to location edited with marks.png
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.
13 Add to Africa edited with marks.png
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.
14 Current locations.png
TIP: It’s possible to remove an item from a location using the red trash icon to its right. However, there always needs to be at least one location remaining. You won’t be able to delete the last location from this screen.
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.
15 Add Sumatra Mandheling edited with marks.png
If you don’t leave any categories out, it will look like this under CURRENT LOCATIONS.
16 2nd current locations.png
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.
17 All whole beans.png
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.
4. Insert a Shopping Cart
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.
18 Add blank paragraph text edited with marks.png
On the ADVANCED tab change the WIDTH to 3. SAVE.
19 Adjust width with marks.png
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.
20 Add a shopping cart edited with marks.png
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.
21 Eshop with cart.png
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.
22 See what's in the cart.png
Continue to the next part of our series on eshops where you'll learn lots about eshop orders and how to process them, how to make your Terms of Service accessible during checkout, and how to add some useful extras to your right column.
05/02/2016 04:25:51
Or visit this link or this one