How Shogun Frontend is Changing the Game

September 15, 2020
by
Finbarr Taylor

How Shogun Frontend is Changing the Game

September 15, 2020
by
Finbarr Taylor
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:

Mobile ecommerce is big business.

In the United States alone, mobile retail revenues were projected to reach nearly $340 billion dollars this year, up from $207.15 billion just two years earlier. And amid COVID-19, shelter-in-place orders and brick-and-mortar store closures, U.S. ecommerce is expected to grow 18% in 2020 — following a 14.9% growth in this channel in 2019 — signaling a larger shift to digital.

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.

That product is Shogun Frontend.

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:

1. Performance

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. 

2. Stability

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.

3. Internationalization

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

Most sites created through ecommerce platforms are built using themes or page builders. These options really limit creativity and interactivity that often requires JavaScript. If you want a unique offering with special site interactivity or design, you're going to need to custom code, which makes headless a serious consideration.

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. 

A progressive web app, or PWA, is an application software built with HTML, CSS and JavaScript. It’s a type of website or webpage that behaves more like software than a traditional website, including pre-fetching more screens and content than is needed in the moment. PWAs can work in low connectivity states (even offline in some instances) and employ functionality like push notifications, too, much like native apps.

Progressive web apps are next-generation technology that run much faster than traditional websites.

This is powerful for ecommerce companies since there is a direct correlation between page load time and conversion rate. And progressive webs apps have much higher conversion rates than traditional mobile 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.

Think With Google survey results: page load times
Image source: Think With Google

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 logo

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:

  1. 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.
  2. 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.
  3. 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.

graph of a traditional PWA setup

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.

shogun frontend setup

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.

Meet your audience where they’re at with Shogun Frontend. 

Designed specifically for ecommerce companies, Shogun Frontend is a headless commerce solution that works seamlessly with leading ecommerce platforms to deliver fast, user-centric mobile experiences.

We’re changing the game: Sign up for a demo of Shogun Frontend today and experience the future of the ecommerce storefront.

Finbarr Taylor

CEO and co-founder of Shogun.