How to create an eCommerce website with Drupal

How to create an eCommerce website with Drupal

The status of an online retail store in 2021

Spring 2020 was a challenge for trading.

On the one hand, it led to a drop in revenue for small and medium businesses and the closure of some of them. The survey conducted by PNAS showed that 43% out of 5,800 of the companies belonging to a small business referral network Alignable, temporarily closed down their businesses. Most of all, the coronavirus affected trade, art, entertainment, catering, and the hotel business.

On the other hand, "online" saved the business from a total drop. The survey by Searchnode: 90% of the entrepreneurs surveyed saw an increase in online sales during a lockdown, and the increase was over 100% in 50 percent of cases. In particular, sales at Walmart grew by 97%. Online sales at BestBuy showed more impressive growth: 255% in the period between the second quarter to July 18. Amazon's online and traditional retail sales increased by 40% and accounted for $ 88.9 billion.

What type of future does research predict? In 2021, the total value of online purchases will amount to almost $ 5 trillion, more than $ 3.5 trillion of which will be spent on purchases via the mobile Internet (in 2016, this figure did not reach $ 1 trillion by comparison).

We hope that the conclusion for everyone is obvious: an online store is available for all devices would help ensure a business's long life and profitability.

Create an eCommerce website on Drupal

First of all, the choice of technology for an online store depends on the task and the size of your business. You may choose ready-made website builders, such as Tilda or Wix, to realize the simple business logic of orders and payments, as well as for a small flow of customers (for example a home bakery or local cafe).

The move from a small business to a medium and large one sets new tasks for its owner:

- differentiation of access rights for users of the online sales tool,
- scalability as the website becomes a high-load;
- search for goods by several characteristics (or faceted);
- integration with CRM and other services.

    
In this case, you should turn to ready-made CRM and eCommerce platforms. There are many such platforms, but as a Drupal web development company, we will talk about it.

The business potential of Drupal

Ready-made open-source platforms save the budget and are even more attractive during the crisis. With Drupal, you can manage both content and sales at the same time - it is a great success for all types of business and credit for the Drupal community spread all over the world. It is the best eCommerce CMS for developing online businesses! Why? Нere are at least 11 reasons:

Taxonomy. The Taxonomy module organizes the filtering and sorting of products in the product catalog on the website. Without this, an online store is impossible. For a while, users had to download and install Taxonomy separately as any contributed module but due to the high demand, it was included in the Drupal core.

The data-driven approach in eCommerce. If you want your sales to be driven by content, you need full integration of the eCommerce platform and CMS into each other. It rarely goes fast, and here we found one of the profitable advantages of Drupal: Drupal Commerce. This is an addition to Drupal, which plays the role of the module and the framework. Below, we will tell you more about it.

Hundreds of modules, distributions, and themes. The influence of the international Drupal community on the platform can not be overestimated: its members work on solutions to problems of any complexity so that owners can implement them in their online stores. Drupal Kickstart and Ubercart are two of the most common solutions that we'll talk about a bit too.

The integration with third-party services. For normal operation, you need to add payment systems and analytics systems, integrate with social networks, set up a chat, automate the marketing of an online store on Drupal. The REST API architecture gives Drupal access to a wide variety of such tools.

Mobile-first architecture. If you want to help master those same $ 3.5 trillion that mCommerce projects will earn in 2021, your online store must work on all mobile devices. Responsive design is one of the distinctive characteristics of Drupal.

Multilanguage. People buy and sell all over the world, so any eCommerce / mCommerce project should be able to speak with the client in any language. Drupal knows about a hundred languages, including those that read from right to left.

The ability to sell digital products. In the past year, some digital services have experienced a big jump in traffic against the background of the coronavirus. The world is no longer stable and the scenario of migration of all activity to online is no longer fantastic. Therefore, the opportunity to buy some kind of a digital product on the website is welcome today.

Inventory of goods. If you are selling clothes, it must have the size parameters, color, size. If your product is comics, then they can be divided into originals or translations, for persons older than 6 or 18 years, issued by one or another publisher, and so forth. The Drupal Commerce module includes the concept of a Stock Keeping Unit (SKU). This is an identifier that will be different for each product with different parameters. Also, this opportunity helps to control the stock balance.

User Divisions. The buyer should not be given access to the admin panel as well as a seller should not have access to replacing banners and website themes.

Good UX. The faster the user purchases the website, the greater the chance that she/he comes back for a new one, and the search engines would rank the website for keywords better. Drupal can provide this speed, and adherence to the principle of Headless eCommerce would allow the user to move on between pages with lightning speed.

Omni-channel. The more points of contact with a company customers have, the better. And Drupal has the potential to build an entire ecosystem of products. If you need mobile app development after creating the website, then there will be less work. Thanks to the same principle of Headless eCommerce, the content management system acts as a database, common for both the website and the mobile application.

Drupal Commerce

Drupal is often referred to as a platform in which it is enough to tick necessary checkboxes to get the first sales. Well, that’s an exaggeration! You highly likely will overcome the first obstacles during the Drupal configuration. Ask yourself, "If it's that simple, then what is the large Drupal developers' community doing?" and get a step closer to creating a beautiful, modern, competitive, secure in terms of the leak of data and a constantly updated online store, which can not be created without the knowledge that the community had developed over the years. But we will still attach instructions for non-programmers: the new knowledge will increase your self-esteem and subsequently allow you to communicate more effectively with the development team. 

We remember that, first of all, Drupal allows you to post content on the website, and all other features are being added by Drupal-compatible modules. One of these is Commerce.

This module is the framework that allows the native integration of commercial options into a Drupal website. The developer will quickly be able to link the module with any third-party application with the API-first principle, and this is particularly important if your business is already integrated with some systems before creating the online store. Since this is a framework, all configurations, settings, and themes are created from scratch. The developer gets free rein but if you are not one of them, then do not waste time trying to understand this tool on your own.

The basic set of entities that can be created with the help of Commerce includes:

  • Product — what is sold in the store;
  • Orders — one or more units of products that the website user puts in the shopping cart, as well as settings for each unit of the product taken into account at the stage of calculating the final cost and payment (for example, a discount on a product);
  • Line Items — unit of the product with its properties (size, color, etc.), which will be taken into account when orders are created;
  • Payment Gateways — software that solves the problem of order payment. These are either solutions developed by companies for their specific needs or ready-made, like PayPal, Stripe, Braintree, Ubercart, bank payment gateways.

Also, community members created useful modules for Drupal Commerce for everything in the world: total delivery costs, inventory count, calculating fees and tax rates, and much more.

Тhere are two versions of Drupal Commerce at the moment: Commerce 1 is compatible with projects on Drupal 7 and Commerce 2 - Drupal 8 and 9. Both can be downloaded from the official website of the Drupal platform

How to create an online store on Drupal without the help of the developer

Now we'll show you how to build a simple phone store using Commerce. Let's call it "Triline".

1. Download the latest Drupal core. This can be done in two ways:

  • using the Composer package manager. You need to send the command to its console: 

composer create-project drupal-composer/drupal-project:9.x-dev my_dir --no-interaction

The Drupal Commerce module would require setting external dependencies, so it's best to create your project using Composer. Alternatively, the required sets can be connected via the Ludwig module, but we recommend Composer anyway.

2. Specify access to the database.

Drupal offers you a choice between several website profiles that contain settings and content by default. If you don't need this, you may select the minimal profile. After finishing the installation, fill in the details on the Configure Site page.

3. Installing the Drupal Commerce module is only possible using the composer package manager or using the Ludwig module. Check out the documentation. Don't worry that the team's documentation is written for Drupal 8 - they are true for Drupal 9 as well.

4. You need to send the command "composer require drupal / commerce" to the console to download the Commerce module via Composer.

5. Go to the Advanced tab in the top admin menu and enable the required modules.

Optionally you can enable the Commerce Tax module to add additional taxes.

The Commerce Promotion module is used to create promotions, the Commerce Number Pattern is the tool for generating the identification numbers for your products, and the Commerce Store will be useful if you want to have several stores managed by a single system.

6. If you did everything correctly, the new "Trade" menu item will appear in the administrator's top menu.

7. To begin with, set up general store configurations, and only then you can create products. Go to the menu item "Trade" -> "Configuration".

8. Add one or more currencies that users will use to pay for purchases. To do this, go to the menu item "Currencies".

9. Go to the menu item "Trade" -> "Configuration" -> "Stores" and create a new store. Fill in the required fields.

10. Add a new product type the same way. For a product type, you can set the minimum required set of fields that are common for all products and do not affect their price, for example, a text description. The other characteristics appear in its variations.

11. Add several attributes in the menu item "Trade" -> "Product attributes". For example, for phones, this might be a camera, screen size, memory amount, or color.

12. On the page "Trade" -> "Configuration" -> "Types of product variations", edit your custom type and make sure that you chose the attributes created in the previous step.

You can also add additional fields related to the entire variation, such as a product photo.

13. After we have prepared the structure, it's time to add some products. Go to "Trade" -> "Products" -> "Add product".

14. Go to the "Variations" tab. Here you can set product variations with additional options (attributes) that we created in step 12.

15. Save your changes and go to the product page.

The module automatically displays a widget for switching attributes and loads the relevant variation.

16. Let's create a page that will display all products. To do this, go to "Structure" -> "Views" and create a new view in the administrator menu. Select the "Show product" type (your custom type) and check the "Create the page" checkbox.

17. If you did everything correctly, then when you would go to the page that you created in the previous step, you see all products added to the website. This is the most basic use of Views and moving on to "Structure" -> "Views" and choosing one of you to want, you can customize this page, for example, set up the output of products or add search filters. The Search API and Facets modules for creating faceted searches can help you with this.

18. Orders that we created can be seen on the page "Trade" -> "Orders".

We have reviewed the most basic functionality of the Drupal Commerce platform.

In the future, you will customize your website and choose a theme for it. On the official Drupal website, you can find many ready-made free themes or installation profiles that contain configuration settings and the theme. You can also consider paid builds on various platforms, such as ThemeForest.

Drupal Commerce supports many popular payment systems such as Stripe or PayPal. You will learn about our experience with them in the next article.

Kickstart and Ubercart eCommerce modules

No time or budget? For this case, there are a couple of modules with a slightly lower threshold of complexity.

Drupal Commerce Kickstart

If the Commerce philosophy of the framework is to build a store from scratch, then the Kickstart developer is dealing with a distribution kit that consists of sets of modules for different purposes. Kickstart is needed when time and experience are limited, but you still have a little experience - at least for integration with the server, because the capacity of a stationary computer may not be enough.

Ubercart

It is another set of Drupal modules for creating an online store for an ordinary user. Accordingly, it is configured by ticking checkboxes. The new functionality includes a catalog of categories and products, a shopping cart, checkout, modules for payment and delivery, a module for calculating taxes, a module for accounting for warehouse balances, and modules for creating reports.

Headless eCommerce: one backend to rule all sales channels

Before conclusion, let's talk about a trend in eCommerce development that is not going to go away. Headless (or Decoupled) eCommerce is the principle of developing not even a website, but an entire ecosystem of products working for your business. This ecosystem, in addition to the website, may include a mobile application, an online checkout, a smart terminal, social networks, chatbots, and much more. If you follow the Headless eCommerce principle then all data will be taken from the same server.

Let's try to explain the architecture of a Headless eCommerce website in simple words. All invisible processes serving simple user operations like adding products to the shopping cart, paying, applying for gift cards and discounts are called business logic. It is processed on the server, which can also be built on the CMS Drupal. Тhe client-side is responsible for the visible results of processing these operations. JavaScript frameworks such as React, Vue.js, or Angular are used for this development. Between the front end and back end, there is an interface, which transfers data from server to client, for example, Rest API or GraphQL.

Advantages of using this principle are:

  • reducing the load on the server due to only partial loading of Drupal,
  • reduction of time to develop the back end of the website,
  • using the JavaScript frameworks opportunities when developing the front end instead of Drupal themes and templates.

Conclusion

When they try to convince you again that the open-source CMS is very simple, remember that Drupal and all technologies compatible with it are built in PHP, and PHP is one of the most popular and as deceptively simple, as Drupal, programming languages. Connecting payment systems, setting up the page layout, integrating with analytics systems (you need to know where customers are coming from), email newsletters (for informing about promotions and new products), etc. are difficult and therefore it isn’t worth your time. That way, each partner can do its part: you are looking for new sales and marketing channels, and the development company is creating and supporting the store. In future articles, we will tell you about our experience with payment systems and trends in eCommerce website design.

You might also like

Shopping on a Drupal-based eCommerce website

Online payment is probably one of the most important aspects in the operation of your e-commerce site suggesting flexibility and security. In this post, we'll try to give you a brief introduction to cash-free payment on the Internet.

7 must-have practices for a successful e-commerce store

eCommerce knows many examples of good websites helping their owners to gain profit in a manner that is graceful and brings fun to the client. We have examined them, talked to the designers and found 7 ways to increase online sales using proven and effective web design solutions.