Quick guide to setting up E-commerce

With the Editor's native E-commerce feature - ideal for simple, small and medium-sized shops - you can sell products online and accept payments directly through your website.

Follow the steps below to successfully set up your E-commerce shop:

  1. Configure your shop settings
  2. Create products
  3. Display products on your website
  4. Manage incoming orders

 

Configure your shop settings

Before you start selling products, you need to first complete a few basic configurations so that you can accept payments, send out notifications, etc.

Find your shop settings in E-commerce > Settings.

Ecomm-settings.png

 

Store details

Enter your address and basic contact information in the fields. The information inputted here will show in the automatic order notification emails and invoices that are sent out to customers. 

  Country of operation and tax calculations

It's important that you make sure to select your country of operation from the Country dropdown as the Editor uses this information to automatically add the correct VAT rate to your products.

 

Payments

You can enable multiple payment options for your customers. If you wish to accept credit card payments, toggle one of the payment gateways on the list. Please note that you're only able to successfully set up online credit card payments if you have already registered an account with your selected payment gateway.

Additionally, you can take payments through other means, for example Pay on Delivery or Bank Transfer. Use the Manual option for any other payment method not covered by the default options.

 

Currencies

Under Accepted currencies, select all the different currencies you are accepting payments in.

Under Primary currency, select which currency that prices will be displayed in by default for visitors accessing a specific language version of your shop (this is only relevant if you are operating a multi-language shop).

In the example below, Euro (EUR) is selected as the primary currency for the French language version of the shop.

currencies.png

 

Shipping providers

When defining the way(s) you are going to ship products to your customers, there are two aspects you need to think about: which shipping provider(s) you are going to use and the actual method of shipping, including pricing and destinations.

Under Shipping providers, toggle the provider(s) you are shipping with. If your provider is not on the list, toggle the Generic option.

 

Shipping methods

In Shipping methods you can set up one or multiple ways of shipping using the provider(s) you've toggled in Shipping providers. If you are shipping to different countries or regions, it may make sense to create a shipping method for each with unique pricing.

When creating a shipping method, make sure to give it a meaningful name that customers are instantly able to recognize and understand. If you do not use a specific provider, you could name your method 'Shipping', 'Next day delivery' or similar. 

You can set your shipping method to have a single, fixed price or use a tiered pricing system based either on total order price or total weight of the products ordered. 

Example of fixed shipping price
In this example, shipping costs a fixed price of 10 EUR regardless of the total order price and weight.

fixedshipping.png


Example of tiered shipping price
In this example, shipping costs 10 EUR for orders up to 50 EUR. Orders over 50 EUR cost 5 EUR in shipping and orders over 100 EUR have free shipping.

 tieredshipping.png

If you are creating a tiered pricing system based on the physical weight of the products ordered, it's important that you remember to fill in the product weight in Variants > Dimensions > Weight on the product page for each individual item. 

  Important note on shipping

Your shop checkout will only become functional once you have selected both a shipping provider and defined at least one shipping method. Make sure that both are defined and toggled on.

 

Terms and conditions

Before making a purchase, your customers will be asked to accept these terms before proceeding to the payment of the order. 

You can add a refund policy, privacy policy and terms of service.

 

Notifications

Notification emails are sent out automatically to customers at various stages of the order management flow, for example when you have shipped an order. 

Write a subject line and body text for each of your notification messages. 

 

Create products

Head to the Products category and click the New product button to start adding a product.

ecomm-products.png

Walk through the guided creation flow during which you can also add category tags and variants to your product.

Category tags help you categorize your products and make it possible to show only certain types of products on your website. For example, if you are selling both coffee and tea products and assign all your coffee products the tag 'coffee', you can create a dedicated page for these products on your website and set the Product catalog module to only show products that have the 'coffee' tag. 

Variants are basically different versions of the same core product, for example if it comes in different shapes, sizes, colors, etc.

In the second tab on the product creation page, Variants, you can add as many variants of the product as you wish. Make sure to specify a price and other attributes for each variant.

In the third tab, Photos, you can upload one or more images of the product that visitors can flip through while browsing the product page. Drag on the images to change the order in which they are displayed to visitors.

  Set a primary image

The image furthest to the left serves as the primary image which is displayed on the Product catalog module and as the featured image if you share the product URL on social media.

productphotos.png

In the fourth and final tab, SEO, you can fill in a product title and page description and thereby manage how the product appears in search engine result listings. If you don't fill in anything in the fields and save your product, the Editor will automatically copy over your product title and description from the Basic tab.

 

Display products on your website

To make your products available for customers to purchase, you need to add a few E-commerce modules to your website. 

Find the E-commerce modules in the Add module overlay.

addmodule1.png 


Product catalog module
The Product catalog module displays all or some of your products and enables visitors to click on them to open the product page. It can be inserted anywhere on your website and you can add as many Product catalog modules as you wish.

catalog.png 


By default, the module displays all your products. If you wish to only display products with certain tags added to them, select these tag(s) in the field Product tags

producttags.png

 

Shop filter module
The Shop filter module enables visitors to filter out products on a Product catalog based on either price, tags or variations. Add the Shop filter module close to a Product catalog and decide how many filter parameters you wish to show.

filteredcatalog.png


Cart button module (header only)
Finally, in order to enable visitor to view and edit their shopping cart and proceed to the checkout, you need to add a Cart button module. This module can only be added in the website header from the Add module overlay.

addtocart.png

atcbtn.png

 

Manage incoming orders

Once you've completed your shop configuration, added products and published your website, you're ready to start accepting orders.

You manage incoming orders in E-commerce > Orders.

orders.png

New orders appear in the Pending tab. From there you can mark orders either Complete or Cancelled. Completing an order means you have shipped it or by other means provided it to the customer.

Completed orders can be viewed in the Completed tab. Here you can download invoices by selecting on or more orders and clicking the download icon. You can also credit individual orders by clicking the pencil icon. Crediting an order means refunding either the full or partial purchase amount to the customer.

Credited orders can be viewed in the Credited tab. Here you can also download credit notes.

Any cancelled orders will show in the Cancelled tab.

 

 

Was this article helpful?
1 out of 1 found this helpful