How To Integrate Gatsby with Shopify using Shopify Custom Apps

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:

1. Click on "Add Store".
2. Pick a store type of Development Store.
3. Enter Your store details.
4. Wait for Shopify to create your store.
5. 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

1. Allow custom apps development when prompted.
2. Click on the "Create an app" button.
3. 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)

1. Click on the "Configure Admin API Scopes" button
2. Allow Read access for Files and Products.

3. You can also allow Read access for:

   • Product listings if you will enable Gatsby to source collections data in the plugin options. (We'll allow that for this tutorial)
   • Orders if you will enable Gatsby to source orders data in the plugin options.
   • Inventory and Locations if you will enable Gatsby to source locations data in the plugin options.

4. 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

1. Click on the "Configure" button of the Storefront API integration card.
2. Allow Read and modify checkouts
3. 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

1. Create a .env file at the root of your Gatsby project.
2. Navigate back to your Custom App Overview page on Shopify, then go to the "API Credentials" tab
3. Store the the Admin API access token in the .env file as SHOPIFY_ADMIN_API_ACCESS_TOKEN=your-admin-api-access-token. Be careful as you can only reveal it once.
4. Store the Storefront API access token in the .env file as GATSBY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token
5. Also store your Shopify store URL in the .env file as GATSBY_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