Shopify Lite Headless - The Cheapest Possible Headless Shopify Setup
Shopify pushes the idea that if you want to create a headless store, you must upgrade to their $2,000 a month Pro plan. They’ve created a bunch of great resources about going headless with Shopify where they continually talk about how “Shopify Plus” can be used for a headless store.
But what if you want all the benefits of headless eCommerce, and have the tools to build a site with Gatsby or Next.js? That leads us to ask the question; can we even build a headless store without Shopify Plus?
While you’re learning the answer, here’s a quick pitch. We can help design and develop your headless store. Headless eCommerce isn’t the right option for all businesses. Contact Tim today to check if a headless store is your best play.
Does creating a headless store require Shopify Plus?
Thankfully, it’s possible to create a headless store using any level of Shopify membership. It’s even possible to create a Shopify Lite Headless store. However, Shopify restricts some API endpoints around coupons and authentication.
What a standard Shopify headless store can’t do
The three biggest limitations of building a headless store on a “Lite”, “Basic” or “Shopify” plan are:
- No storefront API for authentication cross-domain
- Checkout restrictions
- No access to coupons
No storefront API for user authentication
When you create a headless Shopify store, you’re separating Shopify’s backend with all its great product and fulfillment management tools, from the customer-facing website. The new website doesn’t even run on the same domain anymore.
E.g.
Shopify backend = yourstore.shopify.com
New frontend = yourstore.com
Having different parts of your store on two different domains isn’t a problem until you need to send potentially confidential information between them, like your user name, password and account details.
Without proving to Shopify’s backend that the frontend is trusted, it can’t get the information attached to a user’s account, like their purchase history or account preferences.
The internet is set up with protocols to secure these kinds of data transfers. A kind of authenticated handshake needs to happen for the details to move from one place to another.
This is where Shopify’s GraphQL Storefront API comes in handy. It can be used to call all these details into the frontend application. But only for Shopify Plus.
What’s a real example of this problem?
You’ve just built a new headless Shopify store. It’s blazing fast, and new users love it. However, you’re struggling to retain customers after two purchases.
They’re complaining about having to re-enter all of their details every time they purchase and the fact they can’t see what they purchased last time they were on your platform.
There are requests in your support portal to provide tax invoices for a dozen different customers. But they should be able to get these details out of their own accounts right?
No, unfortunately. Because you’re not using Shopify Plus, these details are not made available through their API so there’s no way for your headless store to know what each customer purchased in the past.
Is there a workaround?
All of the details users are looking for are saved by Shopify, they’re just not available through your headless store. To let users access their details, you’ll need to set these pages up on your regular Shopify theme.
Make sure to restrict where users can go once logged into your regular Shopify theme. Unless you’ve spent the time to configure this theme to look and feel like your headless store, it will be a confusing experience and there will be nothing stopping them from browsing around empty pages.
You’ll also need to provide a way for the users to return to the headless store once they’re done checking their account information.
Checkout restrictions
Shopify prevents their checkout page from being edited for users who haven’t upgraded to Shopify Plus. In my opinion, the Shopify checkout page is great, and most stores wouldn’t have a strong argument for modifying it.
However, if you’re building a headless store in hopes of creating a fully customised journey for your users, then the experience can feel a bit disconnected at the point of checkout.
Shopify’s checkout also provides user’s the opportunity to “log in” and use their existing payment details. This is a no-no for headless stores that aren’t on the Plus plan. As we mentioned above, your headless store doesn’t have access to these kinds of details, so the user will be routed off to the regular Shopify theme.
Is there a workaround?
Is there a workaround for checkout styling? Unfortunately not. Some plugins can help you make simple design changes to the checkout, but it’s pretty limited.
As for prompting the user to log in before purchasing, these options can be hidden. However, this comes back to the problem we raised above. Users want to log in so they don’t have to re-enter their card details.
No access to coupons
Access to the coupon API endpoint is restricted, preventing coupon-based discounts and sales. Coupons are a versatile tool for an online store, and being unable to run a flash sale can be a significant limitation.
Is there a workaround?
This problem has a decent workaround. There are plenty of plugins that can be used to make store-wide discounts or per-product discounts. This won’t solve every situation, like redeeming free products using a limited set of coupons. However, if your problem is not being able to hold a sale, then there’s a way to get it done.
Should I build a Shopify Lite Headless store?
This may come as a surprise, but my answer is no, you shouldn’t build a Shopify Lite headless store. The limitations on Shopify’s API are too great, and there is a much better option; BigCommerce.
Unlike Shopify, BigCommerce doesn’t restrict its API for building headless stores. Their team has put a bunch of time into relationships with the Gatsby and Next.js developers to create tools that will help you get up and running quickly.
I’ve written a more detailed breakdown of the benefits of going headless with BigCommerce, and a comparison of headless Shopify and BigCommerce so you don’t have to do the research.
Frequently Asked Questions
Q: What is a headless installation?
The term “headless installation” in software development refers to the decoupling of the code that runs on the server from the code that runs in the browser (the head). Each part runs from a different codebase and communicates through API.
Q: What is a headless checkout?
Checkouts can be isolated from the rest of a website or application. This setup is called “headless” because the code that drives the checkout isn’t connected to the server, also known as the system’s head.
Have any other questions that we haven’t answered here? Leave them below in the comments section and we’ll get back to you in a day or so!
