Saleor 3.0: multichannel, extensibility, improvements

If you’re not already familiar with Saleor, it’s a headless commerce platform powered by GraphQL, Python, React and is Next.js ready. As an open-source project, you can run and maintain Saleor on your servers for free. However, if you don't want to maintain the platform yourself, you can sign up to run it in the cloud (public release coming soon). This way, your developers don't have to worry about backend deployment, version updates, scalability, and availability.

The Saleor 3.0 Journey

Saleor 3.0 is the biggest update yet! First of all, we’d like to thank you for your patience and support during the development process. It took us some time to battle test it in production - working with big brands such as Lush. And now, it’s finally here!

Before we talk more about what has changed and improved, we’d like to share some numbers with you.

We pushed around 1700 commits to the Saleor API.
We released 43 Alpha versions, 45 Beta versions, and one RC.
The codebase of Saleor increased by 70% during the development of 3.0 when compared with 2.11.
Saleor gained more than 5000 GitHub stars during the development of 3.0 and has reached over 15000 in total.

Multichannel

The major feature of this release is the multi-channel functionality. What is Saleor multichannel? It’s the ability to create multiple sales channels that can be operated from a single dashboard. Define pricing, stock, currency and payment method based on the platform or location you sell from, e.g. Instagram, Facebook, Amazon or Japanese, Danish or US sites, all managed from one Saleor dashboard.

Additionally, you can set variants, shipping, and plugins per channel.

Saleor Multichannel

Learn more about the multichannel functionality in the following documentation sections:

Powerful extensibility

Our headless approach helps us to constantly improve the extensibility of Saleor. The Apps feature delivered with 2.11 has been juiced up significantly in 3.0. Saleor allows custom apps to be added to the dashboard. Extend Saleor without forking the code to cover things like PIM, loyalty programs, and discount logic. Write your apps in whatever language you choose!

Webhooks

Using webhooks allows users to easily integrate Saleor with external services. Synchronous webhooks are used for extending Saleor without the need to deploy plugins on the API server. Saleor 3.0 introduces synchronous payment webhooks that allow delegating payment handling to Saleor Apps. Thanks to them you can implement a new payment gateway without forking the code.

3.0 also introduces asynchronous webhooks dedicated to filtering shipping methods in checkout and order. Asynchronous webhook events can be used to receive data from Saleor when particular events happen. As a result, app operations are not sent back to Saleor. Additionally, they can use Google Cloud Pub/Sub and AWS SQS.

For instance, you can use webhooks to build your own integration with an email service. It can inform such a service about a new order and automatically send an email to the customer.

Metadata

The Metadata functionality was introduced in Saleor 2.11. It allows users to add additional information to objects that do not necessarily need to be attributes. For example, it can be the ID of an external warehouse system or other integrations.

We constantly extend this Saleor feature by adding metadata to new objects. It’s a powerful feature and is used quite often while building Saleor apps.

Learn more about the key concepts of extensibility in Saleor in the following docs.

Powerful content editor

Media Gallery

Saleor now allows you to upload videos to your product page via URL links. You can find more details about this in the following docs. Take a look at the Lush example below:

text

Page types

Saleor allows you to define the types of content pages used in your store. Users can create additional content pages related to their products. For example, an ingredient page. See the use case from Lush below:

text

Rich Text editor migration

All rich text fields now use Editor.js instead of Draft.js. Our database migration should convert the old format to the new one, although visual inspection is recommended.

To render rich text on your storefront, you can use Editor.js in the read-only mode, or use one of the libraries recommended by its authors.

Front-end developers can format text using their own logic thanks to the JSON format. Packages already available can also be used.

We'll be improving the content editor by adding new great features in future releases.

Improved attribute system

We’ve extended the attribute system by adding new attribute types and the content attribute class. Saleor 3.0 introduces the following new attributes:

Text

A text attribute is an attribute that allows admins to provide value for the attribute via a rich-text editor. Admins can use it to add additional content sections to better describe your product. Another use is to use data that requires access to both alphabetical and numerals such as to provide ISBN numbers for your books,

Numeric

A numeric attribute allows admins to provide numbers as values of attributes. Numeric attributes also have the ability to add units to the attribute. Numeric attributes have applications such as defining the size of packages, describing specs for electronic devices or suchlike. It can also be used to provide internal catalog numbers if they differ from the SKU provided for the system.

Boolean

The boolean attribute allows admins to define whether a value is true or false. A use example from a storefront perspective is to tag a product as “editor’s choice”, “bestsellers”, etc. From a back-office perspective, you can use it as a part of an integration to define products that, for example, have hazardous materials, and the integration could check the value and provide shipping methods accordingly.

Date/Date time

These attributes allow admins to define a date or date and time as a value for the attribute. It can be used for attributes that define release dates for products, or delivery time.

Learn more about the attributes here.

text

What else have we recently brought to Saleor 3.0?

Improved refund feature

Users are able to choose whether to refund a full or partial order, add shipment costs to the refund, or fill in a manual amount.

text

Improved discount feature

You can create a sale with a fixed amount or percentage and assign it to a specific channel. The Vouchers option allows users to create vouchers with the same discount types as sales and with the free shipping type.

text

While creating a draft order, you can also add a fixed or percentage discount directly from the draft order details view.

MacawUI

This is a UI library with the look and feel of our dashboard. It can be used for creating Saleor apps with the same interface as the rest of the dashboard. We’ve recently added new components. You can find documentation in our storybook.

Stripe plugin

We’ve developed a new Stripe plugin from scratch. Saleor can receive asynchronous information about payment confirmation. Now, the Stripe plugin is SCA-ready.

You can find more details about the plugin here.

React Storefront

We’ve started working on a new react-storefront project. It’s a starter kit created in order to build new, modern storefronts. This project focuses on best practices for e-commerce, like SSR & ISR, and image optimization. One of the biggest advantages of using a react-storefront is its easy customization. In the future, we’d like to use this project to show different ways of using the API.

You can still use the saleor-storefront repository but it won’t be maintained any longer. Our plan is to eventually replace it with the newer project.

Saleor SDK

This package contains methods providing Saleor business logic for storefronts and apps. It handles Saleor GraphQL queries and mutations, manages Apollo cache, and provides an internal state to manage popular storefront use cases. What’s more, authentication is now fully supported. We are successfully using it in production for some of our projects.

Learn more about the SDK here.

text

Documentation and learning materials

We give more attention to our documentation. During the development of 3.0, we’ve added the long-requested API reference and improved many sections. We would like to continue improving them step by step. We’d be happy to see your feedback on GitHub Discussions.

If you would like to find more info on how to use react-storefront on top of the Saleor API, check our tutorial.

Bugs fixes, improvements, and performance

Additionality, we’ve fixed tons of bugs, refreshed the appearance of the Saleor Dashboard, and improved performance to the speed of light!

We’ve put extra care into analyzing queries on large databases. After battle testing with our clients, we used data loaders, paginations, and other code optimizations. As a result, if your project has thousands of attributes, it shouldn’t be a problem.

Changelog

The above notes are not the only changes we delivered with this release! To learn more about all the new features and improvements, please check the changelog of the Saleor 3.0 release. The migration guide can be found here.

Thank you!

In this article, we highlighted some of the key changes and improvements in Saleor 3.0. A big thank you to all contributors and community members for their input! We appreciate each piece of feedback and every pull request. We couldn't be happier to see you using Saleor 3.0 for your projects.

Follow our Twitter and sign up for our newsletter to stay up to date with the latest info about Saleor!

Cheers!

—The Saleor Team

Open positions / Work with us

If you love open source as much as we do and want to join the fastest growing e-commerce platform on GitHub, check our current open positions.