But what if you want to create a headless store? You’ve likely heard about going the “headless route” or building a headless architecture for a Shopify store if you follow the ecommerce space. And about the long list of benefits a headless approach can give you – better site speed, more flexibility, and the ability to build your store exactly the way you want it.
But can you switch to a headless store without starting from scratch? If you have a well-running shop, you probably don’t want to lose the features, apps, and tools the regular Shopify can offer you. However, getting an advanced CMS app, customizing your theme, or accelerating the speed of your store does sound like something you might find in handy.
Thankfully, it isn’t that hard to integrate headless commerce architecture with an existing Shopify store, and there are many ways to make the transition easier. Let’s take a look at the whys and hows of going headless with Shopify – we will mention everything you might need to turn your current Shopify store into a fully headless store.
What is headless Shopify?
Headless e-commerce platforms are growing in popularity – in 2020, 61% of retailers were using or planning on using a headless platform. But what does it even mean that it is “headless”? A typical Shopify store is made of two elements – the front-end (aka the interface your customers interact with) and the back-end (all the functions that made the store work well).
Those elements are connected together to make the store work smoothly – CMS, shopping cart, user interface, shop layout, Shopify checkout, and everything else. You can think about those elements as the “Head” and the “Body” of your store.
The main problem is, all those parts depend on each other to function correctly. So if you want to add any changes to the front, you also need to update the back and so on. That can make any, even minor updates, slow and cumbersome.
What if we “separated” the head from the body, or rather, the front-end from the back-end? Then we can get those two sides to work independently and just communicate via APIs (Application Programmer Interfaces). A headless storefront is precisely that – one in which the front end and back end operate separately. The API’s job then is to communicate between the front-end and back-end.
For example, let’s say that a customer bought something from your handcraft’s headless Shopify store. As soon as they complete a purchase, the APIs update everything on the website’s back end: storing the credit card information, tracking the financial exchange, updating inventory, storing the customer’s information, tracking what items he purchased, etc.
That’s how a headless e-commerce Shopify store works in practice. Basically, when you turn your Shopify store headless, you keep all the incredible back-end functions Shopify provides, but you are using a different front-end or “head” to power the customer-focused side of your store. As a result, you get a much faster, more flexible, and far more customizable store through which you can give a consistent shopping experience to all your customers.
Going headless might be especially important for you if you plan to use IoT devices, voice assistants, or wearables in the future – what looks great on the desktop or mobile device won’t exactly function well on a smartwatch, to put it mildly.
source: https://www.shopify.com/enterprise/headless-commerce
When should you consider turning your Shopify store into headless?
The traditional, monolithic e-commerce platform Shopify has the benefit of being very easy and quick to set up, even for newbies. The platform has basically everything you might need to get started – from creating a storefront and displaying products to processing payments, deliveries, and returns. Plus, regular Shopify also comes with multiple additional features such as:
- Hundreds of apps and plugins from all categories that you can add to your store
- Mobile responsive themes
- Support for various payment methods, from credit cards, Paypal, Amazon Pay, and Apple Pay to cryptocurrency.
- Security and compliance features built-in
- Multiple SEO Tools.
For starters, that’s probably more than you might need. But as your business grows, you might start to find some features or design capabilities a little limited.
For example, the basic content management platform can’t handle the massive amount of content you have anymore. Or you find it nearly impossible to add the customizations you want to your store because they will affect the back-end as well. Or your want to take advantage of all those new technologies like Progressive Web Apps or voice assistants.
Either way, you need a little bit more than the regular Shopify Storefront alone can provide. Here’s where brands typically start to consider the headless approach.
When the front-end and back-end are separated, it is much easier to customize the system and make it fit the current business needs. The headless build also makes it take far less time and effort to add any changes to the store interface – and even allows companies to experiment with how their store should look.
Using headless e-commerce sites makes especially the work of a marketing team and developer team easier since it separates their work from each other. Content designers and marketers can make any changes to the store in a matter of minutes and without the devs’ assistance, while the devs can focus on improving the overall functionality of the store – and not on just helping the marketing teams.
What are the benefits of adding headless to Shopify?
Customers are not just shopping online more often – they are also using their mobile devices, voice assistants, or social media to shop. Insider Intelligence estimates that in 2022, US e-commerce sales will reach $1.06 trillion.
That would be a golden opportunity for all online merchants if not for two things:
- The competition is fiercer than ever, with new shops appearing every day
- Customer expectations are now higher than ever before.
As consumers now have dozens of options at their disposal, brands, besides having a stunning offer, need to create a frictionless customer experience to catch and keep their attention. This is where creating headless e-commerce sites can be helpful by giving companies more customization than ever before. So should you opt for a headless approach or not? Let’s look at some pros – and cons too.
source: https://www.shopify.com/plus/solutions/headless-commerce
Headless Shopify gives you more control over your store’s design and product display
While Shopify offers a wide range of themes, they are customizable only to some extent. And once you want to create something a bit more unique or scale the theme together with your shop, it might turn out that’s far easier said than done. Headless architecture meanwhile gives you far, far more customization and personalization options than you’d get with a basic Shopify, making it far easier for your brand to stand out from the crowd.
Since you aren’t limited to working only with the native features and themes, you can, for example, completely redesign your workflow or create a unique theme for your store – and that’s without any additional back-end coding needed. Moreover, you can show your products in many different ways – you can use a mobile app, a smart mirror or a smartwatch, voice shopping, or a progressive web app.
Increased speed
Shopify is one of the fastest e-commerce platforms on the market, that’s true – just look at some comparisons of Shopify launch time vs. Magento, for example.
But it’s pretty easy to make your shop slow down to nearly a crawl – for example, by adding too many apps to your store. Or by creating plenty of extra code by adding multiple customizations and changes to the main theme. And while you might not exactly need to go straight for headless if your Shopify store is lagging (maybe using some of the tips from our Shopify Speed optimization article would be enough?), many brands do see the significant speed boost as one of the biggest benefits of the headless route.
For example, let’s look at Progressive Web Apps. Implementing a Shopify PWA in your store can help you achieve sub-second load times across all channels as with it, the browser loads a statically generated site that doesn’t make any dynamic database requests. What’s more, all heavy back-end functions are kept separate.
All those things help your store become blazing fast. Your customer probably won’t notice anything different about your site’s architecture, but they’ll definitely see your site goes from the homepage to the product page to the cart at breakneck speeds. And you’ll notice what this speed boost does for your e-commerce sales as well!
Headless Shopify allows you to create customizable URLs
Now for something you can’t actually do with basic Shopify, but you can with headless – customizing your URL. Shopify is actually quite strict regarding its URL structure and how you can modify your URLs. There are only four predefined URL structure types to choose from, so you can’t add all the detail you need to let Google know how relevant your product to the customer search is.
With headless meanwhile, you don’t have to worry about such limits. If you want to create a brand-specific URL or add more details to the descriptions, you are free to do so.
Reduced time to market
Okay, it might take a while to separate your front-end and back-end, but once you do, you and your team will quickly notice how much easier it is to work and add updates to the system. For example, with a custom front-end hooked up to your headless Shopify store, your marketing team can make immediate changes to the content, create campaigns faster and add changes to the site layout without worrying about impacting any back-end functionality. That’s how they can launch a custom-built landing page and run any marketing campaign within days instead of weeks – since they don’t have to ask for help from the developers.
Front-end developers can also add new features or updates much faster as they don’t need to work together with the back-end developers – meaning that the store UI/UX can be constantly updated to keep up with the fast-paced changing consumer behaviors.
Seamless integrations with 3rd party services
As Headless Commerce is built with API in the center, you can connect your store to any other platform, tool, or service provided that they have an API. Therefore, there are almost unlimited customization options available for you now: you can easily add or remove features at any time or replace your tech stack as you see fit. Having full control over your website’s look, functionality, and usability, you can, for example, easily adapt your Shopify store for multichannel sales, add new features whenever needed, and overall, adjust the system to meet your current business needs.
What’s more, you can select the tech stack that best suits your needs and connect it to your store – without any compromises. You don’t need to switch the tools you are using because they aren’t compatible with the new digital storefront – you are free to use exactly the tools or integrations you want.
What about the cons of headless Shopify?
As you can see, going headless has multiple benefits, so there are a number of brands who either have already turned their store into a headless version or are planning to do so soon. In a DevOps survey, 90% of companies who didn’t yet turn their store to headless said they plan to do so soon.
But like everything, headless Shopify also has a couple of weak points you should know about before you decide to transform your own store into headless.
You will lose access to some Shopify apps and themes
Going headless means you no longer use Shopify’s theming engine or app proxy, limiting your access to Shopify’s inbuilt themes and apps and the add-ons that rely on Shopify themes. That means that if you find a theme that you particularly like, you won’t be able to just download and install it. Instead, you will have to ask for a custom theme that will be similar to the one you like – and that can be a complex and time-consuming process.
It might also happen that some apps or functionalities that rely on the Shopify theme will stop working once you go headless – and again if you need those, you’ll have to ask developers to integrate those into your new store. So it would be best to check which of your apps and integrations might stop working once you separate your back and front end – and find an alternative.
Might quickly become too complex to manage
One of the biggest benefits of going Headless is that you can customize every single part of your store. But one of the biggest cons is that you might have to replace many out-of-the-box features Shopify has – and that means extra work to be done. You also need to be careful not to go overboard with customizing everything you can, as then it can quickly get overwhelming and far too complex for you to manage.
What’s more, with Headless you are essentially moving away from Shopify’s support, so if something goes awry, you have to rely either on your own skills or on the agency that helped you move your store to headless.
Which business should choose Shopify headless for ecommerce?
With how often you hear about “going headless” in the e-commerce industry and how it’s the industry’s future, you might think that you should rush to turn your store into a headless one as well. Hold your horses, though.
Headless is not a good fit for every e-commerce store. For example, if your business is fine with traditional architecture, you do not need an advanced headless CMS or many customization options, or if you feel more comfortable with access to a Shopify store, it may not be worth the time and money to invest in headless.
If, however, you’re looking for a more personalized customer experience together with more flexibility, and you have the development resources to support a headless transformation, then headless may be right for you. If you say “yes” to at least two of these scenarios, headless e-commerce is worth considering:
- It feels like we’re moving slower than competitors because we can’t make back-end and front-end updates at the same time, or the updates take much more time than we would have liked.
- It is important that all customers have a fast shopping experience regardless of the device and channel they are using and that I have more control over the elements that influence site speed and performance.
- My storefront theme or template isn’t as customizable as I’d like, or I want a fully unique theme for my shop.
- I don’t have a native mobile app for iOS or Android, or my mobile shopping app isn’t as user-friendly as I’d like it to be.
- I have a set of tools that I want to keep using, but they aren’t working well with my current store.
- My marketing team complains that our CMS cannot handle the amount of content they have there or that it takes far too long to add any changes to the store.
How can you build a headless store?
You have two options if you determine that your Shopify store is in need of a front-end upgrade and are looking to build a custom storefront.
First, you can build a headless Shopify store yourself using the Shopify Plus framework. On the one hand, that means that you have complete control over every part of the system and can design it the way you want. But it might turn out to be far more work (and lost nerves) than you bargained for – you need to be skilled in development and coding to start with building a Shopify headless commerce store.
Shopify themes, for example, use Liquid as a template language. However, Liquid cannot be used with headless architecture. So if you would like to build a custom storefront accessible through the Shopify Storefront API, you will need a team that has experience with frameworks like React.js and Ember. They will also need to be familiar with frameworks such as Next.js or Gatsby if you want to build a static site.
Building a headless store yourself might also take far more time (and, well, money) than you would like – especially if you encounter some unexpected problems during development.
If you aren’t confident enough in your skills or don’t have enough skilled team members to handle building the headless store, it’s a far better idea to ask a development agency for help, like WeCanFly.
Picking an agency means you’ll have a partner familiar with building headless stores that can integrate with Shopify’s back-end and with all the features you might need. But what’s more important is that they know exactly what can go wrong – and how to prevent it. Thanks to their experience, they’ll also be able to make suggestions as to what headless features, layout, and navigation work best with a Shopify back-end and how to optimize your site for best performance – and will test it extensively as well.
Conclusion
Separating your Shopify’s store “head” from the “body” will take time and money – you are essentially building an entirely new, customized front-end for your business. But if you are checking most of the boxes above or you are growing so fast that a regular Shopify storefront isn’t enough anymore, going for the headless approach might be exactly what you need.
If you aren’t sure though is headless the right thing for you or maybe not exactly, then how about reaching out to WeCanFly developers for help? They have exactly the skills and knowledge to tell you what can your specific store gain from moving to headless, how much work it will take, and also estimate the costs.
So if you want to make sure that your new Shopify headless e-commerce store will look and work exactly like you imagine it, you should hire Shopify e-commerce developers to assist you with the switch – like us 🙂
