This tutorial provides the steps to integrate Gatsby.js with a Shopify store. It assumes a basic knowledge of Gatsby.js.
By the end of this tutorial, you'll have a Gatsby site that you can query and see your Shopify store data in the GraphiQL explorer.
The steps include:
- Create a Shopify account, preferably, a Shopify partners account. (If you don't have one already)
- Create a Shopify store and add some products.
- Setup a Gatsby.js project.
- Create and install a Shopify custom app on your Shopify store.
- Install the Gatsby.js plugin and its peer dependencies to query products from Shopify.
- Setup the Gatsby.js Shopify source plugin with details from the Shopify custom app created earlier.
Create A Shopify Account
You need to create a Shopify account before you can set up a store on Shopify.
All Shopify's plans aren't free, but Shopify provides a free development-purpose only store. The only restriction is you can't accept actual payments without upgrading first. You need to create a Shopify Partners account to create the development-only store. You can skip this step if you already have an active Shopify store.
Setup A Shopify Store.
Now that you have a Shopify account, the next step is to create a Shopify Store.
Log in to your Shopify account, and click on Stores. You should see a page like the below image:
- Click on "Add Store".
- Pick a store type of Development Store.
- Enter Your store details.
- Wait for Shopify to create your store.
- Add some products.
Setup Shopify Custom app
To create a custom app, navigate to the "Apps" section of your Shopify store admin.
Then click the "Develop apps for your store" button
- Allow custom apps development when prompted.
- Click on the "Create an app" button.
- Enter the app name, you can name it whatever you like, "Gatsby Storefront" - for example.
Configure Admin API Scopes
The next step is to configure access scopes for the custom app.
Navigate to your Custom App Overview Page (if you aren't redirected there already)
- Click on the "Configure Admin API Scopes" button
- Allow Read access for
Files
andProducts
. -
You can also allow Read access for:
-
Product listings
if you will enable Gatsby to sourcecollections
data in the plugin options. (We'll allow that for this tutorial) -
Orders
if you will enable Gatsby to sourceorders
data in the plugin options. -
Inventory
andLocations
if you will enable Gatsby to sourcelocations
data in the plugin options.
-
Click on the Save button.
Configure Storefront API Scopes
If you are planning on managing your cart within Gatsby you will also need to configure storefront API access scopes.
Navigate back to your Custom App Overview Page, then go to the "Configuration" tab
- Click on the "Configure" button of the Storefront API integration card.
- Allow Read and modify checkouts
- Click on the "Save" button
Install the App
Navigate back to your Custom App Overview page, then click on the "Install app" button.
Setup Gatsby.js site
If you don't already have a Gatsby codebase, you can initialize a new Gatsby project using npm, then follow the prompt to suit your preferred choice.
npm init gatsby
You can also use a starter like [gatsby-starter-ts](https://github.com/jpedroschmitz/gatsby-starter-ts)
Store API Credentials from Shopify
- Create a
.env
file at the root of your Gatsby project. - Navigate back to your Custom App Overview page on Shopify, then go to the "API Credentials" tab
- Store the the Admin API access token in the
.env
file asSHOPIFY_ADMIN_API_ACCESS_TOKEN=your-admin-api-access-token
. Be careful as you can only reveal it once. - Store the Storefront API access token in the
.env
file asGATSBY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token
- Also store your Shopify store URL in the
.env
file asGATSBY_SHOPIFY_STORE_URL=your-url.myshopify.com
Your .env file should now look like the code block below:
SHOPIFY_ADMIN_API_ACCESS_TOKEN=shpat_XXX
GATSBY_STOREFRONT_ACCESS_TOKEN=XXX
GATSBY_SHOPIFY_STORE_URL=your-url.myshopify.com
Install and setup plugin
Install gatsby-source-shopify
which is the Gatsby plugin used to source data from Shopify. and it's required peer dependency, gatsby-plugin-image
. gatsby-plugin-image
also has peer dependencies of gatsby-plugin-sharp
and gatsby-transformer-sharp
.
npm install gatsby-source-shopify gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
Configure the plugins in the gatsby-config.js
file of your Gatsby project.
require("dotenv").config()
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: "gatsby-source-shopify",
options: {
storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
password: process.env.SHOPIFY_ADMIN_API_ACCESS_TOKEN,
shopifyConnections: ["collections"], // source product collections too
},
},
],
Note:
The gatsby-source-shopify doc has a guide on how to configure but with Shopify private apps which is now deprecated since January 2022.
Fire it up
Run your site with npm run develop
. When the site builds, you should see be able to see your Shopify store data in the GraphiQL explorer at http://localhost:8000/___graphql
Thank you and congratulations if you made it this far. 🥳
Resources
Gatsby Source Shopify Plugin
Shopify Private apps deprecated
Top comments (1)
That was so helpful. Thank you very much! It's sort of pathetic that the maintainers of the Shopify source integration haven't updated their documentation....