How to create an eCommerce website with Drupal

How to create an eCommerce website with Drupal

The status of an online retail store in 2022

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.

As time passes by, the pandemic conditions dated 2020 became our new normal. Online retail keeps growing as if nothing happened. According to Statista, the overall income of online shops in 2021 reached 5 trillion dollars, including 3,5 trillion from mobile purchases. The future seems to be bright, too: 2022 will bring 5,5 trillion to brands, and the year 2025 is anticipated to generate 7 trillion dollars. 

There are several trends that can describe online sales and user behavior over the past 2 years:

  • omnichannel sales;
  • the BOPIS model (Buy Online, Pick Up in Store);
  • courier delivery;
  • customer pick-up;
  • personalization;
  • active social media marketing;
  • subscription business model.

The perfect match now looks like that: a buyer anticipates and highly appreciates when a seller meticulously crafts and makes a special offer designed for a particular buyer’s need right here right now. The seller, in their turn, spies over customers across many devices to come up with that very special offer.

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. 

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 Drupal’s core modular architecture and multitude of modules gives CMS access to a wide variety of such tools.

Mobile-first architecture. If you want to help master those same $5.5 trillion that mCommerce projects will earn in 2022, 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.

Inventory of goods. If you are selling clothes, they 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.

Regular updates. The bugfix release window for minor Drupal versions 9.4.x and 7.x is scheduled for every first Wednesday (1200 UTC Tuesday - 1200 UTC Thursday). It means that Drupal gets updates every month or more often - depending on the number of discovered vulnerabilities. 

Having omitted even a couple of such updates, you put yourself at a 100% risk of retaining malicious software. Ask yourself: “Do I have enough time to include this in my routine?”. We already know that the answer would most likely be “no” and made the regular updates a part of our complex website audit offer.

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, 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. Here’s the alternative installation instructions of Composer for Ludwig users

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 "Commerce" 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 "Commerce" -> "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 "Commerce" -> "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 "Commerce" -> "Product attributes". For example, for phones, this might be a camera, screen size, memory amount, or color.

12. On the page "Commerce" -> "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 "Commerce" -> "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 "Commerce" -> "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.

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, like 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, and also improving its user interface at regular intervals. In future articles, we will tell you about our experience with payment systems and trends in eCommerce website design.

Useful links

  1. The PNAS survey
  2. The survey by Searchnode
  3. The Walmart sales statistics
  4. The BestBuy sales statistics

You might also like

A website without CMS: what the hell are you?

Development of online stores and interactive online services based on CMS, frameworks, and other tools can be left to the care of web developers. If you need a landing page or an online business card, frontend developers will come to help.