- 6 min to read
Headless Shopify
Shopify may not be the most obvious choice for the headless approach; however, thanks to Shopify's popularity, it is slowly stepping into the devs spotlight.
By Nebojsa Radakovic
While website performance matters for all businesses, its undenying effect is best seen in ecommerce. Most studies that you can find suggests a decrease in conversion rate with each second of your load time. On top of that, performance, for big G, is one of the foundational aspects of good user experiences.
eCommerce has been on the constant rise in the last couple of years. More and more people are getting used to purchase pretty much anything online, which has incentivized various companies worldwide to join this market.
With businesses always looking for a way to improve the user experience and performance while cutting down on the costs, and with an increasing number of ecommerce platforms building their offering around being API-first / headless-first, Shopify's interest in a headless approach should not come as a surprise.
After all, keeping up with consumer and retail trends has always been their core business value. But is headless Shopify a good option? And who is it for?
Let’s kick off with the basics first.
Join Bejamas newsletter!
Get the exclusive Jamstack web dev case studies (and more) in your mailbox!
What is headless eCommerce?
If you are already using an eCommerce platform, it’s most likely built on the traditional or coupled architecture, meaning that the front-end and back-end are dependent on each other.
Nothing wrong with that. It’s a simple, stable, cost-effective solution that enables easy changes and maintenance that you could do yourself, even if you’re not a web developer.
In contrast to the coupled, headless means that the platforms’ front-end and back-end are separated from each other. In layman’s terms, the front-end is everything that your customers see and interact within your online shop. The back-end is where your inventory, orders, shipping, payment transactions, etc., are managed.
With a headless approach, you could have your back-end in the CMS of your choosing, for example, opt to use Shopify, and then another compatible solution for the front-end or the head. Or you could even use multiple heads that correspond with numerous digital platforms/screens to achieve an omnichannel presence for your eCommerce business.
That’s precisely where the headless eCommerce approach’s value lies: the flexibility, the freedom, and the efficiency with which you can deliver your content to the various front-ends.
What is headless Shopify?
Shopify is an eCommerce platform based on a traditional, coupled architecture, but it is also possible to use Shopify in a headless manner. Headless Shopify is a decoupled eCommerce solution. Your back-end and front-end(s) exist independent of each other. And they communicate using the Storefront API provided by Shopify.
For the back-end, you can choose one of the headless CMSs like Prismic, DatoCMS, or Contentful for example.
For the front-end, there are many aspects to weigh over, from the skills your development team possesses, to the requirements of your eCommerce platform. A good place to start is the examples page with custom storefront applications developed by the Shopify team. Most of them rely on React.js and Ember, so those should be among the first technologies to think about.
On the other hand, definitely look into static site generators such as Gatsby or Next.js that can significantly improve the performance and SEO of your eCommerce site. Once you decide, it’s time to get familiar with the Storefront API.
What is the Storefront API?
The Shopify Storefront API is a customizable, modular eCommerce API gateway that can only be accessed with GraphQL. It's not an eCommerce back-end itself but provides you with a single data source from which you can back your front-ends.
So, by using the Storefront API you can access all the data that would normally be presented using a Shopify theme and use it however you like. You can sell products from a Shopify store through a non-Shopify website. Or build an app for a single merchant with Shopify as the underlying commerce platform. Or even sell products directly through video games (at least those made with the Unity game engine).
The possibilities of how you can use that data are virtually endless.
How does headless Shopify fit in a project?
Working with an innovative startup that aims at helping homeowners 🏡 reduce costs 💰 with new tech solutions was awesome!
They wanted a clean-cut and fast-performing business website and a multi-language webshop with enhanced eCommerce functionally and the ability to easily generate product and content pages on the fly.
So, we introduced them to Gatsby, Prismic, Shopify, and Netlify stack.
Gatsby, of course, as a static page generator, and Prismic as a content management system did an awesome job on this project by allowing us to create handmade, custom components.
We wanted to have eCommerce functionality without the need of 3rd party plugins and we wanted to enable editing of the product pages from within Prismic. That’s where Shopify fitted.
The first step was to use the official source plugin for pulling data into Gatsby from the Shopify store via the Shopify Storefront API ie gatsby-source-shopify. As with Prismic integration, we pulled data with GraphQL queries.
What gave us headaches were Shopify IDs. Without the proper use of them, it’s impossible to communicate with Shopify what the client wants to buy. Finally, after the pages were published, we used the shopify-buy plugin, which helped us manage the bought product, add discount coupons, and much more.
The most notable advantage right out of the gate is the speed.
Pros and cons of headless Shopify
For Shopify, headless is still a newish approach but it’s getting a lot more devs acknowledgment. With Shopify's growing popularity you can expect pros and cons to change rapidly. For now, these are the most obvious and most notable ones. The ones we’ve found worth mention.
👍 Easy omnichannel distribution
Headless means that you can instantly push content to all the different platforms that you’re using, enabling your customers to shop from any device they have.
👍 Improved speed and responsiveness
Headless significantly improves your user experience by using modern front-end technologies that outperform the standard Shopify that suffers from performance issues.
The performance of Shopify websites mainly depends on the server, custom functionality, and everything that runs on the front end. While it is true that sometimes just switching to a better plan can help your performance immensely going independent of the Shopify offer ie headless, gives you more options in terms of how you will handle servers/CDNs, functionalities, and front-end.
On top of that, fast loading times already positively impact your SEO (will be a ranking signal soon) and help your customers UX and influence customer retention.
👍 Cheaper hosting costs reduced Shopify costs
With the above in mind and since you won’t be using the full Shopify suite, your costs will be significantly reduced.
👍 Custom URL structure, better SEO
SEO has grown out of TITLE and META description tag optimization. While it is true that implementing proper SEO strategies on headless is a lot more complicated than when you get Shopify out of the box, it also offers a lot more possibilities.
These include a custom URL structure, custom breadcrumb URLs, web server sitemap, customized web server headers, and various other technical SEO possibilities that you wouldn’t otherwise have access to.
👍 Better security
Hypothetically, if your standard Shopify store is hacked, in addition to the store itself, you’d be risking your sensitive user data.
With headless, while an attacker could take your site down if they found a hole in your front-end, they wouldn’t have access to your back-end, where all the sensitive data is safeguarded by the API that usually has multi-layer security protection.
👎 Longer development time
Because headless is a lot more complicated than standard Shopify, initial development will take more time. However, any changes you have to make, take a lot less on headless because the front-end and back-end don’t necessarily affect each other.
👎 Maintenance/ integration complexity
Headless is not everyday-user-friendly. To develop it, integrate new features, and maintain it, you will need to have a devoted dev team on hand.
👎 Some loss of functionality/ compatibility
Headless Shopify is still relatively new, so it might take some time for their API to catch up with others who offer similar services. Also, in case you used Shopify apps and plugins for additional functionalities be prepared that those might not work in a headless manner and that would require workarounds.
Is headless Shopify an option for you?
In general, if you don’t have a dedicated tech team, or if you’re not very tech-savvy, it’s probably better to stick with the standard Shopify platform. Also, If you’re in a hurry to get to market, classic Shopify will be much faster.
On the other hand, if you have omnichannel needs, if site speed and performance are a crucial part of your eCommerce strategy (as they should be), and if you don’t mind having a dedicated dev team (in-house or outsourced) to help take advantage of the various benefits of headless, go for it.
Up until recently, it was quite obvious that headless Shopify is a solution more tailored for small retailers (businesses with a small catalog) looking to create a different shopping experience. But there are already some pretty big brands/stores going headless with Shopify now.
Take a look at a couple of inspiring examples of headless Shopify sites that have taken full advantage of the customizable front-end design, as well as the performance potential.
Staples Canada
Staples Canada, a well-known retailer, utilized Shopify alongside Contentful and Akeneo, and Vue.js for a customized omnichannel experience.
Gatsby Swag Store
Simple setup for GatsbyJS merchandise page. Products details along with an add to cart button but when you add an item to the cart you get to progress through to the Shopify checkout solution.
Victoria Beckham Beauty
Shopify manages product and inventory information. Contentful is used for managing content assets and to deliver the images to the site. Gridsome is there to combine the content and data into a pre-generated site.
Inkbox
Inkbox needed to make their ecommerce website more than just a direct-to-consumer sales channel. They opted out for headless Shopify with a custom front-end.
The world of ecommerce is changing
eCommerce businesses know that even a small improvement in conversion rate translates to more revenue. Headless Shopify is on the way to provide businesses of different sizes with a performant solution that can help when it comes to the improvement of conversion rates.
Wonder how can we help you tackle slower page load times and impact your conversion rates? Let’s talk!
Schedule 1-on-1 consultationand let us deliver a more performant website with meaningful business outcomes.