How to Create an Online Store with Drupal 9 and Drupal Commerce

How to Сreate an Online Store with Drupal Commerce - Lemberg Blog

Brick-and-mortar stores may still be selling more goods than online stores, yet the latter are catching up quickly: in 2019, 14.1% of all retail purchases worldwide were made online, and by 2023, this figure is expected to rise up to 22%.

So if your business doesn’t have an online storefront yet, now is a great time to start thinking about opening one.

There’s a great variety of ecommerce platforms you can choose from, but in this post, I’m going to focus on how you can create an online store using Drupal Commerce. It’s a great option, and here’s why:

Why use Drupal Commerce to create an online store

  • Like everything Drupal, Drupal Commerce is open-source.
  • It’s very secure. There’s an entire Drupal Security team dedicated to monitoring the core code and reviewing issues.
  • It offers plenty of ready-made solutions, including products, carts, stores, orders, and payments, that allow you to build an online store from scratch even if you don’t have much coding experience.
  • It’s incredibly customizable out of the box, there are a lot of features you can configure using UI only. Additional modules often have integrations to work via UI as well.
  • The Drupal Commerce community helps with developing new features and fixing issues. That said, most of the work here is contributed by Centarro (formerly Commerce Guys), and they encourage others to join their efforts (there are currently around 2,000 members in the project’s Slack channel).
  • It now has a great variety of payment and shipping system integrations thanks to the fact that many companies working with Drupal Commerce share the features they develop with the Drupal community and publish a lot of modules that further extend Commerce. 
  • In addition to online stores, Drupal and Commerce can also be used to create CRM, ERP, and PIM systems.

So what does setting up a Drupal Commerce store on Drupal 9 actually look like? Let me walk you through the process.

Let’s build a simple online store using out-of-the-box features of Commerce

There’s a number of features you get right after you install the Drupal Commerce module. Let’s look at how we can configure a simple online store based on this module alone. We’ll also check out all the built-in Commerce features on Drupal 9. We’ll use Сlaro as the admin theme and Olivero as the front theme.

First, enable the Commerce submodules:

Drupal Commerce - Enable modules

Before moving forward, check whether you have at least one currency configured (/admin/commerce/config/currencies).

Drupal Commerce - Currencies

Next, add a default store (admin/commerce/config/stores).

Drupal Commerce - Edit online store

Stores are content entities, so when we need to deploy a new store on a server, we have to add it again from the admin panel on the production site.

Now, we need at least one payment gateway. Let’s add invoice payment (admin/commerce/config/payment-gateways). With this payment method, we can collect all the payment information we need to know for a purchase to happen.

Drupal Commerce - Invoice

The Commerce module provides default product type and product variation which we can start using for our store (admin/commerce/products).

Drupal Commerce - Product page

The cart block is not placed on the site, so we have to go to the admin page (admin/structure/block/list/olivero) and place it in whichever area we prefer. We also get the possibility to configure the cart content to appear in the dropdown menu.

Here’s what our cart page looks like at the moment:

Drupal Commerce - Cart

And this is how our cart page is configured (admin/structure/views/view/commerce_cart_form):

Drupal Commerce - Cart form

Since we aren’t logged in at the first checkout step, we’ll get the login form. We can continue as a guest at this point.

Drupal Commerce - Login

Our checkout page is looking pretty good with the default themes. It’s easy to find all the fields we need and it’s clear how to use it.

Drupal Commerce - Order information

Since we only have one payment gateway, it will be used as the default payment method for our order and we won’t have it specified at the checkout.

Drupal Commerce - Checkout

And at the last step, you’ll be also prompted to create an account:

Drupal Commerce - Create an account

This is the very minimum of configurations we need to start our Commerce store. Of course, there are a lot more features we could configure out of the box to make our store more complex from the backend point of view and simpler in terms of user experience, but we’ll keep it simple at this point.

Creating Promotions

Let’s move on to adding a few promotions to see how they work (admin/commerce/promotions). 

Drupal Commerce - Promotions

Here, we’ve configured a promotion for a specific Product type, which means that items of a certain kind will get discounts. If we add coupons to Promotion, products will come with a discount only if a valid coupon is added at the checkout and the conditions pass. By default, we get five offer types:

  • Buy X Get Y
  • Fixed amount off each matching product
  • Fixed amount off the order subtotal
  • Percentage off each matching product
  • Percentage off the order subtotal

It’s easy to extend these types of offers or add our own with the Commerce plugin system.

Adding Taxes

Taxes apply to more or less all goods sold at online stores, so the Tax module is no less popular than Promotions. You can add a tax with custom rates or use the existing ones. There are four currently available plugins we can work with:

  • Canadian Sales Tax
  • European Union VAT
  • Norwegian VAT
  • Swiss VAT

Each of these plugins has defined rates for specific regions. 

Drupal Commerce - Taxes

If we select “Apply taxes to the calculated price” on the product variation price display, we’ll get a price with taxes included. For instance, if we have a product with an original price of $20 and a 25% tax rate on the product page, the final figure we’ll see is going to be $25. Taxes are displayed on the cart page so that customers know the amount they’ll pay as the tax.

We can also enable an extra module called Commerce Product Tax Conditions and set the conditions for taxes in the UI. This module depends on the Product Tax module, which allows to set the tax type for each product.

Drupal Commerce - Cart with tax

If your products’ prices already include taxes, then set “Prices are entered with taxes included” for your store (admin/commerce/config/stores).

Commerce features are built using plugins and services, which means you’re free to add your own or override the existing ones. This is why we have such a great variety of modules that work with Commerce and can add even more features.

Commerce Pricelist

Another module that probably gets used on each and every Commerce site is Pricelist. Use it to control prices for a certain list of products and show these prices to specific users, for example, B2B or club customers. Pricelist also allows you to implement a discount for a user that buys more than one product and gets a lower price as a result.

Drupal Commerce - Pricelist

Start and end dates can be set up with three types of rules:

  • Everyone
  • Specific customer
  • Customer roles

On the Prices tab, we can import/export prices in the CSV format, which comes in very handy when we need a bulk update for prices. There’s a sample import file available, and it’s also possible to set your own columns and delimiters for the CSV file.

Drupal Commerce - Pricelist. Two products

Another interesting field is the quantity of products when the list price is applied. If we add one “Coffee mug” to the cart, the price will be $10, but if we add two or more, the price will drop to $8 per coffee mug.

Drupal Commerce - Discount for quantity

Drupal Commerce - Cart with discount

By default, on the individual product page, we’ll see only the original price, not the price list or the discount price. In order to show the actual selling price, we need to change the price display format to “Calculated.” It should be changed for the product variation type.

Drupal Commerce - Display format Calculated

On the product variation edit page, you’ll find the Prices tab with all price list prices, which are a reference for the variation.

It’s possible to filter out prices by the Pricelist name. You can also add a new price from this page. For that, you just need to select the Pricelist where it should be placed. Product prices can in fact be fully controlled by Pricelists without the need to specify any individual prices. This feature is especially useful for stores that sell a lot of products — updating each of them manually would take too much time.

In our projects, we’ve had a few cases where it made sense to have all product prices be controlled by Pricelists. We added admin pages where admins could find products without prices and could add them into specific price lists.

Drupal Commerce - Prices controlled by pricelists

Commerce Shipping

An online store is not an online store without shipping. Out of the box, we don’t get any shipping methods in the checkout form, so we have to install the Commerce Shipping module. After enabling it, we’ll need to add Shipping methods (admin/commerce/shipping-methods).

Drupal Commerce - Add shipping method

Then, add a shipping information pane to your checkout flow  (admin/commerce/config/checkout-flows/manage/default).

Drupal Commerce - Add shipping to checkout flow

We’ll also need to enable shipping support for our order type (admin/commerce/config/order-types/default/edit) and product variation type (admin/commerce/config/product-variation-types/default/edit). When we enable all these settings, we’ll get a shipping information inline form on the checkout page.

Drupal Commerce - Shipping at checkout

And at the review step, we have a shipping section with shipping details and shipping cost in the summary sidebar.

Drupal Commerce - Shipping at review

When we enable shipping for a product type variation, we get a new weight field for the variation type, so we can calculate the shipping cost based on a product’s weight.

There are a lot of shipping integrations that allow us to use a number of shipping services depending on the region the store will serve. At Lemberg, we developed the Commerce Novaposhta Shipping for the Nova Poshta shipping service in Ukraine. 

The Shipping module includes a variety of features like shipping taxes, package, and shipping types, which you can use for your store to make it more flexible.

I’d like to add a couple of words on where Payment and Shipping addresses are stored, as well as all the extra information customers insert on the checkout page. The Commerce module has a dependency on the Profile module. When we enable the module, it adds a default Customer profile type. This profile type is used for storing all user related information. When a user enters a payment address, Commerce creates a customer payment profile entity and a shipping profile entity for the shipping address. The order has references to these two entities and uses their data for the order receipt. If we want to use different fields for shipping and payment, we can enable form modes for the Customer profile and configure the display of the fields we need. 

Setting up payment gateways

There are many commerce payment gateway modules that implement different payment services. Most of them work with Drupal 8.x, but not all are ready for Drupal 9.x. You can find the full list of modules on the Commerce docs (there are around 140 of them). PayPal is one of them, and it already supports Drupal 9.x. 

Drupal Commerce - Add payment gateway

Drupal Commerce - Payment gateways

So now we have two options for payment in the checkout form — invoice and PayPal.

Drupal Commerce - Payment gateways at checkout

If you plan to migrate an existing online store or run a new one with a custom payment service, you’ll be pleased to know that it’s not that hard to implement it with Commerce gateway plugins. One of the reasons why we have so many modules is the smart approach to payment system implementation in the Commerce module. 

Conclusion  

Based on my experience with Drupal 9 and Commerce, I can confidently say that they both work well for building online stores. Modules that don’t support Drupal 9 yet aren’t too hard to tweak to make them work. Drupal 8 and 9 aren’t as different as Drupal 7 and 8 — add a couple of patches and that’s that.

The Commerce module covers most of the functionality necessary for online stores. When we have more stores on the newest versions of Drupal and Commerce, we’ll have an even greater variety of new features to choose from, and more of the currently existing issues will be fixed. 

Build your online store with Lemberg

Looking for help building your online store? Our Drupal team has years of experience building ecommerce solutions. Get in touch with Roy Vikovych, our Business Development Manager, to discuss your project!
 

0 Comments
I consent Lemberg Solution Ltd collecting and using provided personal information as set out in the Privacy Policy.

Lemberg is a technology consulting, software & hardware engineering company.

Startups and established businesses rely on our industry expertise to build new products and deliver digital transformation.

Join our Newsletter?
I agree to receive emails from Lemberg Solutions Ltd.