Create an Eshop 2: Categories
In this part of the series you’ll learn how to create the basic content structure of your eshop and add your logo to the header.
1. Delete the Example Content
Begin by - perhaps somewhat surprisingly - deleting all of the content. Webgarden prefills every new website with example content. But in this series you will learn how to add your own content step by step.
First, delete all of the categories. While under the CONTENT tab, select ABOUT US from the content tree on the left. Then hover over the red trash icon in the upper right-hand corner of your screen, and click on DELETE. Confirm. Continue by doing the same for all of the other categories (SERVICES, CONTACT, and REFERENCES).
Go to the HEADER by selecting it from the content tree on the left. There aren’t any categories in the static blocks (which are the HEADER, LEFT COLUMN, RIGHT COLUMN, and FOOTER), but there are example content elements you will want to delete. Hover over each element to find its red trash icon and delete it.
Continue to the LEFT COLUMN, RIGHT COLUMN, and FOOTER and delete any elements you find there in the same way. When a static block is empty, it doesn’t appear on the actual website allowing more space for the main content.
If you really want to completely get rid of all the content you’ve deleted, you’ll need to empty the trash. Do this by opening OTHER in the content tree and going to the TRASH. Then hover over the yellow edit icon in the upper right-hand corner and select EMPTY TRASH.
TIP: The trash folder is like your insurance in case you accidentally delete a category or document. When you delete such content, it moves to the trash folder. It’s still accessible and counts toward your data space usage. If you would like to delete all content in the trash permanently, empty the trash. If you would like to return a piece of content to its place on the website, first click on it. Then while inside, hover over the yellow edit icon in the upper right-hand corner and select LOCATION. Here you can move the content to the category of your choice.
To learn more about trash, check out the tutorial Manage Your Webgarden Trash.
To learn more about trash, check out the tutorial Manage Your Webgarden Trash.
2. Add Your Own Categories
When planning the content structure of your eshop, keep in mind that most eshops do not have just one menu with all of the categories together. Such a menu is tedious and makes orientation difficult. Generally it’s good to separate the categories into multiple sections and give each section its own menu. You could have one group of categories focused on goods in a section called Products. A second group could include the main categories presenting the eshop, such as the homepage and contact page. A third group could contain important but less visited categories such as Returns and Invoice Details.
Ideally, keep each level of categories to no more that 7 items. But of course, depending on the situation, that’s not always possible to achieve. If you have your goods organized by producer and there are 30 producers, then you might not have any other good options.
Add a Section and Categories for Products
For this example, start by adding a section and the first level of categories for your products. Suppose you sell coffee of various kinds, in the forms of coffee beans, ground coffee and coffee capsules.
Click on + NEW SECTION in the content tree. Then go to the new section called NEW CATEGORY, hover over the section name, and select the yellow edit icon. Rename the section Products and SAVE.
Go to the section called Products in the content tree. Hover over the green + icon in the upper right-hand corner and select CATEGORY.
You will find yourself in the newly created category. Click on the yellow edit icon next to the category name, change it to Coffee Beans, and SAVE.
Next click on + NEW CATEGORY in the content tree to create another category. Go to that category and change the name to Ground Coffee.
Do the same to create a third category on the same level called Coffee Capsules.
Now let’s further elaborate on these categories. Suppose you offer both coffee blends and coffees of single origin. With Webgarden, categories can branch out further to subcategories. Add subcategories called Blends and Single Origin to both Coffee Beans and Ground Coffee. The category Coffee Capsules could contain subcategories like Nespresso Compatible, Dolce Gusto Compatible, and Lavazza Compatible.
Go to the category Coffee Beans. Hover over the green + icon in the upper right-hand corner and select CATEGORY.
Again, you’ll find yourself in the new category. Rename it Blends. Immediately below the category Blends in the content tree you’ll see that there is an option + NEW CATEGORY on the same level. Click on this + NEW CATEGORY to create the category Single Origin.
Then do the same to add the categories Blends and Single Origin under Ground Coffee and the categories Nespresso Compatible, Dolce Gusto Compatible, and Lavazza Compatible under Coffee Capsules.
When you’re done the top of your content tree will look like this.
Then continue to branch out from there. The category Coffee Beans/Single Origin could contain additional subcategories like Africa, Asia, North America, and South America. Coffee Capsules/Nespresso Compatible could include subcategories such as Ristrettos, Espressos, Lungos, Decaffeinated, Premium, and Flavored.
TIP: With Webgarden you can create an unlimited number of sections and categories in as many levels as you would like. What is limited is how much will display on visitors’ computers at once. Large numbers of items on a page (more than 50) may be more than what older computers can handle.
So now you just need to add the last level of categories.
Go to the category Coffee Beans/Single Origin and add a category using the green + icon in the upper right-hand corner. Change the new category name to Africa. Then on the same level create 3 more categories called Asia, North America, and South America. Finally, go to the category Coffee Capsules/Nespresso Compatible and create the subcategories Ristrettos, Espressos, Lungos, Decaffeinated, Premium, and Flavored.
If you’ve done everything correctly, your content tree will look like this.
TIP: Learn more about Sections and Categories from the tutorial Organize Your Content: Sections and Categories.
If you look at your actual eshop online right now, you won’t see any of those categories. The categories only exist on the database. To make the categories accessible from the eshop you need to add a menu element.
First, choose a suitable location. Although the imagination knows no limits, for this example try one of the most standard ways - insert the menu for the section Products in the LEFT COLUMN with the categories listed vertically.
Select LEFT COLUMN from the content tree, and click on the green + icon located below where it says LEFT COLUMN in the middle of the page. A dialog box will appear. Select MENU.
In the next dialog box, choose the MENU ROOT - PRODUCTS. The MENU DEPTH should be 3, so that all levels of categories will appear on the eshop. The MENU STYLE will be VERTICAL. SAVE.
TIP: If you choose a MENU STYLE which expands, you will initially only see the first level of categories. The subcategories appear when the visitor rolls over or clicks on the parent category. Learn more about menus from the tutorial Create Menus.
Have a look at your actual eshop. It should look something like the one pictured below.
Add a Section and Categories for General Eshop Content
Now create a second section of categories that will include the typical website pages.
Go to SECTION 1. Rename the section About.
Use the green + icon in the upper right-hand corner to add a category to the About section. Rename the category Home.
Then while still inside the new category called Home, hover over the yellow edit icon in the upper right-hand corner and select SET AS HOMEPAGE, so website visitors will always see this category first.
Below Home, add two more categories called Eshop and Ask Us.
Now you need your new categories to show up somewhere on the eshop. This time insert a menu in the HEADER.
Select HEADER from the content tree, and click on the green + icon located below where it says HEADER in the middle of the page. In the first dialog box select MENU.
In the second dialog box, under the BASIC tab, choose ABOUT as the MENU ROOT and HORIZONTAL - TABS as the MENU STYLE.
Then move to the ADVANCED tab and change the HIGHLIGHTING to PATTERN 2. SAVE.
Stretch the menu across the entire width of the header using the gray arrows.
On your actual eshop it will look like this.
3. Personalize Your Header
Insert your company logo and name into the header.
In the HEADER, hover over the menu element, and click on the small green + icon that will appear. This will allow you to add a new element before the menu. Select IMAGE from the dialog box.
In the next dialog box, under the BASIC tab, CHOOSE FILE to upload an image with your name and logo.
Under the ADVANCED tab, adjust the WIDTH to suit your image, fill in the field LINK with the entire url of your eshop including http://, and change the DISPLAY STYLE to FULL RESOLUTION. SAVE.
Within a few seconds - the exact amount of time depends on the size of the image - the image will appear in administration.
Click on the eshop url in the Webgarden administration header to have a look at the actual website. It will contain a header including the logo, eshop name, and a menu for the section About. On the left you will see the main menu with products.
For more ideas and tips on headers check out the advanced help articles How to Add a Customized Image as Your Header and 4 Ways You Can Vertically Align Elements on Webgarden.
Continue to the next part of our series on eshops to learn lots about products and how to insert a shopping basket.