Headless Commerce: Shopify and Gatsby JS

4 min readDec 17, 2020

In the 10th article of the #4weeksOfShopifydev challenge, I’ll be talking about how to create an eCommerce store using Shopify as a headless CMS and Gatsby JS

In 2020, people are buying more products online due to the lockdown and many businesses are forced to switch to online mode to survive during this pandemic

COVID 19 accelerated e-commerce growth by 10 years — Forbes

With more people buying using online channels, businesses need to focus more on delivering a great experience to their online clients.

To have a good experience for your clients, you should optimize your online store in the front end (What clients see, the checkout experience from searching for the product to place the order) and in the back end (handle orders and shipping the items).

What is Headless Commerce?

As we mentioned above, the online store has two parts (what client see on the website) which are called a front end and (how the client order as processed and shipped, product management) which is called the back end.

Headless Commerce is separating the front end from the back end, you can use any tool you want for each part to optimize your online store for better conversion

Why Should I consider moving to Headless Commerce?

You have extreme performance requirements
You want to design/UX flexibility
You need a PWA
By 2021, analysts estimate 53.9% of all eCommerce sales will happen on mobile devices. (source)
PWA has numerous key features that make them different from traditional web applications. For example, it allows using the application in an offline mode and sending push notifications to customers’ mobile devices. It also creates an app-like icon on the mobile device, which facilitates access to the store.
Use any front end stack you want (React, Vue, Angular, Gatsby)
Build a CI/CD pipeline for your front end store
Better speed performance:
Use any SSG tool to build a high performant eCommerce store without compromising the user experience
Better SEO performance:
With headless you can manage and control the following SEO parameters:

Customize robots.txt
Customize web server headers
Customize URL structure
Breadcrumb URLs
Custom Sitemap.xml
Unlimited subcollections/subcategories
Global redirects

Why use Shopify for headless commerce?

The checkout experience
With over 2.5 billion orders processed, Shopify Checkout is constantly optimized for speed, conversion, and customer experience–giving you the most powerful checkout in the world. — Shopify
Product Management:
You can use the Shopify product management dashboard to edit, add and remove products
Shopify apps:
you can still use Shopify apps to manage your inventory, orders, and all back end stuff but you can’t use Shopify apps that interact with Shopify store front end
Customer and order management
You can use the Shopify account system to create and login customer accounts and handle all orders using the admin dashboard

Going headless with your Shopify store by creating a custom static storefront will give you — apart from things already mentioned — a bunch of benefits. Your online business will grow because of:

A lower number of abandoned carts
Increasing organic traffic
Decreasing acquisition cost
Being fully omnichannel
Easy A/B testing
Enhanced digital marketing options

How I build a Shopify store with Gatsby JS?

The requirement for this tutorial

a Shopify Store
Basic knowledge of how to build Gatsby website

Demo Store: https://ilias-shopify-gatsby.netlify.app/

Setup new Gatsby Website

gatsby new shopify-store [https://github.com/IliasHad/gatsby-shopify-starter](https://github.com/IliasHad/gatsby-shopify-starter)

Get API access token to your Shopify shop

Click on Manage Private Apps
Click on manage private apps > Create a new private app

Allow Gatbsy to read your Shopify store data
After the private app is created, you will get an API key to access your Shopify store data

SHOP_NAME=YOUR SHOPIFY STORE NAME SHOPIFY_ACCESS_TOKEN=YOUR API KEY

You need to change the environment variable in .env.development file (if you want to just test a demo) and in .env.production with production store API key and name

SHOP_NAME is your Shopify store name. for example, my Shopify store is ilias-gatsby.myshopify.com. the Shopify store name is ilias-gatsby

SHOPIFY_ACCESS_TOKEN is the API key you got when you created the private application

Finally, you need to run gatsby develop to run the website

gatsby develop

You could use Tina CMS to give the store owner the ability to edit their content and have a Shopify theme editor similar experience If you need any help with your Shopify store, you can contact me at contact@iliashaddad.com

Are you considering switching from traditional commerce to a headless eCommerce solution for your online brand? We’re happy to help.

Please get in touch for more information on our headless commerce services.