Create an Eshop: First Steps

Is it really possible to start up an eshop on Webgarden in just 3 minutes? If you know where to click, then yes. But when creating eshops, the amount of work required depends on the complexity of the design structure and how much content is included. But first things first...
1. Register
Go to the website, and click on the blue button START NOW.
01 Webgarden homepage.png
Enter the name of your new eshop into the field, without www or any domain extensions, and Webgarden will search for available addresses that you can use free of charge.
In this example, let’s create an eshop selling coffee. A suitable address could be, for example, something like If you want to have a serious eshop with your own domain you’ll need to buy it, but since you can do that anytime in the future let’s start out by just using the subdomain
If you would rather buy your own domain immediately, click on the link GET YOUR OWN DOMAIN THROUGH WEBGARDEN. If you don’t see the domain extension you want, get a free website on one of our subdomains first, and then go to our eshop to choose from a vast selection of domain extensions.
Leave the box CREATE A MAILBOX FOR FREE checked. Click NEXT.
02 Choose website name with marks.png
TIP: Choosing a suitable domain/url for your eshop is crucial to its success. Since today it isn’t always easy to get the domain name you want, sometimes you need to be a bit more inventive and use your creativity. It’s recommended to choose a name between 7 and 9 characters in length (not counting the www. and .com). Longer names are more difficult to remember, and potential customers are more likely to make errors if they try to write them down. It’s also better not to include dashes in your domain name.
Under LOGIN DETAILS, enter your EMAIL. For security reasons it’s good to use an email address that wasn’t created on Webgarden. If you forget your password or need to change it in the future, you’ll be glad you did.
Then select a Webgarden PASSWORD and enter it in the second field. We recommend that you include both numbers and letters in your password.
Read the TERMS OF SERVICE, check the box to agree, and click NEXT to continue.
03 Login details with marks.png
The last step confirms the details of your eshop. If you are impatient, you can immediately have a look at your new eshop in a separate window by clicking on The website will contain example content and sport a randomly selected design template.
Click on EDIT WEBSITE to go to your Webgarden administration.
04 Registration summary with marks.png
Webgarden administration will look like this.
06 Webgarden administration edited.png
Your new website will look something like this.
05 Actual website alternative.png
Can you see the similarities between administration and the actual website? Both show the website’s homepage.
2. Choose a Design Template
First, let’s choose a new website design. Go to the tab DESIGN where you will find many design templates to choose from. Some templates will give your eshop a specific style; others will leave room for your imagination. Click on the image of any design template to get a closer look via its dialog box.
07 Design templates edited with marks.png
The dialog box shows more images of the selected template. If you decide to use that template, click on the yellow button USE DESIGN to select it.
08 Select a design with marks.png
Then go back to your actual eshop and refresh the page (ctrl+r). You’ll see the website with the new design template.
TIP: If you closed the window with your actual eshop, open it again by clicking on the website name in the upper left-hand corner of administration. If you closed the window with administration, open it again by logging in to
3. Manage Your Settings
General Website Settings
Before moving on to the Eshop Settings, first go to the SETTINGS tab and manage your general website settings.
Start by editing the WEBSITE TITLE. This title will appear on your browser tab, and Webgarden makes use of it otherwise as well, such as for search engine optimization. If your eshop has an official name or brand it is good to enter it here. So for this example, change the website title to Caffine Eshop and SAVE.
09 Edit the website title edited with marks.png
Below the website title there are places to choose the language, time and date formats, to connect to social networks, and to paste chat widgets. Let’s skip over those settings in this example, but have a look at the following options:
USE WWW. PREFIX. The current trend is not to use www., since from the user’s point of view it’s superfluous, and furthermore, a short address may look better. On the other hand, in some situations - such as on flyers or business cards - using www. could make it more obvious that it is a web address.
WEBSITE BROWSING MODE offers two options - AJAX and CLASSIC. In AJAX browsing mode, when visitors click to go to another category, only the main content of the website is reloaded. This means that visitors aren’t downloading the entire website every time they click. AJAX browsing is very fast, economical, and convenient, but don’t worry that it would be an obstacle for search engines to browse content in classic mode. The advantages of classic mode are that visitors can always see the exact url of their location and that the browser navigation buttons (back and refresh) will function normally.
Next in line is DEFAULT STATUS OF NEW CONTENT CREATED. If you change this to PRIVATE, new content added to the website will be hidden from visitors until you designate it as PUBLIC in that specific piece of content’s settings.
If you change any of these three options, don’t forget to SAVE.
TIP: Don’t forget that whatever you add to the website will be visible online immediately. If you want to hide content (or the entire website) from the public, learn how by reading our help articles Hide Content and Set Access Rights.
You will also need to activate the CONSENT TO THE USE OF COOKIES if your website can be accessed by people in the EU. To do this, simply check the box ACTIVATE THE COOKIE CONSENT NOTIFICATION ON MY WEBSITE and then SAVE. Read more about cookie consents here.
10 More website settings with marks.png
Eshop General Settings
Go to the ESHOP tab and select ESHOP SETTINGS / GENERAL from the content tree on the left.
At the top fill in your BUSINESS NAME AND ADDRESS (the one you’d like to have appear on invoices). It’s possible to enter a BUSINESS IDENTIFICATION NUMBER and/or TAX IDENTIFICATION NUMBER if you have them and want them to appear on your invoices. If you do not want these numbers on your invoices leave the fields blank. Enter the EMAIL TO WHICH THE ORDERS WILL BE SENT, TAX CALCULATION METHOD, and PRICE FORMAT. If your customers will not pay any sales or value added tax, choose DO NOT CALCULATE TAXES from the dropdown. If they will pay sales or value added tax, choose between the other two options. Also set the number of days until a PAYMENT REMINDER is sent and the order VALIDITY PERIOD. Notice the field where you will paste a LINK TO TERMS OF SERVICE so it is shown to customers in the shopping cart. Add the link later once your Terms of Service is on the eshop.
Be sure to SAVE.
11 New Eshop general settings edited with marks.png
Other Eshop Settings
If you don’t always have all of your goods in stock, use AVAILABILITY OF GOODS. Webgarden has already included 4 typical options - WITHIN 3 DAYS, WITHIN ONE WEEK, and WITHIN A MONTH. Add your own options as you please, using + ADD NEW, and delete any options you don’t want. SAVE any changes you make.
12 Availability of goods with marks 2.png
Under CURRENCIES, by default, only US Dollars will be listed. You can easily add more currencies. Just click on + ADD NEW. Then select the CURRENCY CODE, enter any prefixes or suffixes, and choose the PRICE FORMAT. SAVE, as always.
13 Currencies with marks.png
Now move on to PAYMENT METHODS. The payment options available include PayPal, Bank Transfer, Cash on Delivery, Cash, and Custom.
Each payment method can be enabled or disabled. In the settings for each you can also add a METHOD DESCRIPTION and select a PAYMENT METHOD ICON which will be shown to the customer after they make their choice.
Select CUSTOM, if you want customers to be able to pay using a method not otherwise listed.
14 Payment methods with marks.png
The next category is DELIVERY METHODS. Webgarden automatically includes the options DELIVERY, PAY CASH ON DELIVERY, and PICK UP IN PERSON.
15 Delivery methods with marks.png
Click on the yellow edit button next to any delivery method to access its settings. Here you can change its name, description, choose a service provider, add in any taxes (if applicable), and enter the price. Don’t forget to enter the prices in all currencies accepted on your eshop.
It’s also possible to charge different prices depending on the amount of the order. In this example delivery is free for orders over $600. Adjust these settings for each delivery method.
16 Edit delivery detail edited with marks.png
Additionally, select a DELIVERY METHOD ICON for each delivery method and activate all available payment methods under PAYMENT OPTIONS. You can edit the PAYMENT INSTRUCTIONS for any payment method, which will be displayed after the customer makes a selection. Your instructions can include placeholders for some parameters. So, for example, if you’d like to edit the instructions for PayPal to say “Now please make your payment of $86.00 for order# BBG - 45060078 via PayPal”, enter “Now please make your payment of [*price*] for [*on*] via PayPal” in the field.
Don’t forget to SAVE your changes.
17 Edit delivery details part 2.png
Let’s not do anything with the last 4 categories in eshop settings, but here’s a brief explanation of what they’re for. TAX RATES allows you to respond to changes in legislation or tax residence. SUPPLIERS is where you can keep a list of such businesses, so that later you can specify the suppliers of individual goods and sort the goods accordingly. UNITS is for situations where you would like to sell goods by weight, by the piece, or possibly even by the meter. Use CONVERSION MEASUREMENTS to set up AdWords conversion tracking for your website.
Continue to the next part of our series on eshops where you'll learn how to set up the basic content structure of your website and personalize your header.
02/19/2016 06:03:13
Or visit this link or this one