Everything to Know About Headless Magento PWAs

April 14, 2022
by
Rhys Williams

Everything to Know About Headless Magento PWAs

April 14, 2022
by
Rhys Williams
Back to the blog
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

Progressive web apps (PWAs) have grown in popularity because of their superior speed and performance—and the ability to be app-like—without the need for your shoppers to download anything to their device. 

But PWAs do much more than mimic the performance of native apps, they’re powerful tools for creating ultra-fast loading, responsive ecommerce websites, whether on desktop, mobile, or other devices. 

If you’re using Magento (or Adobe Commerce as it’s now marketed) to provide ecommerce, but need to outfit your online store with a more powerful frontend capable of enhanced customer experiences, then redesigning your site as a PWA is the best way to do it. 

Below, we’ll cover the benefits of a headless Magento store, plus answer all your questions on what it takes to actually take Magento headless with PWA technology.

Try the jump links to hop to the question that interests you most:

Let’s get into it!

What is a Magento PWA?

Magento powers many successful online stores, and their more recent headless offering has allowed brands to do much more with their customer experience than before. 

PWAs offer an extra level of flexibility, speed, and accessibility, allowing you to create fantastic shopping regardless of channel. 

In short, a Magento PWA refers to any frontend presentation layer built with progressive web app technology and using Magento as a backend solution (managing payments, compliance, checkout, etc.). 

Using PWAs to fuel your Magento storefront is possible thanks to Magento’s decision to separate their backend commerce layer from the frontend delivery layer, freeing you up to use your frontend of choice (much more on this later.)

Now that Magento has enabled headless commerce on its platform, it’s possible to create a much faster, cleaner, and just plain better experience for your customers. 

As well as enjoying all the usual benefits of PWAs, with Magento PWAs you can:

Make your site more visible in search

There are some great SEO plugins and extensions for Magento, but the standard, out-of-the-box Magento frontend comes with its fair share of issues

When you rebuild your site with a PWA, however, you can set up your site indexing and other technical SEO components in a way that optimizes your Magento store’s discoverability in search.

Increase sales and conversions

With the enhanced customer experience and smooth navigation provided by PWAs, your store can better engage and convert. After switching their Magento store to a PWA in 2017, beauty brand Lancome enjoyed a 17% increase in conversions on mobile and an 8% improvement in cart-recovery conversions after they started using push notifications.

Lancome's Magento PWA
Lancome’s PWA Magento site. Credit: Lancome

Speed up your Magento site

Because PWAs need less information before they load and display pages, they can deliver much faster sites than those built using traditional methods on monolithic Magento.
Rooted Objects, an aspirational, ethical marketplace based in India, saw a 25% reduction in page load times and an 80% cut in redirection time after implementing PWA technology on their Magento site. These speed improvements led to a huge 162% increase in conversions. 

Rooted Company's Magento PWA
Credit: Rooted Objects

Future-proof your ecommerce set-up

By using a PWA for your frontend layer, rather than Magento’s standard site template, you’re removing—and replacing—the ‘head’ from your commerce platform. This allows you to use different programming languages and frameworks to design and operate the front and backends of your store separately. 

This frontend-agnostic approach means you’ll have much greater flexibility when it comes to creating experiences on multiple channels. It also makes it much easier to add channels as the need arises. By using a PWA to do this, you’re taking the fullest possible advantage of Magento headless commerce and giving your brand a competitive edge for years to come. 

Magento PWA Studio (now owned by Adobe and marketed as part of Adobe Commerce Cloud) is Magento’s package of tools and resources that allow developers to create PWAs that are compatible with and run on Magento sites. 

But there are many other ways to take your Magento store headless as a PWA. 

Before we get into that, however…

What is headless Magento 2?

Let’s break this question into two parts:

Firstly, what is headless Magento? Magento started out as a monolithic commerce solution; that is, it came as a frontend and backend solution bound together, with a common framework for creating and maintaining both the top layer site delivery that your customer sees and the bottom layer—or the behind the scenes—ecommerce functionality that makes your online store tick. 

As ecommerce has evolved, though, Magento has expanded to meet the more advanced needs of online retailers selling in multichannel and omnichannel contexts. 

To this end, they have separated the top layer (or head) from their backend functionality, enabling merchants to take Magento headless. 

…so what is headless Magento 2? This gets its name from the first Magento release that supported headless commerce. Basically, from version 2.3 onward, Magento has supported APIs that facilitate communication between the Magento backend and a separate frontend—meaning you can design and build your storefront in a framework that suits your needs, rather than being limited by the backend programming requirements.

How do I use PWA tech in Magento 2?

As with most questions in web design, the answer is ‘it depends’. There are several routes to a PWA Magento site, with hybrid options available too. 

But in general, there are four main ways to enable PWA technology in Magento 2 to take your Magento store headless:

1. Extensions to your existing site

This is the fastest and cheapest way to get PWA technology into your Magento site. There are a large number of third-party developers who have created Magento-compatible extensions and these can be easily added to your store. But they tend to have limited functionality as you’re not doing a complete overhaul of your site’s architecture, you’re just adding on PWA features to the set-up you already have.

This can be a good option if you just want to give customers the ability to add your mobile site to their home screen, give your page load times a boost, or make your store more mobile-friendly. But if you want to create a truly immersive and responsive customer experience, you might find a Magento 2 PWA extension underwhelming. Check the features and functionality you’re getting if you go this route, especially if you’re using a free extension. 

2. A pre-built Magento PWA theme

This method gives you greater functionality as you get a complete PWA solution to drive your store, with all the superior performance that comes with it. But the functionality is still limited to what’s been built in by your theme creator, and, while it is possible to customize pre-built Magento themes, it’s not straightforward and you’ll need developers on hand to help you get desired results.

Tailoring a Magento theme can be a long process if you want to create a bespoke customer experience, and the longer the lead time, the more developer costs rise. 

3. A PWA-powered frontend platform

If you want to take your store headless as a PWA, but don’t have an extensive amount of developer resources to craft the ultra-high standard of customer experience today’s shoppers demand, this could be a great option.

In much the same way as you take advantage of Magento’s backend functionality and wealth of experience to handle the commerce functions of your store, a frontend platform gets you access to a low-code environment in which to create breathtaking experiences, you can add rich visual merchandising, and get unrivalled site speed with the flexibility to update your storefront without having to need a huge team of developers.

#cta-visual-fe#<cta-title>Scale effectively: Take your store headless the easy way<cta-title>Learn how Shogun Frontend can help you achieve the exact ecommerce experience you envision. Learn more

4. Creating a PWA from scratch in PWA Studio

This is the solution that will give you the greatest control over how your store works. Building the whole site yourself, you can design exactly the solution you want. But going this route will require a team of developers with specialist knowledge of how to make PWAs and how to integrate them with Magento.

It’s an involved process with a long lead-time. Not only do you have to make the initial time and money investment in developing your PWA site, but if you do it all yourself, you also take responsibility for maintenance and oversight: an ongoing responsibility that will mean considerable overhead, especially when you need to make updates later. 

#cta-paragraph-fe#Note: Third-party Magento PWA themes are built using Magento PWA Studio and market themselves as such. This can make things a little confusing, but the best way to think about it is that PWA Studio provides the tools to build a PWA site. You could build that site yourself, or choose a ready-made theme that someone else has created in PWA Studio.

What makes Magento headless?

Plenty of stores still run on Magento’s legacy monolithic platform. And for many day-to-day desktop site activities, it's a perfectly usable solution. But with the ever-increasing role of mobile and the proliferation of channels in ecommerce, the weak points are becoming clearer. 

It can be a challenge for monolithic Magento-built stores to increase mobile site speed, connect to new channels, or showcase new rich merchandising features. 

These issues stem from the shackling together of the backend and frontend, meaning site changes often involve re-coding, and HTML pages have to jump through hoops on the backend before they can be displayed to your visitors. 

But stores running on Magento 2 can go headless very easily thanks to the introduction of GraphQL, REST, and SOAP as supported APIs (don’t worry if you’re using an older version of Magento—you can update.)

APIs are the crucial links that facilitate backend and frontend separation, and are essentially what makes Magento headless, or to put it more precisely: makes it possible for a straightforward conversion to headless mode.

Benefits of a headless Magento store

Headless-enabled Magento 2 is a big advance on Magento 1, with several advantages over its predecessor. The changes that bring the biggest benefits for online brands are:

  • Increased speed: Because the frontend is not supported on the backend, operations become much quicker than with monolithic Magento.
  • Optimized shopping experience on mobile: Magento 1 did not always provide the best mobile experience for customers, with layouts sometimes being poorly displayed on a smaller device size. Magento 2 fixes these problems with a much more responsive mobile version. 
  • Connect multiple frontends: Omnichannel retail is here to stay, so the need to maintain consistency of customer experience across channels will continue to be imperative. Just as BOPIS and in-store kiosks have gone from fringe capacities to standard offerings, new touchpoints and ways of interacting with the customer will continue to emerge. Connecting new channels to your Magento store is made a huge amount easier with a separate layer looking after your frontend presentation. 
  • Enhanced security: Magento 2 has made some significant improvements in security, including the ability to use CAPTCHA and 2-factor authentication.

The benefits of PWAs and Magento

Of course, it’s possible to go headless with Magento without using PWAs (PWA is just one way to go headless), but if you’re in the position of redesigning your frontend, doing it with a PWA is often the best fit. 

A PWA output will give you:

  • Even more increased speed: Headless is faster than monolithic, and a PWA headless site is even faster still due to the way a PWA loads. This speed is unique to a PWA output.
  • Better UX/UI: Redesigning your site with a PWA means you can create app-like experiences right from the browser. Add this to the increased mobile responsiveness of Magento 2, and you will be able to deliver outstanding UX to your customers. This tends to correlate with increases to your conversion rate as we saw with examples above!
  • Improved SEO: With the advent of mobile-first indexing and Google’s inclusion of speed as a ranking factor, SEO is no longer just about targeting keywords. PWAs give you a head start in the race to climb up the rankings as their speed and customer experience advantages make them more rewardable by search engines.

How much does headless Magento cost?

Is Magento PWA free? Once again, it depends. If we go back to the four methods of taking your Magento store headless with PWAs, the costs break down like this:

Method 1 - Extensions

These are usually the cheapest option, especially if you can install them yourself. But you’ll still need to pay for the extension itself. They start from as little as $100, but these low-cost solutions will only perform a very specific function (adding product labels or enabling customer reviews, for example.) If you need to add a lot of functionality via extensions it can get expensive. Not only that, but you’ll also have a significant amount of extra code weighing down your site. 

Method 2 - Themes

Magento 2 PWA themes range from free to very expensive. If you’re a smaller store or don’t need comprehensive PWA functionality, a free theme could work for you. But if you want to create a competitive user experience, you’ll need to invest in a theme that has the capabilities to match your ambitions. Added to this, you’ll still have oversight costs to contend with and will need to pay developers for any customization requirements.

Method 3 - A Frontend platform

This option may have the lowest total cost of ownership for the greatest functionality. As you’re partnering with a dedicated team of experts, the technical oversight costs will be lower and you’ll need to do less ongoing technical management yourself . 

Method 4 - A Bespoke PWA build

Undoubtedly the most expensive option as you will have to bear the cost of hiring developers to build and maintain the site. You’ll also have ongoing contracts and vendor management expenses. Building and maintaining a totally custom store means you’ll have to assemble a lot of third-party tools and solutions to make it work, all of which have ongoing costs associated with them.

A unified fronted platform: The best way to take Magento headless

Using a frontend platform can provide you with all the benefits of Magento PWA without as much developer cost and technical oversight associated with customizing a pre-built theme or designing your own PWA storefront entirely from scratch. 

Shogun Frontend is built on PWA technology and so can deliver sub-second load times while still allowing you to add engagement-driving elements like high-quality images, video, and richer visual merchandising.

It gives you the flexibility to change aspects of your store and push them to all your channels without having to always code your modifications. 

Shogun is preparing to add Magento as a backend partner later this year, so stores built on Magento will soon be able to take advantage of the frontend platform benefits that Shopify and BigCommerce stores already enjoy. 

#cta-visual-fe#<cta-title>Exceed limits by taking your store headless<cta-title>Learn how Shogun Frontend can help you achieve the exact ecommerce experience you envision. Learn more

Rhys Williams

Rhys is a writer specializing in enterprise software, ecommerce, and SaaS. He describes himself as a geek and a wordsmith and relishes making complex, technical topics come to life in easy-to-understand web copy.