We believe that Saleor is one of the most interesting e-commerce solutions currently available on the market. And, contrary to what one might think, our opinion is not at all biased by the fact that we helped to write it.

If you want to learn the reasoning behind our belief, we invite you to take a look at our

first piece about Saleor. We devoted it to discussing the ways in which Saleor can help online businesses thrive.

This article will focus on choosing the right front end to maximize Saleor’s performance.

Saleor is Headless - What it Means?

First of all, let’s discuss the very concept of a headless solution. What does it mean that Saleor is headless? Is it good or bad?

Let’s answer those questions one by one.

A headless solution is a kind of software product that only consists of a back end. To be useful to end-users, it needs to be paired up with the front end. How does it work?

Front End and Back End - You Can’t Have One Without the Other

Almost every software consists of two layers - front end and back end. (When you think of a world, you might come to the conclusion that the above statement can be applied to much more than software).

The back end is responsible for computations. It does the work that has to be done. Processes the data and performs all the necessary calculations.

The front end is what is seen by the users. The front end presents the outcome of the work done by the back end in a user-friendly way.

Disclaimer: that is, of course, a very simplified way of describing those interactions.

In a headless solution, the back end and front end are entirely independent and only communicate with each other with the use of application programming interfaces (APIs).

Is Headless Good?

The answer to this question is straightforward and, unfortunately, very annoying - it depends. Or, in other words, such a solution has its pros and cons.

The Problem

The first conclusion that comes to mind is that a headless solution is just half of the software needed for the job. That’s definitely a disadvantage.

What are the advantages to outweigh it?

Security

Decoupling the front end and back end increases the level of security of the entire system. Since all the operations are performed by the back end and only the outcome is exposed via the API - the system is much harder to hack. In an e-commerce solution, that is undeniably a big plus.

Customization

Another one is the unlimited possibility of customization. With the custom front end, the e-commerce solution is bound to be one of a kind. There is no way for the two shops to look the same because the owners chose the same template.

But the interface is not the only thing that can be tailored to specific needs. The perfect front end should implement the exact number of features that are needed for the particular business. It’s the end of confusing options and non-intuitive navigation.

Control

Finally, people like what they already know. When the front end and back end come as a package, you have no influence over the changes implemented by the provider. So one day, your business might get an entirely new look. When you use a headless solution, changes in the back end do not influence what your customers see. You are the person in charge.

Now you know that if you want to choose Saleor, you will need to get yourself a front end. What are your options?

Three Ways to Approach Front End

When it comes to the front end for Saleor, there are three options for you to choose from:

1. Saleor Storefront
2. Custom front end
3. Customizable ready-made solution
   

Later in this chapter, we’re going to discuss each of them in more detail, listing their pros and cons.

We were the ones stressing the influence of the front-end choices on the overall Saleor performance. Hence we will do our best for this section to be as detailed as possible.

Let’s take a look at the front end that comes with Saleor. Is it a valid option to consider?

Saleor Storefront

From the title of this section, one might think that the demo front end built by the Saleor team is the best front end one might get for this e-commerce solution. End of story. But if that was the case, why would Saleor’s team consistently call their product a headless e-commerce solution?

The answer is simple: Saleor IS the headless solution. The demo front-end project is precisely what it’s called - a demo. The Saleor team doesn’t even recommend using it as a starter for writing the custom solution. They are open about it being obsolete and carrying a lot of technical debt.

Those who want to see how Saleor’s team approaches the front end compatible with their product will appreciate that they are working on the new demo front end implementation. However, the release date is unknown, and they keep claiming it is still going to serve the demo purpose solely.

Given the above, the Saleor Storefront can only serve as an inspiration (and not even a solid base) for building the custom front end. After all, Saleor is a headless solution.

Custom Front End

Since there is no ready-made front end from the creators of Saleor, if you want to use it, you need to get the front end elsewhere. The most straightforward option is to build one in-house or outsource it to the software provider.

Such a decision comes with a lot of upsides. It allows for complete customization. Not only concerning the user interface but also the optimal adoption of Saleor’s features. Custom solutions are tailored to your business needs in every detail. Plus, you can provide your users/clients with the perfect UI consistent with other communication channels.

Technology-wise, custom solutions give you the option to choose the one that's perfect for your endeavor. It’s up to you and/or your provider to decide if you go for the newest or the safest one or if you try to strike the perfect balance between both.

Unfortunately, custom solutions come with a significant drawback - they tend to be costly. And, they need to be updated whenever Saleor is.

So is there any other way to have a front end for your Saleor?

Customizable Ready-Made Solution

Building the Saleor front end from scratch is a considerable investment, especially for smaller organizations. Since we are the ones doing it for our clients, we understand it very well. That’s how we realized there is a market for another solution. The robust modular e-commerce back end like Saleor needs a powerful, modular front end solution. This is how we came up with the idea of Vueshop.io.

It is meant to serve as a customizable Saleor front end that can be implemented almost out of the box. It doesn’t need a UX designer, a qualified technical team, or a graphic designer. All of their work was done upfront by our team.

When it comes to customization, it’s up to you whether you choose from the templates or hire a graphical designer to prepare something unique.

Such a solution does not come with all the perks of a fully custom one. On the other hand, though, it is much cheaper and, above all, hassle-free.

The next section will help you better understand the difference between custom and customizable.

Comparison of Custom and Ready-Made

To the disappointment of many organizations, Saleor does not come with the front end. The only thing that’s available from their team is a demo that’s not even recommended to serve as a template for the custom solution. This means that when it comes to using Saleor for your business, there are only two possible front-end choices: custom front end and ready-made, customizable solution.

This chapter is going to discuss the pros and cons of each of these options in detail, letting you fully understand the differences.

The Advantages

Let’s look on the bright side and start with the advantages of each of the solutions. Contrary to common-sense belief, a custom solution does not always have to beat the generic one.

The Pros of the Custom Front End

• It’s perfectly tailored to your needs.
• You have complete control over the technology used.
• You decide on the graphical design (colors, layout, other graphical elements).
• You can customize the UX (user experience) (in ready-made solutions, the layout is often pre-defined).

You can design the CX (customer experience) to match your other channels.

The Pros of the Ready-made Front End

• It’s available instantly. You don’t have to wait for it to be written.
• It uses a proven technological stack.
• There is a team constantly working on improvements.
• It gets updates matching the Saleor back end.
• It’s budget-friendly.
• It’s UX (user experience) optimized.

It can be seen at first sight that the lists of advantages of both solutions are of similar sizes. Let’s go to the next paragraph to examine the faults of each of them and make the picture even more transparent.

The Disadvantages

What are the cons of each of the discussed solutions? Does a fully custom front end has any other downside than the cost? Let’s find out.

The Cons of the Custom Front End

• You need to hire a team of developers or an external provider
• Every time there is an update, your team needs to write an update too. There are no automatic updates.
• Hiring a dev team or an external provider is costly
• Writing a custom front end takes time

The Cons of the Ready-made Front End

• The ready-made front end is not fully customizable
• With the ready-made solution, your business does not get the unique look
• Choosing the ready-made, customizable front end means you have no control over the technology used
• It might not be possible to match the ready-made front end with your other channels to provide consistent CX

Apparently, the list of disadvantages of both solutions is similar in length too. This means that the right choice for your business has to be based on the criteria unique for the case. There is no simple answer on which one is better.

Vue.js - The Future of Front End

Writing about the front end for Saleor e-commerce, we cannot skip mentioning Vue.js. At first sight, those two topics may not seem connected, but they have more in common than one might think.

First of all, as can be easily inferred from the name, we used Vue.js to build our project Vueshop.io. So if you decide to go for this customizable ready-made solution, you are choosing Vue.js as your front-end framework by default. We have to admit we think it’s working perfectly, giving end-users the kind of experience they expect from modern e-commerce solutions. What’s important its performance is equally good on desktop and mobile devices.

Bur Vueshop.io is not our only project. As we’ve mentioned before, we saw the need for it because our bread and butter is building Saleor front ends for various clients. We found Vue.js perfect for this job. It is lightweight, fast, and pleasant to work with. It allows for seamless cooperation between software engineers and designers, which is crucial for building appealing UIs. And last, but not least it speeds up the development. And in software development, nothing is more accurate than “time is money.”

So no matter if you choose to build the custom Saleor front end from scratch or go for our Vueshop, Vue.js is a technology to consider.

Summary

Saleor is one of the most interesting modern e-commerce solutions. However, its most significant feature - being headless - may, for some, be its biggest fault. There are companies that find developing the custom front end to work with Saleor too significant an investment. To make Saleor more approachable for such players, we propose Vueshop.io - a ready-made, customizable front-end solution.

Written in Vue.js, Vueshop.io allows all organizations to enjoy the full capability of Saleor without worrying about the front end. It just matches Saleor's robust back end with an equally powerful UI.

‍