With the explosion of online commerce, creating a robust, flexible e-commerce platform tailored to the specific needs of each business has become a major challenge. Drupal 10, the latest version of the popular open source CMS, is positioned as the solution of choice to meet these requirements. In this article, we guide you step by step through the process of building a complete e-commerce site (managing deliveries, payments, customer reviews, wish lists, etc.) in just a few hours.

Why choose Drupal 10 for your e-commerce site?

Drupal 10 is based on a modular architecture, allowing you to add features by installing and configuring dedicated modules. This approach offers great flexibility and is particularly suitable for experienced developers, who can leverage their expertise to select the most appropriate modules for each need. However, this modularity can also lead to longer development times, especially for complex projects.

To address this issue, we have developed a Quick Start “E-commerce Sale of Bags.” This turnkey solution allows for quick and complete installation of a functional e-commerce site, simplifying the configuration process and significantly reducing deployment time. ( See the "E-commerce Sale of Bags" template ).

To help you set up your platform, we have structured this guide into three essential steps:

1. Preparing the environment
2. Installing Drupal 10
3. Presentation of some e-commerce features

Preparing the environment

To ensure optimal installation and operation of your e-commerce site under Drupal 10, it is essential to configure a suitable environment. Here are the technical recommendations for preparing your infrastructure:

1. PHP :  Version 8.2 or higher.
2. MariaDB :Version 10.10.0 or higher.
3. Node.js : Version v19.0.0 or higher (optional).
4. NPM : Version 8.19.2 or higher (optional).

For more details on technical requirements, please refer to Drupal's official  "System Requirements" documentation.

Why are Node.js and NPM optional?
The Node.js and NPM packages are only necessary if you want to use our advanced style management approach. This method allows you to:

• Update and customize your site's styles dynamically.
• Easily manage colors and spaces to comply with your graphic charter.
• Add new page and section templates while maintaining visual consistency.

By integrating this approach, you benefit from increased flexibility to tailor your site to your specific needs, while optimizing the user experience.

Make sure your environment is properly configured before moving on to the next step. This will allow you to take full advantage of the powerful features of Drupal 10 and our e-commerce solution.

Installing Drupal 10

Create a ‘shoppings’ folder and access this folder.

cd /siteweb/shoppings

Initialize the project with composer:

composer create-project habeuk/habeuk_project_commerce:^10.0.8 public --no-interaction

Download files with composer

cd public && composer install

Then start the installation via the finish button.

drush si

Enter the requested information, such as the database name, user name, etc...

That's it, your e-commerce site is ready.  

Presentation of some e-commerce features

Our e-commerce site has many features, the most relevant of which are:

• A sleek and responsive design : Responsive design adapted to mobile devices, tablets, and computers.
• A sleek product presentation : An HD image and video gallery to showcase products.
  
   
• Filters and advanced search : A search function that allows you to find a product based on its characteristics.
  
   
• Optimized add-to-cart process:
  
   
• Optimized checkout :  Simplified steps (identification, delivery, payment) with guest checkout option (no account creation required).
  
   
• Optimized checkout : Verification of information before payment