The pandemic aside, buying habits were trending toward mobile and ecommerce for years. Newer approaches to frontend technology, such as headless commerce and progressive web apps, were emerging and growing in popularity to meet this demand.
My co-founder Nick Raushenbush and I knew from experience building our Shogun Page Builder app that there was a need for an upmarket software product to serve larger ecommerce businesses. We saw an opportunity to build next-generation technology that ecommerce companies (and their agencies) around the world could use to create better user experiences, improve the performance of their online storefronts and increase their conversions.
Here is an overview of the technology, the story behind Shogun Frontend and its features, and how it can benefit you and your store.
What is Headless Commerce?
Headless commerce is the decoupling of the frontend from the backend of your website. The frontend is the part of your site shoppers see and interact with, while the backend hosts the behind-the-scenes administrative functions — order and inventory management, storing customer information, analytics, etc. — of your online store.
With headless commerce, you’re using a specialized piece of technology for the frontend that is separate from the ecommerce platform.
Companies generally lean into headless commerce for four primary reasons:
Ecommerce platforms are built in a way that inhibits the performance — specifically speed — of an ecommerce storefront. The output of an ecommerce platform is a standard HTML storefront that’s directly tied to the platform’s backend. This means anything that needs to be processed on the backend, such as loading certain files or computing inventory data, happens every time someone loads your store’s site.
Headless solutions, on the other hand, separate the front and backend processes. With PWA technology, headless storefronts are statically rendered ahead of time — this means the fastest possible Time To First Byte and infinite scalability.
Headless solutions allow marketing teams to make changes to the frontend of their store without worrying about crashing the server or having to funnel their requests through engineering. At the same time, engineers can make changes to the backend without impacting anything on the frontend.
Clients want to have a different site experience — both in terms of content and currency display — for each of the countries they operate in. For example, they want a site to dynamically display content in the English language and prices in the American dollar for visitors in the United States and in Spanish and the euro for users in Spain. Ecommerce platforms are pretty deficient for managing the complexities that come with content management for multiple storefronts, which makes headless a big driver.
4. Unique Experience
Drilling down headless commerce technology further, let’s take a look at progressive web apps.
What are Progressive Web Apps (PWAs)?
PWAs can be configured to look and behave more like mobile applications. Think of a PWA as a mobile app you’d install on your phone, except you don’t need to download it from an app store — it's available right in the browser.
Progressive web apps are next-generation technology that run much faster than traditional websites.
The Importance of Page Speed and Your Conversion Rate
The beauty of headless commerce and PWAs is that you only build one storefront, and then it’s accessible on all devices — from mobile and desktop to digital billboards and video game consoles, any device you can think of that consumers could make a purchase from.
Ecommerce stores see the biggest benefit on mobile with this technology for two reasons: Mobile is becoming the dominant channel for shoppers, and merchants often struggle to keep page load times down on this medium.
Time is money. And quite literally, in ecommerce, every second counts.
In 2018, Google released data on mobile page speed and how it correlated with bounce rate. If a page took one to three seconds to load, the likelihood that a user would bounce increased 32%.
Predictably, the bounce rate gets higher — much higher — the longer it takes your site to load.
Even a one-second delay can mean a 7% reduction in conversions. To borrow an example from Neil Patel: If your ecommerce site makes $100,000 per day, each one-second page load delay could cost you $2.5 million in lost sales a year.
Daniel An, Google Global Product Lead, Mobile Web, said it best himself: “In short, speed equals revenue.”
Our "Why": Discovering the Possibilities of This New Technology
Nick and I first saw a PWA on a friend’s phone in June 2019.
When we saw this style of headless build, we were blown away. And once we learned how complex it was to develop, we were excited about it — we got to enter a new space and innovate on the technology to make it more accessible for merchants and agencies.
Through our experience with Shogun Page Builder, we knew there was a need for this kind of next-level technology. We saw an opportunity to build an all-in-one product, a high-performing storefront.
We wanted to make it as easy to build a PWA as it is to write a Shopify or BigCommerce theme. Except, instead of using an HTML-based templating language like liquid for Shopify, developers would use JSX.
Our idea was to make it easy for brands to build a PWA, while making it simple for developers to implement it. This product would take a fundamentally different approach to building a storefront. Think, PWA 2.0.
And this is why we came up with Shogun Frontend: to simplify the process, while allowing smaller brands to get their hands on this same type of tech.
What is Shogun Frontend?
Shogun Frontend is a digital experience platform (DXP) that uses progressive web application technology to render a sub-second storefront — especially on mobile devices.
As a platform, it empowers marketers and merchandisers to build pages visually and make sitewide content changes quickly with a powerful experience manager and robust CMS.
Shogun Frontend has three primary features:
Experience Manager: A content management solution that allows you to build pages visually by inserting pre-built page sections; edit text, images and video content; and rearrange content sections without writing code. It gives a true-to-view visual preview of what the page will look like.
Content Management System (CMS): A system that allows teams to make sweeping, sitewide content changes from a single location without going into the experience manager.
Code Editor (IDE): A code editor where developers code custom content page sections and make them code-less and reusable by specifying fields for text, images and video. Unlike premade templates or themes, you have limitless customization options.
Typically when you build a PWA, you give up third-party apps (i.e. reviews, forms, subscription apps, etc.), visual editing tools, a nice UI and a comprehensive system.
Not with Shogun Frontend.
With Shogun Frontend, you get an out-of-the-box solution that can make your entire store load within an instant — without the complexity.
The Future of Online Storefronts
The world is increasingly mobile.
In fact, in 2019, over half of all traffic worldwide came from mobile phones. Not to mention younger generations — with rising purchasing power — are also leaning heavier into mobile.