Ep.65 - What is headless commerce?

Over the past couple of years, you've may have heard a really weird buzzword that's only picking up more steam, headless. This week on the podcast, we're discussing what exactly headless means and what's required to take your store headless. And we also weigh the pros and cons of making the switch. Let's dig in.

Welcome to Commerce Tea, a podcast to help you succeed on Shopify. I'm Rian. And I'm Kelly. Grab a mug and join us as we talk about all things commerce.

Mesa is the easiest way to integrate any top e-commerce app or service with your online store. Designed exclusively for Shopify and Shopify Plus, Mesa's automated workflows can get back your time spent on repetitive tasks while growing your business at the same time. Join other merchants that have embraced the simplicity of Mesa's no-code approach to building workflows. You can create new ways to improve customer engagement, encourage repeat purchases without lifting a finger, reduce manual data entry, and more through a simple point-and-click interface.

And with BFCM planning around the corner, now is the time to ask the question, is my online store prepared? optimizing every step in the shopping experience is the only way to create a lifelong customer get mesa and capitalize on one of the biggest commerce events of the year search for mesa in the shopify app store and download the app today every aspect of your website is a variable that could be impacting your business's revenue we all want to grow our business and we make changes with the hopes of seeing our business grow maybe you add a new graphic here, new social proof on your product page there, maybe change your pricing.

But do you know if this new thing is helping or hurting you? Today, testing is a requirement in understanding what is and isn't working for your business. You don't need to be a rocket scientist to test. In fact, I set up my first test in less than 10 minutes on a client store using neat A-B testing.

After the test was live, we saw a confidence level on each of our tests to know which is actually best for the business. How? They showed us the additional revenue per view for each variant, Give our friends at NeatAB Testing a try today and start testing for your business. Head over to try.

neatab.com slash commerce dash T to start your 14-day free trial. Again, that's T-R-Y dot N-E-A-T-A-B dot com slash commerce dash T. Good morning, Rhian.

Good morning, Kelly. How are you? I'm doing great. We've had such beautiful fall weather in Atlanta.

And so I'm just spending all of my time outside and visiting all the coffee shops that I missed while they're like open during COVID. They have like amazing outdoor seating and like hitting up all the outdoor patios. It's wonderful. It's been the most like COVID normal air quotes there days that I've ever had.

That's awesome. I'm so happy for you. Yeah. Thanks.

What about you? I don't know. Anything that awesome. what's what's going to be happening yeah I don't have anything right now but I'll let you know when I do okay I believe in you did I do something this weekend no I looked at some books that I thought about reading oh I did watch everybody's talking about Jamie on Amazon Prime it's super cute it's fun I saw it I've seen it on the West End three times it's a musical love it highly recommend.

But besides that, no, that's fine. We all need like a super chill do nothing weekends, especially with our recent schedules. Yes, absolutely. And maybe we should talk about that real quick.

I think we should talk about that. So as you know, we have been talking about this really cool thing that we're building. And we are really, really, really excited to be launching very soon. But in order for us to really focus on the launch and make sure everything is super smooth, we're going to hit pause on recording new episodes for the month of October.

And then we'll be back in November to tell you all about what we've been building and how it relates to Black Friday, Cyber Monday, especially. So it's going to be a good time to talk about it. Absolutely. So we're going to be missing y'all, but we promise we'll be back and we promise we'll be back with great news.

And with that being said, now we're going to speak about headless. And while that word is confusing, it has nothing to do with Sleepy Hollow or the headless Huntsman. With e-commerce, there's some verbiage and branding that just doesn't make much sense. And I don't know very much about headless.

So today's going to be a learning opportunity for me as well. So cool. Kelly, I'm going to ask you some questions and you're going to tell me some answers. How does that sound?

That sounds great. Awesome. Question one. What is headless?

So it is the worst buzzword that somebody came up with, honestly. I hate it. Anyway, the idea of headless is that you are separating the front end of your website from the back end of your website. So the back end that holds all the data lives separately from the front end that your customers are interacting with.

The reason, we'll go into the reasons in just a second as to why you would want to go headless and go into the pros and cons of it. But the overarching idea is that you have full control over both the front end and the back end to do what you want to do with it. You know how I like to think about headless because I do have one comment about headless. I'd like to think of it as a reverse mullet.

So the party is in the front and the business is in the back. Okay. Thoughts, comments, concern. I would like to see a reverse mullet.

You can just look at it. Oh, oh my God. You know what it is? The mid 2000s email haircut.

Yes, that's literally what came up. Oh no, I had a reverse mullet. It's okay. It's okay.

Now I talk about headless all the time. So it's cool. Okay. So why headless?

Why headless? So headless comes with a lot of benefits. As a developer, I love having control over, like, as I just mentioned, I like having full control over what, what powers the backend of my website and what powers the front end of my website. If you have a more complex build, or if you're an e-commerce store that has a heavy content focus, you really benefit from taking a headless approach because as we know, Shopify is an absolutely wonderful platform, but it wasn't built with the blog first because it's built to be a storefront.

It makes sense. So if you have a pretty basic blog, Shopify's blog works just fine. If you a very media site it becomes more and more difficult to get creative with the way that you want to set your blog up and how you want to pull that content in So that one of the biggest reasons why I definitely see people go headless. The other reason is site speed.

So the headless sites are usually lightning fast because a lot of them are built under this idea of a progressive web app or PWA. And what this means is if your site is a traditional e-commerce site, for example, and I visit the homepage of your website, then my browser is like, oh, cool, a page. I'm going to load everything from top to bottom on the website. Load all the scripts, load all the images, load all the contents, and then display the website.

And I click on like a collection and it's like, oh, cool, new page. I'm going to load everything from top to bottom. even though I just loaded the same scripts on the previous page I now have to load them again the idea of a progressive web app the way it works is I visit the home page and it's like oh cool a website I'm going to download from top to bottom but then I'm going to save it I'm going to cache it so now when I go to visit the collection page I'm like oh this section here is different and this section here is different and this section here is different I'm just going to load those three sections and change the presentation of what I see, but I'm not reloading all those scripts again and again and again.

It's pretty cool because the way that PWAs work is if I am on the web, online, connected, whatever, I visit the website, it caches to my phone, and then I turn my phone on airplane mode, like I get on a plane, I can literally continue to browse the website and it loads just fine because it's already loaded everything in the past. So that's kind of the way a progressive web app works. And that's why you get those speed benefits because it doesn't have to continuously load a ton of stuff.

Now, as with any site, the more scripts you load, the slower it becomes. So if you're still a very script-heavy website, you're still going to see reduced site speed or increased site speed no matter what you do. The other really great thing about going headless is you get to use whatever you want to build or use her for building the front end, which for developers, you get to use modern programming languages, usually modern JavaScript being like React or Vue.js.

So if you're a developer and JavaScript fan and you hear people talk about React or Vue, these are the kinds of situations where you can actually use these in conjunction with Shopify. To date, you can hack your way through building a Shopify theme using React. We use Vue for like components on themes, but otherwise it's just like bits and pieces as opposed to the entire site. So just some of the benefits there.

It's really important though that headless is not for everybody. And headless is not for most merchants, honestly. And it's a very important thing to see. So I run a Shopify plus agency, I work with a lot of merchants who see these buzzwords and they're like, oh, I need this.

Like, obviously, this is the cool new thing. I need it. It's the same thing that happened when people are like, oh, AMP. Like, I want to use the accelerated mobile pages that Google says I need in order to rank high.

I feel like you have opinions about this. I have so many opinions, most of which are not appropriate for this format. Yeah. Again, with any buzzword comes people who just say they need something when they don't really know what it is.

So it's understandable. I get excited about new technologies as well. I'm literally developer and this is what I do for a living is get excited about things I don't need to use and then learn how to use them and then never use them again. It's a wonderful life.

So in terms of who, like the downsides of it, headless stores are entirely API driven. We've talked about APIs in the past. Basically, an API is a route where I can fetch data from another server, like another system of sorts, and then use it on my website. An API is a really difficult thing to explain in non-technical terms.

I'm not going to lie. Here, I'm going to try real quick. An API is how two softwares talk to each other. Okay, perfect.

It's like a phone line between two softwares. So this is how it was explained to me once a very long time ago. And then I was like, ah, I understand what an API does. Yeah.

So it's API driven because, again, I'm fetching the data from something. I'm saving it and then I'm using it into perpetuity. So whenever you go headless on Shopify, you're entirely dependent upon Shopify's APIs to pull in the products and the collections and the customer data and all the things that allow you to actually shop on a store. What this means is if you have a number of Shopify apps installed on your store that don't have an API, you cannot use them for headless because it is the only way that you're able to retrieve that data and do anything with it.

So there are some apps that you cannot use with headless builds at all. On that same note is if they do have an API, great. You still need to build the interaction between your new site and actually utilize their API. So it requires a lot more technical knowledge to be able to go headless.

It's part of the deal. You are also going to be paying for additional services. So you are likely, well, you're definitely deploying your site to a different server because it's not living on Shopify's front end. So you're going to have to pay for server costs there.

With going headless, you usually have a separate headless content management system, which we'll get into later, which again is another cost because the data has to be stored somewhere. I'm just dropping like terms here that I will explain in the future but there's so many things that go into growing headless and the the technical stuff so many things but it's uh it's a it's these are the things that you really need to think about before you decide to go headless I was just gonna say this is one of those things that there's so much hype around it and this happens so often in e-commerce right there's a lot of hype around it so folks want to do it and we're going to get to those who should and those who shouldn't go headless in a little bit.

But I do want to kind of caveat everything with sometimes it's okay to not fit the mold that you think you should just because everybody else is doing it. Exactly. Yeah. That's all.

For sure. That's all. Without a doubt. Yeah.

And I'll like take you through an example of one of the headless sites that I built in the past. You can actually see, just so you can visit on your own time and actually navigate through the site and understand why it beneficial Hey Rian what can I do to help my support team be more efficient I recommend Gorgeous Gorgeous combines all your communications channels including email SMS social media live chat, and phone into one platform and gives you an organized view of all help requests.

This saves your support team hours per day and makes managing customer orders a breeze. It sounds great. What else can it do? With Gorgeous, you can pre-write and save responses to your most frequently asked questions.

You even have access to the customer's order information so you can personalize the responses with things like an order or tracking number. This will allow your support team to focus on complex questions. Brands like Olipop, Death Wish Coffee, and Steve Madden have reduced their response times and increased efficiencies. This sounds like a great way to also increase sales and brand loyalty.

Where can I learn more? Check out Gorgeous by visiting commerctea.com forward slash gorgeous and try gorgeous for free for two months. Again, that's commerctea.

com forward slash G-O-R-G-I-A-S. The last thing I'd mention that's worth noting is it's not necessarily an easier experience because you are introducing new tools. You're going to have to learn this new tooling. You're going to have to train your team to use this new tool, the new tools that are involved, which can take some time.

And, you know, knowing like from experience, it can be frustrating having to spend time teaching your team to learn something new. Just some just some caveats before we dive too deep into saying how great headless is. I'm a fan of going headless in the right situation. Definitely.

So who is a good fit for going headless? So I usually am talking to merchants about going headless. They're doing at least $10 million annually. Again, you're paying for additional services.

There's a higher overhead for going headless. So usually the ones who are going to benefit from it the most are already in the eight-figure range. You have somebody technical on your team. You either have an in-house development team or there's somebody technical like a CTO who understands the general idea of headless and what it takes the the technical pieces that are involved to help get your team on board and understanding how to use the new tooling.

I found that one in particular to be extremely important to separate out what's going to be a good experience and what's going to be a bad experience for you, the merchant. I never oversell something that I don't think is going to be a good fit for you. Even if I enjoy building, even if headless sites make us more money because they're more complex to build. My team loves doing headless builds.

If it's not a good fit for you and if it's not going to be a good fit for you moving forward, it's not something I'm going to recommend to you. Yeah, that's good. That's good. And you need to find somebody when you're working on this and you make the decision to go headless or you're thinking about it and you're speaking with agencies and you're shopping agencies, you want someone who's going to shoot you straight.

Exactly. And remember this kind of a conversation where it's like, this is not for everybody. Is this actually a good fit for me? Because of the amount of technical support debt that it can create and the amount of follow-on developer costs that it requires, it does not make a lot of sense for a lot of people, but for the people it makes sense for, it makes a whole lot of sense.

Yeah. So make sure when you're asking for the pricing, you're not just asking for today's pricing, you're asking for, and also the next five years. Exactly. Exactly.

Because usually we're signing on a retainer for anyone we launch a headless site for because we have to support it. There are probably bugs that will need fixing because a custom storefront will be more complex, which generally means you're introducing more potential for bugs. And it, again, usually requires this custom API integration piece that usually requires a developer, like a development team to actually build out. And you're usually going to have more than one developer actually supporting a headless build because it's a lot of work.

It's just something to keep in mind. I think the last piece would be you're on Shopify Plus. The reason why I usually really push for you to be on Shopify Plus if you're going headless is because, again, headless is really reliant on APIs. And when you go to Shopify Plus, the enterprise level plan of Shopify, your API rate call limit increases.

So you can make more calls to Shopify's API in a shorter amount of time. And when you're having like a flash sale and a lot of traffic to your store, you want to make sure that you're not running out of, you're not hitting the cap on what your API limit is. That was an interesting one and not one I thought that I'd have to actually explain, but it's just one of those things. Until you get into it, you don't realize how important some of these things are.

Well, right, right. I mean, you don't know what you don't know. Exactly. Okay, Kelly, so what tools do you recommend to help you go headless?

Okay, so I mentioned the term content management system earlier, or CMS, because there's acronyms again for everything. A content management system is a place to store your content. Pretty straightforward. When you go headless, so when you go headless with Shopify, your products and collections and customers and orders all continue to live within Shopify.

But your page content and your blog posts live elsewhere. Again, way easier to manage on a separate content management system. So there are four primary content management systems I tend to see. And one of them is multifaceted.

So the first three content management systems I would mention are Builder, Builder.io, which is an app in the App Store, which you can install anytime, even if you don't want to go headless. which is more of like a drag and drop kind of user interface. But you can use it for going full headless because of the way that it generates the code for you that you need.

The other two that are pure content management systems are Sanity and Contentful. They all vary in pricing. They all vary in features that just depends on what you need. And honestly, it also depends on what your development team is going to suggest.

Because some people swear by using something like Contentful and some, yeah, happen to not want to touch up with a 10-foot pole. You never know. Maybe a 1,000-foot pole. Maybe it's like a really long pole.

Not saying I hate Contentful, but we are not friends. The last one, the number four that's kind of multifaceted is Shogun Frontend. And if you familiar with Shogun as a company most people are familiar with Shogun Page which has been on Shopify for a very long time as an app It differs from the Page Builder app in that Shogun front-end is kind of like an all-in-one solution where you get the content management system, but they also do the whole headless framework for your storefront and host it.

So I'm like 95% positive that they also handle the hosting. It's been a minute. But if you do need to deploy your site elsewhere, it would be either with like Netlify or Vercel are the two primary hosts that I've used for deploying headless builds. There's also Nacelle.

And Nacelle is a unique product in that it's what's called a data layer where it grabs all the information from the APIs that you're using, like Shopify and let's say Contentful, if you're using that for your content management system, and mushes it into one really usable object, data object, to actually use to pull that data into the front end. Very technical term, but I can, what I'll do is include a link in the show notes to a conference talk I gave with Netlify that walks you through what is headless, why go headless, things to think about.

It does lean a little bit more technical, but I still think it's a very useful video to have on hand. And the last one I would talk about, which I'm personally really excited about, which was announced at Shopify Unite this year, is Hydrogen, which is Shopify's own headless solution. So it's React-based if you're a developer. And they're actually also building their own hosting for headless builds on Shopify called Oxygen.

And it's the cutest hydrogen and oxygen. What did that make? Depends. How many hydrogens do we have?

Is it just one? Are we going to die? I think we have two. We have two hydrogens?

okay and i think we have one oxygen which equals water which is a liquid oh okay get it what do you get it yes we have now gone full circle because liquid is a shopify ruby based language for whatever i think it's hilarious um it was a good joke insert nerd stuff so um i'm not going to go too into detail, but if you want an example of a headless site that we deployed, this was using Nacelle deployed to Vercel because everything needs to sound similar, is PrepDeck. It's PrepDeck.

com. P-R-E-P-D-E-C-K.com. So you can just kind of like browse around it and see how fast it is.

Like this is really the benefit of it. Worth noting, most headless builds generally take between two and three months to build out. Depends on how much of the design work has been done. It depends how complex your site is.

As far as costs for going headless, it can range from as low as $30,000, depending on the developer you're using, $200,000. Usually it should not be that expensive, but again, you never know. Hopefully this was helpful. I know it was super technical, but I feel like it's a buzzword that's becoming more and more common.

So now you have a general idea of what it means, especially when you're going to be seeing Shopify be pushing hydrogen and oxygen more. We've kind of come all come together. As soon as the taproom does their first build on hydrogen, I'll probably bring it back up again so you can have another example. Fantastic.

Cool. We're going to keep this episode kind of short because that was a lot to take in. so do you want to move to store shout outs yeah let's move to store shout outs so store shout outs my store shout out of the week is ollie pop drink ollie pop.com it's my daughter and all of her friends favorite soda pop that isn't really a soda pop but it's a healthy soda pop and they think it is absolute fire Reese even got an ollie pop hoodie from ollie pop so she proudly represents Olipop all of the time.

The flavors are delightful. Right now I'm really loving their orange vanilla. Her favorite is cherry vanilla. And you know, everyone is different.

So Kelly, what about you? Okay. So mine is actually not something I've purchased yet, but I'm going to, because we're about to start on our home renovations. And one of the things I decided to treat myself to was a whole new cookware set.

and I have been eyeing Caraway for quite some time now. It's carawayhome.com. Their site is super cute.

Their cookware set comes in such pretty colors. It's, you know, chemical free. It's a ceramic cookware and it's, I'm just, I'm just really excited to buy some. It's beautiful.

It's so pretty. Like I've never aspired to have like yellow cookware, but I just love the yellow. Daniel might not allow me to get it. Let's be honest.

Don't. I also love the Navy though. It'll show up. What about both?

No, blue and yellow, mace and blue, go Michigan, go blue. That's all I was going to say. I was going to say, go blue. I love it.

I love it. Rian and I have been saying go blue to each other a lot because I grew up a Michigan fan and both of us are Michigan. fans and neither of us went to University of Michigan, which is always really fun. And on that note, it's totally fine.

Go Dawgs. Totally difficult. And on that note, go Devils. And that is where we both went to undergrad.

Now that we've covered that, thank you so much for tuning in. And thanks again to our sponsors for supporting this episode. We have a YouTube channel. You can visit it at youtube.

com slash commerce tea. If you like our podcast, please leave us a review on Apple Podcasts. Reviews make us really happy. Yay.

You can subscribe to Commerce Tea on your favorite podcasting service. Yes. Please leave us nice reviews. Nice reviews make us happy.

Not so nice reviews make us giggle. Dad. You know, gives us something to talk about, I guess. You can subscribe to Commerce Tea on your favorite podcasting service.

We usually post new episodes every Tuesday. We are taking the month of October off. So we will be back. Nope.

We don't post episodes every Tuesday. We post episodes every Wednesday. There we go. That is true.

Got it. We will be back in your ear holes on November 3rd, I believe. Yes. And everyone stay safe until then.

Be excellent to one another. And we'll see you in a month. Bye-bye. Bye-bye.

Thank you.