Going Headless with Shopify

Going Headless with Shopify

(Special thanks to our friends at Onilab for this post!😘)

The eCommerce world is stepping into a new era of headless commerce, and it’s crucial for you as a Shopify store owner not to fall behind.

The term is closely interconnected with major trends in online retail: omnichannel and mobile commerce. According to Statista, in 2016, stores sold more via smartphones than desktops for the first time. The gap has been growing ever since.

And here's the catch. The predominant web architecture up to now is a monolithic one, which is initially desktop-oriented. Now it cannot provide an equally great UX/UI, lightning-fast speed, and seamless customer experience on mobiles and desktops simultaneously. Not to mention that it will struggle to support emerging IoT devices.

Here headless commerce comes into play. Below, we’ll discuss the differences between the current and future approaches to building online stores.

Then we’ll outline the key benefits of headless and give you some advice on whether your Shopify store needs this upgrade or not.

Headless vs Monolithic Architecture

Monolithic Architecture

Most websites are still monolithic. The leading working principle of this architecture is a close connection between the frontend and backend: the former is always generated on the latter. As something changes (e.g., a user goes from the main page to a catalog and then to a product page), there is a need to fetch a new HTML file from the backend.

What’s wrong with that? Let’s outline:

  • Firstly, websites load slower than visitors would like them to. Generally, mobile versions perform worse than desktop.

  • Secondly, monolithic stores often can’t boast brilliant UX/UI on smartphones because they were geared for desktops. Brands with mobile apps can’t guarantee a seamless customer experience if clients want just to browse, not download.

  • Thirdly, opportunities for customization (for instance, alterations in a layout) are hindered because they imply changes in the backend code.

Fourthly, moving towards omnichannel is tough. Eventually, it requires separate frontends designed for each device (from smartphones to smart speakers and so on). When there are more possible touchpoints for shopping, what will you do to convert on them too?

Headless Architecture

As you understand, headless commerce came as an answer to all these issues. This architecture separates the frontend (or “a head”) and backend, making them work almost independently and communicate through API.

How will this approach improve your online store and shopping experience?

  • Firstly, it boosts the speed of a website. This is because HTML files are generated on the frontend, while from the backend, we need only specific dynamic data.

 

  • Secondly, you can create and connect particular interfaces for a few devices far easier than with the monolithic architecture.

  • Thirdly, there will be more flexibility in terms of tweaking and customization. You’ll be able to design a more convenient and personalized customer journey, which is otherwise not available for Shopify stores (as a template-based SaaS platform).

  • Fourthly, this is a big step towards omnichannel. You will be ready to leverage every new touchpoint in the future.

Need help optimizing your website to increase your revenue?
That's what we do!

Drawbacks & Expenses of Headless

We should warn you that the transformation of your Shopify store isn’t a simple task. It involves substantial investments.

  1. a) It’ll require quite a lot of money

The price starts from about 65.000 USD. Headless commerce pricing may vary depending on numerous factors:

  • type of headless commerce solution (for instance, a progressive web app (PWA),
  • the CMS itself (Shopify Plus, Magento, BigCommerce, etc.),
  • store size,
  • the needed level of customization,
  • and the number of frontends to develop and plug (a desktop, mobile, and tablet versions, a native app, and so forth).
  1. b) The duration of rebuilding

The general time frames for the transformation can be longer than expected.t can take up to 8-10 months.

  1. c) Hiring a good development team

You can follow one of the several ways:

  • turn to an agency,
  • find a FEaaS (frontend-as-a-service) provider,
  • or work with your team.

In the last case, you’re likely to expand the IT department: seek new frontend developers or foster those who will know both Shopify and one of the progressive frameworks like React.

However, it might be correct to name the aforementioned aspects as “costs” rather than disadvantages. It’s all about modernization which drives eCommerce in terms of speed and UX/UI, evolves its omnichannel potential.

Do you really need such a leap? Of course! According to research by Salesforce, 74% of consumers use a few channels during a customer journey.

Does My Shopify Store Need to Become Headless?🤔

Surely, such a significant upgrade is not relevant for every single Shopify store. If you run a small one where the navigation is simple (from phones as well), and you’re satisfied with the KPIs, then you can put this idea aside (at least for a while).

But in the next instances, we highly recommend you considering the headless architecture:

  • If you want it to be way more mobile-friendly (and any-device-friendly in prospect);
  • If you want to provide customers with an excellent shopping experience;

  • If you have an intent to scale your eCommerce business;

  • If you’re not pleased with your bounce rate, cart abandonment, and conversion rates on mobile;

  • If your results in PageSpeed Insights need improvement as well as your Google rankings;

  • If you’re afraid to fall behind the competitors on the market;

  • If you want to create a store’s interface (or interfaces) with unique UX/UI.

Did you recognize yourself in one of these cases? Then headless is a proper choice for you.

Headless Shopify Examples

Some of your colleagues, Shopify store owners, have already chosen headless commerce and found this extremely worthwhile.

Implementing a headless commerce solution allowed this apparel brand to speed up the store and ameliorate the user experience. Take a look at the screenshots above. Thanks to developing a PWA, Kotn obtained a website that looks and feels for visitors like a mobile application. It’s super quick, easy to navigate, and convenient to use.

Also, founders note that now they are ready for further scaling and dealing with technologies that will emerge in eCommerce in due course.

First and foremost, this accessories brand wanted to rethink the frontend. The default one wasn’t good enough in terms of overall usability and navigation through the catalog and categories in particular.

Besides this, going headless with a PWA gave the store a speed boost. By the way, both web apps that we’re talking about are installable: anybody can add the icon to the home screen and enjoy shopping (without downloading anything!)

In Conclusion

Today, to sell more and thrive, a store must meet several requirements, including being mobile-friendly and having superb loading speed. Tomorrow, to keep pace, eCommerce players will need to also provide a great customer experience on any touchpoint you could have imagined. Headless is exactly the solution that helps future-proof your business.


About the Author

Alex Husar, chief technology officer at Onilab with almost a decade of successful Magento migration and PWA development projects for eCommerce companies around the globe. Being a Computer Software Engineering specialist, Alex is equally competent both in terms of full-stack dev skills and the capability to provide project-critical guidance to the team.

Leave a comment

Please note, comments need to be approved before they are published.