hero image

Unprepared Ep 57 - Things to Consider Before Going Headless with Nick Raushenbush

Timestamps

  • [00:00] - Sponsor: Rewind
  • [00:40] - Intro
  • [01:30] - What is headless?
  • [02:30] - How is headless used in Ecommerce?
  • [06:00] - Why people find headless so scary
  • [06:35] - Having headless CMS is fast
  • [07:40] - What is Shogun?
  • [08:40] - Cloning and sinking page builder
  • [09:20] - Brands want more flexibility
  • [10:10] - Performance of headless
  • [10:46] - Building PWA
  • [12:43] - How Shogun powers the new DXP
  • [14:00] - Solving sections everywhere in Shopify
  • [14:40] - Who should use Shogun? 
  • [16:10] - Parting words

Resources

Key Points

  • Headless Content Management System (aka Headless CMS) to a developer is about giving content such as copy, image, links, and more to the developer. Then the developers will store the data and write code where it should go in a front-end experience. 
  • Headless is built as a content repository of data. Developers leverage APIs to put the content wherever it needs to go. 
  • A lot of people misunderstand headless as Progressive Web Apps (PWA). But PWA is a part of headless, and headless can be in form of different things. 
  • Headless is about using a different piece of tech that is not the Ecommerce platform for the front-end and something else for the backend. 
  • Shogun is one of the top page builders in the Shopify ecosystem. 
  • Shogun is a mid-market enterprise solution suitable for those who are looking for advanced tooling for content management/experience management.
  • People find headless scary because one of the most popular versions of headless builds are these PWA architectures which involve stitching together six different components. 
  • Shogun frontend productized all six of those components together, took web content management and experience management, and combined them into an experience platform. They essentially rebuilt a head for the whole headless architecture.
  • Clients care about the cloning and sinking on page builder of Shogun because they want a site for each locale that they operate in.
  • Localization brings in new complexities with content management and storefront experience management.
  • Companies that have multiple brands or have the main site and experimental site can use headless for flexibility to choose specialized software for a specialized function. 
  • Clients wish that their sites are faster to reduce bounce rate and keep the conversion rate up. PWA front ends help with this. 
  • People want to push simply around experience web content management but still wanting to leverage platforms on the back end like Shopify, BigCommerce, Salesforce, Magento, etc. 

Transcript

Sponsor: Rewind  

Unprepared isn't scripted or edited. There are no redos, and when we screw up, it's going live. This works for our show, but it is no way to run your Ecommerce business. 

Our partner Rewind is here to help. They will help you back up your Shopify store with automated backups of your most important data. 

Rewind should be the first app you install on your store to protect it from human error, misbehaving apps, or collaborators gone bad. It's like having your very own magic undo button. 

It's trusted by over 70,000 retailers from side hustles to the biggest online stores like Gymshark, Gatorade, and Movement Watches. Best of all, if you reply to any of their welcome series and mentioned Unprepared, you can get your first month free. 

Chase Clymer  

Hey, everybody, welcome back to another episode of unprepared I'm your host, Chase Clymer. Today, welcome to the show, the CEO and founder of Shogun, Nick. How are you doing today?

Nick Raushenbush  

Doing all right, how about yourself, Chase?

Chase Clymer  

I'm doing fantastic. Just before this, most of these videos, we were just reminiscing about, you know, we'd always run into each other in-person events, and we miss them. But this episode isn't going to be about how awesome the Shopify ecosystem is, even though it is. 

It's going to be about headless and you know, just things to consider about going headless. And I probably have one of the smarter guys in the entire industry about it. We'll get into that a little bit more of why he definitely knows what he's talking about. 

But Nick, let's just start talking headless, you know. What am I not considering? It's a giant buzzword? You know, let's just start talking headless.

Nick Raushenbush  

Cool, right on. First, maybe we should define it. That might be a good idea. 

Chase Clymer  

Yeah.

Nick Raushenbush  

It seems like there's a lot of confusion around what it is. So first, I'll attempt to explain what headless is to a developer, right? And pretty specifically headless content management. 

The idea of headless content management to a developer is: give me your content, give me your images, give me your links, give me your text, your copywriting, whatever. I am going to store that content data. And I'm going to write code to point to wherever it should go in a front-end experience.

Whether that goes to a native mobile application, whether that goes to a smart TV application, whether that goes to a website to a point of sale system. That's what headless is. 

Repository of data, and then developers are going to basically go and leverage APIs to put that content wherever. And I might have messed that up a little bit because I'm actually not an engineer. But let's talk about how headless is used in the context of Ecommerce. 

Chase Clymer  

Perfect. That was my next question.

Nick Raushenbush  

Cool. So the way that people use the term and Ecommerce quite a bit, is to use a separate and special piece of technology. For the front end of the website, right, the visual presentation layer, the part that shoppers can see when they actually go to the site. That is something different than the technology for the back end. 

The technology for the backend, generally being an Ecommerce platform like Shopify, BigCommerce, Salesforce Commerce Cloud, Adobe, Magento, SAP Hybris, what have you, right. And then using something entirely other than those technologies for the front end, something specialized, or multiple technologies for the front end. 

Now, a lot of people misconstrue headless and they say, oh, headless is PWA, for this PWA thing. That's what headless is. No, that's, a flavor of headless, right. But headless can be a whole bunch of different things. 

You can have a BigCommerce back end and WordPress for your front end. Let's say that you're mostly content-driven, mostly blog-driven, you don't do too much transaction on your site. Maybe WordPress is a great front-end option for you, BigCommerce on the back end. 

You know, let's say that you're on Salesforce Commerce Cloud, you know, and you want an enterprise-grade DXP digital experience platform, like Adobe AAM for managing all your content, managing your experience, personalization, AB testing, yada, yada. 

Again, Salesforce Commerce Cloud back end, Adobe AAM on top of it. That's another kind of headless right. Or let's say, you know, you want to do a progressive web application build for your front end, you could build a PWA and we can get into what that is, could do a PWA build for your front end. 

And you could use Shopify for your back end, or you could use Shogun front end, our new product, to cover all of you know. Anyways, we don't need to pitch my product right away. But you could do a QA type of build or you know what something else and use Shopify for your back end. 

That's literally all it means. It just means to use a different piece of tech that is not the Ecommerce platform for the front end. And you know, have the platform or something else for the backend.

So there's something I want to highlight there that I hope the listeners or the watchers caught, which was you were saying that there's one primary technology solution for one part of the website or the digital experience. 

Chase Clymer  

And then there's another one for the other part, which means that you are now responsible for hiring and understanding complex technologies, which is something a lot of brands don't realize is you have essentially, 2x your technology expertise that you have to have in the house. And by way of that, you may have to double the teams to manage them.

Nick Raushenbush  

I would argue that both of these, I'd argue they're pretty robust software solutions in the space that don't make it as intimidating.

Chase Clymer  

Okay, okay.

Nick Raushenbush  

Obviously, you know, platforms like Shopify, BigCommerce, Salesforce Magento, have really robust SAS for the back end. Sure, you still obviously have team members who need to learn how to use those software suites. 

But even for headless, I think that part of the reason why people find headless so scary is because one of the most popular versions of headless builds are these PWA architectures. And those involve the stitching together of six different components. 

Now, what we've done with Shogun front end is we productized all six of those components together, we coupled all of them. And then we also took web content management and experience management, low code, no code, you know, drag and drop site building or page building tooling. 

And we married the two of them into an experience platform. So essentially rebuilt a head for the whole headless architecture.

Absolutely. Yeah. I mean, I just saw that our agency website is headless. It's PWA on the front end. Yeah. On the back end, it's powered by Prismic for all the nerds out there. 

Sure. 

Chase Clymer  

But yeah, it is. Anytime we want something done, Mike is jumping into the code. Like there's no management really happening beyond having a dev lead, go in there and do the thing. 

So it's definitely, it's fast, it's lightning-fast. I can't, I haven't had, it's crazy fast. But it is, you know, you got to have a certain level of expertise there. So with headless, there are solutions like Shogun and then they're doing a PWA thing. 

And I think that's what a lot of people out there are doing these days is going with the PWA solution. And I guess that would probably be more in line with my rant about it, it's more work, just want to point that out. You gotta understand a bit more work. 

Nick Raushenbush  

Sure.

Chase Clymer  

Especially, getting it up and running, you know, setting up all the API and stuff. So you saw that as an issue. It was obviously a hole in the market. And so that's where you guys came to the table with the Shogun front end. 

So anyone that's listening to that's been in the Shopify space should recognize Shogun is like one of the number one page builders in the Shopify ecosystem. But you guys have taken it a step further. 

So now, obviously, you can pitch the product. You know, tell me who it's for and what it's good, and what's gonna do and help me if PWA's, not PWA, but headless is the direction we want to go?

Nick Raushenbush  

Yeah, totally. So I can talk a little bit maybe in frame it for, like, what the inspiration for the product was. You know, sure on page builder, we got something like, I don't know. It's, like 18,000 clients on or something like that. 

If you rewind back to summer 2019, we have a lot of larger clients using the page builder software. They started to make feature requests around the content management tooling, experience management tooling that was significantly more robust. 

I don't know, if you've played around Shogun and played around with cloning and sinking. That's an example of where the feature set started to become more advanced. 

Now, why do people care about cloning and sinking on page builder? Well, they want a site for each locale that they operate in is one example. You know, one for France, one for Spain, one for the Netherlands, and so on and so forth. Localization, that brings in new complexities with content management, and storefront experience management, new workflows to the whole thing, right. 

Chase Clymer  

Yeah. 

Nick Raushenbush  

Another example for multi-site would be a company that has multiple brands, or maybe has, you know, the main site and experimental site. Multi-site, you know, there's a multi-site thing going on. 

The second thing is, I think that a lot of companies, they just, you know, headless architecture because of the flexibility. Just give them the flexibility to choose specialized software for a specialized function. 

Chase Clymer  

Yep. 

Nick Raushenbush  

For a lot of companies, they want more. When it comes, you know, more flexibility for storefront experience. 

The templating languages that are used in Shogun front end, for example, or JSX, and react, you can do a lot more experience-wise, you know, with those languages. Then, an HTML templating language. 

So people just wanting to know to push more simply around experience web content management but still wanting to leverage platform on the back end like Shopify, BigCommerce, Salesforce, Magento, etc. 

The third driver, I would say, is performance. And this is where the whole PWA thing comes in. We noticed that a lot of clients started to, you know, vocalize that they wish that their sites were a lot faster because when you make your site faster, you reduce your bounce rate, you reduce your bounce rate, your conversion rate goes up, right? 

And so as you have said, Chase, you know, some of these clients, they started building PWA front ends as a version of headless. But how do you build a PWA front end involves six different components. 

The first two are JavaScript frameworks. So you need JavaScript engineers. You need to use, you know, code the PWA is something like react.datejs or view.js. 

You need a server side rendering framework, in addition to that, like a gatsby.js or index.js. Because you've gone headless, you have to set up your own CDN. So you'd have to use Netlify, or Reversal or Fastly, or Akamai. 

You can use any of those into that, like you said, you guys use Prismic, right? If you want any mode to come of content management control without having to dig into the code, you'd integrate a developer-based content management system like a Contentful, or a Prismic, or a Sanity. 

But for a lot of marketers or merchandisers, they're like, "Whoa, this is like a stream of data. This isn't a page builder, this is an experience manager. This is different." That's worse. 

In addition to that, you've tried middleware. You've tried this piece of software that sits at the API layer between your Ecommerce platform back end like Shopify and your PWA front end that draws up all the data from the back end, the front end, but it needs to know. 

Chase Clymer  

Oh, yeah. 

Nick Raushenbush  

Now some of it has to be there right away. But you can't have it done, you know, via an API call that causes page loads, you have to use fancy stuff like service workers. And here, I'm not an engineer, I'm getting out of my depth, right? 

Chase Clymer  

Yeah.

Nick Raushenbush  

The last one, though, is actually a real pain in the butt. You have all these awesome apps like Klaviyo for email, Yotpo for reviews, Recharge for subscriptions. You want to keep those applications.

But if you tried to integrate them with PWA the normal way to generate an API call, you're going to cancel out the PageSpeed effect. So what you need to do is you have to write middleware for each one of those individual third-party applications. Now, again, massive headache. And even you said, "Hey, if you do something like this, you build something like this, you're gonna need to double the internal team, all this stuff." 

So what we did was we took all six of those components, and we productized them, we just created them into performance-driven technology that we used to power our new digital experience platform. 

And so Shogun front end, when you actually log in and get in there, what it looks like is an enterprise-grade, Ecommerce-focused, super fancy page builder. Basically a mid-market enterprise DXP. It's like a super grown-up page builder. 

It has its own version of Prismic or Contentful in it so that you can make changes in the CMS and have them ripple across hundreds of pages without having to dig into each one. 

And it has its own integrated development environment. So developers can go in, they can code reusable, JSX based drag and drop sections. So you have this codeless page builder thing going on, but the elements are completely custom. And the magic trick is that it automatically produces a react.js front end that has no load time. Without you having to think about those six different things that it takes to build a PWA.

Chase Clymer  

That is fantastic. I'm sure that we're gonna get in there and experiment soon. I have two questions for you before we go.

Nick Raushenbush  

Please.

Chase Clymer  

Just from my nerdiness is one, sounds like you guys are solving Sections Everywhere before Shopify got around to it. Is that something that you know, people can figure out on your platform? 

And I guess that might be a very insider question for those that don't know what that means outside of the Shopify partner program.

Nick Raushenbush  

I think the Sections Everywhere is going to be fantastic for Shopify's client base. Shopify has 1.5 million users to serve. I think Sections Everywhere is going to be great, especially with the way that it's going to work with themes and apps. 

To be clear, Shogun front end, it's actually a mid-market enterprise solution. So you'd really want to be a business that you're doing millions in revenue, 10s of millions in revenue, maybe even 100 million or more in revenue if you're going to consider this kind of a solution. If it's if you're a business that Sections Everywhere is looking like it could meet your needs. You're going to stick with Sections Everywhere, or honestly, we'd be honored to have you check out Shogun page builder or you can use a mix of sections in page builder.

Shogun front end, this is really for if you're at that next level where you're saying, "No, I need advanced tooling for content management, I need advanced tooling for experience management and I need the top level of performance. I want my site to have literally perceptively zero load time." 

And I'm going to hire an agency like your agency, instead of doing a custom theme build to go do a custom rebuild in Shogun front end. And what we've done for agencies like yours is we made it as easy to implement a very robust, headless solution with content management tooling in PWA output. 

We have made it as easy to do that as it is to build a custom Shopify theme. The differences instead of liquid HTML templating language, which you probably use for Shopify, using JSX and react.

Oh, this is super fun. I mean, I think that we could go on forever about this, but we try to keep these ones short. 

Chase Clymer  

Nick, I can't thank you enough for coming on. If anyone's interested in learning more about Shogun, please check them out. We'll make sure there’s some link in the description below. Any parting words?

Nick Raushenbush  

Chase, just to say it's always an honor to be invited to these chats. I remember meeting you in New York City, you know, for unites all those years ago. 

And yeah, just you know, thanks for keeping in touch and we'd be glad to come back anytime to chat more.

Chase Clymer  

Awesome. Thank you so much.