Saleor – Create Your First Storefront App in Python

Quick Overview

  • Saleor is a full-fledged e-commerce platform, and it has features including the management of customers, orders, products, shipping, site administration, among others.
  • Saleor was built using Python and the Django Framework and uses a GraphQL API.
  • It is a headless system, which means that it can be used with different types of front-end technologies including IoT, web apps, and mobile apps.

We included Saleor in our recent article on The Top 10 Python Libraries for E-commerce due to its large amount of features, its current level of development activity on GitHub, and its popularity. In this article, we go through the Saleor installation guide and have a first look at Saleor’s features.

Installation & Setup

Prerequisites:

Have Docker Desktop and Docker Compose installed on your computer.

Note that to install Docker Desktop in Windows Home edition, you will need to follow some special instructions.

In the Saleor documentation, they have an installation guide available that we used to set up the system. Since the installation guide is using Docker, the system is highly portable which is the reason why the only requirements for running Saleor are having Docker desktop and Docker Compose installed on your machine.

Figure 1: Saleor Website

The first step in the installation is to clone the Saleor repository. To do this, run the following line of code in the folder where you wish to install Saleor:

git clone https://github.com/saleor/saleor-platform.git --recursive --jobs 3

Then, change directories into the new “saleor-platform” folder:

cd saleor-platform

At this point, we had to add a step to the installation guide, as we ran into an issue during the process. After running the docker containers, we found that the Saleor storefront was not working properly. After doing some research, we found a GitHub post that helped me fix it. They explained that the issue was caused by a specific commit. The commit in question had a change to the storefront’s build process. To get the storefront to run correctly, run the following line of code while in the saleor-platform folder:

git revert 9549f2f13e7158f229d5459fd5ca93c803c71c41

This will revert the change that caused the error in the storefront build process.

The next step is to add the saleor-platform directory to the list of shared directories in Docker:

Settings -> Shared Drives or Preferences -> Resources -> File sharing

However, if you are running version 2 of the Windows subsystem for Linux, that will not be necessary.

You also need to check that at least 5GB of memory is dedicated to Docker Desktop.

Settings -> Advanced or Preferences -> Resources -> Advanced

Next, run the following lines of code to apply database migrations, collect static assets:

docker-compose run --rm api python3 manage.py migrate
docker-compose run --rm api python3 manage.py collectstatic –noinput

Optionally, you may populate the database with sample data by running the following lines of code:

docker-compose run --rm api python3 manage.py populated

Then, create your admin user by running:

docker-compose run --rm api python3 manage.py createsuperuser

Finally, run use docker-compose to run the system’s docker container:

docker-compose up

First look at Saleor’s Features

In this section, we will take a look at how the front-end storefront and the backend dashboard work in Saleor.

Saleor Storefront

After the docker containers are started, the different components of the system will be running on different ports of your machine. The storefront runs on port 3000, and can be accessed via localhost:3000, or via the link in Docker Desktop.

By choosing to populate the database with sample data, you will be able to see a pre-built store with many products and several categories of products. The store even has an ongoing sale.

Figure 2: Saleor sample store home page

By clicking on a category, you will see a grid with products of the selected category. The store includes filters for product attributes and sorting functionality.

Figure 3 Product category page with Filters shown

The system also includes search functionality that has quick search. This shows search results as you are typing your query.

Figure 4: Saleor search with a quick search result.

Products have images, variants, the ability to change quantities, and attributes. In the sample store you can navigate and do the actions you would in an online store, including adding an item to the cart and checking out. Adding an item to the cart opens a sidebar with the items currently in the cart.

Figure 5: Adding an item to the cart.

By going to the cart, you can see the items currently in the cart and you can change the item quantities or remove items from the cart. You can also proceed to checkout.

Figure 6: Saleor Sample Store Cart

To check out, you can choose to checkout as a guest or register for an account.

Figure 7: Checkout options.
Figure 8: Shipping Address Form with form validation

Then the user can choose a shipping method.

Figure 9: Shipping method selection

The user can then choose a dummy payment method.

Finally, an order review page appears:

Figure 10: Review Order

After placing the order, the user is redirected to a thank you page.

Figure 11: Thank you page

Saleor Dashboard

Moving on, let’s look at the Dashboard. The Dashboard should be running on port 9000. It can be accessed at localhost:9000 or using the link available in Docker Desktop. Upon logging into the dashboard, the user sees some information on sales and orders for the current day.

Figure 12: Saleor Dashboard Home

In the Catalog section, you can modify product categories, collections, and the products themselves. For each product, you can modify the name, description, images attributes. You can select Categories and collections that a product belongs to. And you can edit SEO-related data and other metadata for the product. Different variants can be created for each product as well, these are different versions of the product that can have different prices. For example, this could be different-sized bottles of juice.

Figure 13: Product variants example

Categories and collections also have several properties you can modify including the name, description, and background image. You can also edit the SEO properties and metadata of the category or collection page. Products can be added to a category in the category’s dashboard page, while products or categories can be added to a collection in its dashboard page.

In the Orders section, you can access a list of all the orders that have been made in the store. The list has filters and a search function. By clicking on an order you can see all the information about the customer, the items purchased, shipping information, and payment information.

Figure 14: List of orders in the Saleor Dashboard
Figure 15 Order screen in Saleor Dashboard for our test order.

In the Customers section, you will see a list of all the store’s registered customers. In the list, the Customer Name, Customer Email, and the number of orders they have placed are visible. Within each customer’s page, you will see their personal and contact information, addresses, and list of orders.

Figure 16: Saleor Dashboard Customer list

In the Discounts section, there are two types of discounts: Sales and Vouchers. Sales are applied based on assigned products, categories, or collections, but do not require the user to enter a code. Vouchers can also have assigned products, or they can have requirements based on the customer’s order, and they also require the user to enter a code.

On the sales page, you will see a list of all the created sales. On each sale’s page, you will be able to modify the Name, discount type, discount amount, and the categories, collections, or products that the sale is assigned to. You can also set a start and end date for the sale.

The voucher page also shows a list of all the vouchers that have been created. Each voucher’s code is unique and cannot be edited once it is created. Within each voucher’s page, you can edit the discount type, the discount amount, the minimum requirement, active dates, and the usage limit per voucher or customer for each voucher.

Figure 17: Sales List
Figure 18: Saleor Dashboard Voucher List

In the Apps section, you can manage apps installed on your Saleor store. There is going to be a Saleor App Marketplace soon.

Figure 19: Saleor Dashboard apps section

In the translations section, you can complete translations for different languages.

Figure 20: Saleor Dashboard translation section.

In the configuration section, you can modify several aspects of the store including attributes, product types, taxes, staff members (store backend users), permissions for backend users, shipping methods, warehouses, navigation, site settings, pages, and plugins.

Figure 21: Saleor Dashboard configuration section