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 and you’re wondering how to create an online store with Drupal, you’re in the right place.
There’s a great variety of ecommerce platforms you can choose from, but in this post, I will focus on how you can create an online Drupal Commerce store. It’s a great option, and here’s why:
Why create an online store with Drupal Commerce
- 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 a Drupal Commerce shop 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 ecommerce Drupal functionalities.
- 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 marketplace or online shop 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 to set up a Drupal Commerce store based on this module alone. We’ll also check out all the built-in Commerce features on Drupal 9. We’ll use Claro as the admin theme and Olivero as the front theme to showcase this Drupal Commerce marketplace tutorial.
First, enable the Commerce submodules:
Before moving forward, check whether you have at least one currency configured (/admin/commerce/config/currencies).
Next, add a default store (admin/commerce/config/stores).
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.
The Commerce module provides default product type and product variation which we can start using for our store (admin/commerce/products).
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:
And this is how our cart page is configured (admin/structure/views/view/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.
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.
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.
And at the last step, you’ll be also prompted to 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).
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.
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.
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.
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.
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.
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.
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.
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).
Then, add a shipping information pane to your checkout flow (admin/commerce/config/checkout-flows/manage/default).
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.
And at the review step, we have a shipping section with shipping details and shipping cost in the summary sidebar.
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 Solutions, 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.
So now we have two options for payment in the checkout form — invoice and PayPal.
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.
