Ecommerce with Gatsby and Shopify - Getting them to talk to each other
Tags: gatsby, shopify
Published: 2021-07-30 16:43:37


Gatsby is an open source frontend framework for creating dynamic, optimised websites and Shopify is an e-commerce platform for online stores. So how can you connect the two?

Well I had a little trouble at first getting Gatsby and Shopify to talk to each other but I got it to work in the end - here is how I did it.

In summary it turned out that I was using some out of date instructions. I won't go into how it didn't work but will cover what I did in the end to get it to work.

After contacting Gatsby support I received this reply -

 

> It looks like you may be viewing documentation for the old version of gatsby-source-shopify. Here is the new plugin and documentation: [https://github.com/gatsbyjs/gatsby-source-shopify](https://github.com/gatsbyjs/gatsby-source-shopify)
Make sure to install the new one following the directions there!

&nbsp;
### Create a new Gatsby site

Before you follow these instructions you need to set up a basic Gatsby site.

In a terminal window in your projects directory run this command.

```jsx
npm init gatsby
```

Enter a name for your site and what you would like to name the folder where your site will be created.

![Screenshot 1](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_11.32.34_zsrcwt.png "Screenshot 1")

Now answer No (or I'll add it later) to the next question 'Will you be using a CMS?' Seems a little unintuitive as you will be using Shopify later but for now choose No.

![Screenshot 2](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_11.32.57_b1cur1.png "Screenshot 2")

Next choose No (or I'll add it later) for 'Would you like to install a styling system?

![Screenshot 3](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_11.40.39_aj9lvm.png "Screenshot 3")

For the next question I only chose 'Add responsive images' but I'm assuming it is safe to choose other options. Choose your options and scroll down to select Done.

![Screenshot 4](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_11.58.55_tnoylf.png "Screenshot 4")

You should then see this - choose Yes and go.

![Screenshot 5](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_12.00.58_wrolbl.png "Screenshot 5")

Gatsby will go ahead and install

![Screenshot 6](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_12.05.49_akqsmx.png "Screenshot 6")

If all goes well you should see something like this once Gatsby has installed

![Screenshot 7](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655245/Blogs/graemetg-web-blog-5/Screenshot_2021-06-13_at_12.07.14_cmd3qf.png "Screenshot 7")

```jsx
// cd into your project directory. Start the new Gatsby site 
cd gatsby-shopify-site

// Start the development server
npm run develop
```

![Screenshot 8](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655244/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_15.49.23_k8imvb.png "Screenshot 8")

I had something else running at port 8000 so it gave me the option to use 8001 but you should be able to run your site at port 8000

![Screenshot 9](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655244/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_15.55.48_d2uph1.png "Screenshot 9")

At [http://localhost:8001](http://localhost:8001) I can see my Gatsby site (yours should be at http://localhost:8000

![Screenshot 10](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655243/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_15.56.49_hu6ltu.png "Screenshot 10")

Now exit the site by running control X C on a mac in your terminal. This should take you back to the command prompt

![Screenshot 11](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655245/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_16.00.23_whzchb.png "Screenshot 11")

Install this plugin to your Gatsby site

```jsx
npm i gatsby-source-shopify@rc gatsby-plugin-image
```

Then you need to add the plugin to your gatsby-config.js file

gatsby-config.js is at the root of your project 

![Screenshot 12](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655244/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_16.06.15_cmxbfu.png "Screenshot 12")

Add the plugin using this code

```jsx
require("dotenv").config();

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-shopify",
      options: {
        apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
        password: process.env.SHOPIFY_ADMIN_PASSWORD,
        storeUrl: process.env.SHOPIFY_STORE_URL,
      },
    },
    "gatsby-plugin-image",
  ],
};
```

Your gatsby-config.js should now look like this

![Screenshot 13](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655241/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_16.12.01_neyxb0.png "Screenshot 13")

Here is the code for the above

```jsx
require("dotenv").config();

module.exports = {
  siteMetadata: {
    title: "Gatsby Shopify Site",
  },
  plugins: [
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-shopify",
      options: {
        apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
        password: process.env.SHOPIFY_ADMIN_PASSWORD,
        storeUrl: process.env.SHOPIFY_STORE_URL,
      },
    },
    "gatsby-plugin-image",
  ],
};
```
&nbsp;
### How to connect to Shopify and retrieve the information

Create a trial Shopify account or of course use your existing account.

To connect Gatsby to Shopify you need to provide the -

SHOPIFY_ADMIN_API_KEY

SHOPIFY_ADMIN_PASSWORD

SHOPIFY_STORE_URL

Find this information in the Shopify admin.

Navigate to the Apps page on Shopify -

![Screenshot 14](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655241/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_19.58.33_bzfzjv.png "Screenshot 14")

Click on Manage Private Apps

![Screenshot 15](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655241/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_20.07.46_uyznxr.png "Screenshot 15")

Click on 'Create new private app' button

![Screenshot 16](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655244/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_20.13.28_fqq8rg.png "Screenshot 16")

Add a name (this is not important) and email address

![Screenshot 17](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655241/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_20.17.37_cn6lpx.png "Screenshot 17")

Open up the `Active Permissions For This App` section and set Products, Product listings and Orders to Read Access

- `Read access` for `Products`
- `Read access` for `Product listings` if you want to use Shopify's Product Collections in your Gatsby site
- `Read access` for `Orders` if you want to use order information in your Gatsby site

![Screenshot 18](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655241/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_20.32.05_v1agiy.png "Screenshot 18")

Click the Save button and then click Create app to create your Private Shopify App. From there you can copy the API Key and Password from the Private app page and add them to your environment file for SHOPIFY_ADMIN_API_KEY and SHOPIFY_ADMIN_PASSWORD respectively.

![Screenshot 19](https://res.cloudinary.com/dydjzhdb7/image/upload/v1627655241/Blogs/graemetg-web-blog-5/Screenshot_2021-06-14_at_20.36.41_yu24gh.png "Screenshot 19")

When the private app has been created on the next page you should see your API Key and Password. These are the two things you need to add to your environment along with your store URL.

### Create your .env file

In the root of your project create the hidden file .env to store your private access keys and add the API Key, password and store URL to this file

```jsx
SHOPIFY_ADMIN_API_KEY=*******************************
SHOPIFY_ADMIN_PASSWORD=************************************
SHOPIFY_STORE_URL=yourstorename.myshopify.com/
```

The .env file is referenced by adding require("dotenv").config(); at the top of gatsby-config.js

```jsx
require("dotenv").config();
```

You should now see the additional Shopify fields showing up in your GraphQL playground at -

http://localhost:8001/___graphql (or of course for you it is likely to be at http://localhost:8000/___graphql

**Note:** Apologies that I don't have screenshots for this final part but when I returned to create them my trial period with Shopify had come to an end.

By the way if you need some extra time to develop your site and your trial period has come to an end (14 days I believe) it's worth asking Shopify if they can extend it - they extended mine by an additional 14 days. But it would be nice if Gatsby could actually talk to Shopify and arrange a special developer version of the Shopify trial - I'm not using Shopify or Gatsby now because my trial at Shopify has come to an end and I can't justify paying out for a full Shopify account at this stage.

[Photo by Marvin Meyer on Unsplash](https://unsplash.com/photos/VvKdB1FYNZs?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)