Build an online Shop with Gatsby and Shopify (Part 1)

I wanted to build an online shop but it should not be the typical shopify design. Otherwise it would be nice to have the functionallity of shopify.
Ok maybe I could build something with Liquid (shopifys own templating language). But I already now react and gatsby, why should I learn something new?

Ok maybe you feel the same. Maybe not. This article should give you a small guideline on how to start with Gatsby and shopify. It should help
you to build your first custom online shop. Its easier than you think.

Create a new Gatsby Project

Yes thats the start. Thankfully gatsby offers a simple way to setup a new project. You can use their own CLI wich enables you to run and create projects.
Just install it via npm:

npm install -g gatsby-cli

The -g means global which installs the package globally which makes it available everywhere. If you want to learn more about the CLI you should have a look here.

The next step is to generate the project. Move to the folder which suits your project the most and type:

gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

This will create a project with a default starter template. You could also choose a different starter or go through the process. But I would recommend
to understand how the ins and outs of gatsby work until you use a prebuild starter.

Next you could start your page with:

gatsby develop

This should serve the project on https://localhost:8000. Next up we will add the shopify data.

Get the data from shopify

To get the data from shopify we need a plugin to get the data from shopify. I would recommend that you have a look at offical documentation.
The Plugin could be installed by running:

npm install --save gatsby-source-shopify

After you installed the plugin you have to change your gatsby-config.js. No worries. We will do it together.
Just add the entrie below to your plugins array.

  {
      resolve: `gatsby-source-shopify`,
      options: {
        // The domain name of your Shopify shop.
        shopName: '',
        // The storefront access token
        accessToken: '',
      },
  }

The both empty values have to be filled from you. I will show you where to find the data and how to put them in. The process is relatively easy.
One thing to mention here: I would recommend to add these credentials via environment variables. That keeps them secure and helps to keep your data safe.

Create your store

If you dont have already setup a store here are some basics tipps to set it up. One thing that most people forget that you have to pay for shopify. But there
is a workaround for that. First create an account at the shopify partners page. Its a tool for agencies or people who build stores for others.
There you can create an account and setup a shopify shop which is for free until you transfer the ownership or want to sell products. It means you can take the time
to build your site and don´t need to worrie about payments in the beginning.

After you logged in into your shop go to apps. And click on manage private apps at the bottom of the page. Then create a new private app. Add the name of your app and give the app a name. Make sure to
allow the access to the Shopify Storefront API. Then save the app and copy your access token.

You can now add the credentials to the gatsby-config file we edidted before. Add the access token and the shopName and please dont commit your credentials to github.

Querying your products

If you already have products in your shop you now should be able to get them through the plugin. Simply start your page with:

gatsby develop

and check the GraphiQL Playground under http://localhost:8000___graphql. There you should now be a lot more queries available than before. If not please
check if your credentials are correct.

For example you now could build a query like this here:

export const pageQuery = graphql`
  query($id: String!) {
    product: shopifyProduct(id: { eq: $id }) {
      description
      title
    }
  }
`

This query gets only a product with a specific id with its title and description. The data coming back from the query would be available as data props to your page.

Now you were able to get your first product data from shopify. The next step would be to get the data and build a custom shopping cart. This topic will be in another post which will be published soon.

All in all its really easy and fun to build a shop with gatsby and shopify. I would be happy if you give it a try.