Create a websiteBlocksWebsite templatesWebsite packagesCreated websitesWebsite creation guides
Create your own website now
Free website

How to create an online store

Online store

This tutorial explains how you can create an e-commerce website by using the Store block.
Building your own online store is done in 5 easy steps:

  1. Create a website and add a store
  2. Configure its design (store style, number of products per page)
  3. Manage content (add categories and product details)
  4. Activate the secured online payments (payment methods, shipping costs)
  5. Optimize your store for search engines

 

The Store block allows you to show and sell products on your website. You can find a demo of this block on the Online store page of our block demo website.

Create an e-commerce website

1. Create a website and add a store

The first step to build your own e-commerce website is to add, on new page, a Store block. Create a new page on your website, and drag/drop the Online store icon on the top left of the page (for more details about how to create a website and add blocks, please check the guide on our website creation tool). Then, save your website to start the store configuration.

2. Configure your online store design

When the Online Store block is selected, the properties shown on the bottom left of the website creation page are:

Configure the online store
  • "Payment providers": this button opens a window which allows you to configure the payment providers. For now, all the payments are done with PayPal: so you can enter the PayPal account email address on which the sales will be credited.
  • "Manage categories": this button opens a window which lets you add, delete and modify the product categories.
    You can select the categories which will be displayed in the selected store block (for example, only the clothes: t-shirts, socks, but not the shoes, which will be sold on another page).
  • "Activate cart": when this box is checked, the visitors can add your products to a shopping cart, order them and pay directly from your website. Only the websites with the Pro package can activate the shopping cart. Nevertheless , websites with the Premium package can test this functionality for free and without commitment for 1 month!
  • "Style" and "Rows": explanations are below.
  • "Auto-size": if this box is checked, the block is resized automatically when its content changes. Otherwise, a vertical scrollbar can appear.

To change your store design, you can choose:

  • The store style.
    3 styles are available: small square images, large rectangular images or horizontal list. You can find more informations and snapshots of the different styles in our tutorial: Online store design.
  • The number of products per page.
    You can sell as many products as your want in your store. To be able to navigate easily, you can choose the number of rows to be displayed per page. You can find more information about this functionality in our guide: Online store page management.

3. Create categories

In order to create a first category, click on the "Manage categories" button, then choose a name in the bottom left input (do not choose a name too long, 15 characters maximum) and click on the "Add category" button. If no category is selected, all the products are displayed. So, select the categories you would like to appear in the selected block by ticking the boxes under "Show in this block".
Manage the store categories

You can create as many categories as you want and they can be modified at any time. When the categories are ready, the next step is to add products.

4. Add products

To add a product in your online store, click on the Add a new product in your online store button.

Configure the product

The above form allows you to configure a product:

  • Title: do not choose a title too long (idealy less than 12 characters). You can add details about the product in the description.
  • Images: You can show up to 4 photos of your product. On your website, when visitors click on the thumbnails, the picture will be displayed on full-screen.
  • Categories: select the categories of the product. For example, "shoes" and "men"
  • Price: in euros only at the moment. Please contact us if you need another currency.
  • Visibility: untick the box to hide the product. You will of course be able to show it again whenever your want.
  • Stock: if the payments are activated, you can configure the number of items that can be bought by a customer.
    stock=0stock=1stock>1
    No product left
    Add 1 item to the shopping cart
    Add several items to the shopping cart
  • Options : you can eventually configure options for your product (for example, sizes "S ; M ; L ; XL" or colors "White ; Blue ; Green ; Red"). A drop-down menu will allow visitors to choose one of these options before adding the product to their shopping cart.
  • Description: add a full description of your product by using a powerful text editor.
Once the form is filled, click on the "save" button. Then, you can update, delete or copy it from the product list.
Manage your store products

You can create as many products as you need, but do not forget to keep your website organized and to sort the products into categories in order to help visitors find what they are looking for.

5. Manage the payment methods

The Online store blocks can be configured to accept 4 payment methods:

  1. PayPal (requires to open a Business Web Payment PayPal account)
  2. Check
  3. Transfer
  4. Order form 

You can find more informations in our tutorial Online store, payment by PayPal, transfer, check and order form.

6. Shipping cost management

Build an online store : manage shipping costs

You can then define several price ranges which are associated with a shipping cost. This cost can be fixed or depend of either the number of articles or the cart price.

Manage PayPal orders

Once the order is confirmed, the customer is redirected to PayPal. He can then log into his PayPal account and pay.
With PayPal, the customer account management is included. Customers with a PayPal account will not have to create another account.
As soon as the payment is processed, you receive an email with the order details and the shipping address of your customer.

Manage other orders

For the payments by transfer, check and order forms, you receive directly an email containing your customer details and his order. The customer also receives an email with his order and your payment instructions.

You can find more information in our guide : Manage the shipping costs of your online store.

7. Activate the shopping cart

In the properties, click ot the "Payment providers" button, then in the window, enter your PayPal email address. If you do not have any account yet, you can create one on the page Open a Business Web Payment PayPal account. PayPal is a trusted and secured service to receive payment from the Internet.

Tick the box "Activate cart". If you have a Pro website, the e-commerce functionality is included in your package.
If your website is Premium, a message invites you to test this functionality for free and without commitment for 1 month!

Secured payment in your online store

8. Optimize you online store ranking in search engines

When your online store is ready, the last step is to find customers.
SiteW helps you deal with the SEO (Search Engine Optimization):

  • All the store pages (categories and products) have an address (URL) and a title using your product/category name. Thus, pages will have a better ranking in search engines.
  • All the pages are listed in your sitemap.xml file. Thus, search engines can add them to their results easier and faster.
  • To help you follow your SEO, the statistics page shows which categories and which products are the most consulted as well as the keywords typed by visitors to find you website.
  • When you change your website (Premium and Pro), SiteW contacts automatically the main search engines to help them update their results.

You can find tips to optimize your Google ranking in the guides: Better Google ranking and Follow your SEO.

Finally, if you have any question or improvement suggestion, feel free to contact us.