How To Integrate Gatsby with Shopify using Shopify Custom Apps
Tags: gatsby, ecommerce, shopify, tutorial
Published: 2022-05-31 09:08:41

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](https://www.shopify.com/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:
![Shopify Account Stores Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2ln697y1x4qykfpad9r.png)

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.
![Shopify Store Admin, Apps Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qcrqtc5oq10ekjdfwxi.png)

Then click the "Develop apps for your store" button

![Shopify Store Admin, Develop apps button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mli88xbeml3td61lhtg.png)

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)
![Shopify Custom App Access Scopes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmzerhfyu4hfh70rw2zn.png)

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.
![Shopify Custom App Admin API Access Scopes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tgexku1my4sf5pgc9zm.png)



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
![Custom App Overview Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rsoq1ja30tqo1s1lomg.png)
1. Click on the "Configure" button of the Storefront API integration card.
2. Allow Read and modify checkouts
![Storefront API access scopes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piyj2sfb4boojmfvjncr.png)
3. Click on the "Save" button

### Install the App
Navigate back to your Custom App Overview page, then click on the "Install app" button.
![Install Shopify Custom App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kyct2w4dx5q8qjtrvgn.png)

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

```bash
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
 ![Shopify Custom App API Credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsno263t84wkwshukkvq.png)
 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`.

```bash
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. 

```js
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](https://www.gatsbyjs.com/plugins/gatsby-source-shopify/#configure) doc has a guide on how to configure but with Shopify private apps which is now [deprecated](https://help.shopify.com/en/manual/apps/private-apps) 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

![GraphiQL explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmc8s4846nxnggr0xl5o.png)
Thank you and congratulations if you made it this far. 🥳

## Resources
[Gatsby Source Shopify Plugin](https://www.gatsbyjs.com/plugins/gatsby-source-shopify/)
[Shopify Private apps deprecated](https://help.shopify.com/en/manual/apps/private-apps)