Gatsby and Shopify Part 1

Completed project code

You can find the completed project code on Github at https://github.com/stephdiep/gatsby-shopify-tutorial . If you clone the Github project, remember to add your own password , storeUrl and storefrontAccessToken in the .env file for the project to build successfully. You can view the live demo at https://gatsby-shopify-tutorial.netlify.app/.

Why use Shopify?

Unlike Stripe , which needs you to set up a backend server, Shopify takes care of all the backend logic for you, so you can just focus on the frontend. Shopify comes with three different pricing plans , and you benefit from a 14-days free trial once you sign up. It's super easy to implement Shopify with our frontend, even more so if you're using Gatsby. We'll learn how to use the gatsby-source-shopify plugin to connect Shopify with our website. To implement the checkout experience, we'll use the shopify-buy npm package.

Create a Shopify account and store

Before connecting Gatsby to our Shopify account, we'll need to create an account and a store, if you don't already have one. Head over to https://www.shopify.com/ and create an account by clicking on the Start free trial green button at the top right corner.

Then, we'll need to create our first online store. Give your store a name and fill in the forms. Once your store is created, you'll have a 14-days free trial.

Once everything is set up, you should land on your dashboard.

Click on Apps and, at the bottom, on Manage private apps.

Click on Enable private app development . On the next screen, check all boxes - it'll state that you understand the risks of enabling private app development. Then, click on Enable private app development.

Once this is done, you'll need to click on Create private app.

Under App details , fill in your Private app name , with any name that you wish, and the Emergency developer email.

Under the Admin API section , click on Show inactive API permissions and change each row to Read access . For the Webhook API version , leave it to the Latest one. This tutorial was built with the version 2021-10.

Under the Storefront API section, check the box to Allow this app to access your storefront data using the Storefront API . Under Storefront API Permissions , remember to also check the Read product tags and Read customer tags boxes.

Once you're done, click on Save . In the modal that appears, click on Create app.

Then, under the Admin API section, you'll see your API keys. Remember to keep them secure, and to never share them. Copy the Password and your store URL (in the URL bar, in my case it's designcode-tutorial.myshopify.com ).

Add products to store

We'll need to add a few products to our Shopify store. Click on Products and Add your products.

Fill in the Add product to add a product to your store. You can head over to Unsplash to get random pictures of products, if you don't have any. Once you're satisfied with your product listing, click on Save . Repeat this step a few times to add a few more products to your store.

Once you added all your products to your store, we're ready to code!

Create a Gatsby website

Head over to the Gatsby and React section of this handbook to learn how to create a new Gatsby website from the Terminal, if you don't already have it.

Upcoming

Now we set up our Shopify store, got our password and storeUrl, and added a few products to our store! In the next section, we'll do the coding part: installing the gatsby-source-shopify plugin and connecting the data to our frontend. See you in the next section!