This is a demo site built by Kevin Green. The products you find on this test site are from sites I've worked on. If you're interested in purchasing anything for real I link out to the real sites on the product landing pages!

Account

Getting Started

This guide assumes a totally fresh start, for more in-depth information, please follow the other guides that tailor to each experience. But hopefully this should be a good start to run Sanity, and run the Frontend + get products from Shopify into your studio.

I estimate this will take around ~1 hour to get up and running with products syncing into your studio and rendering on the frontend.

Create a template from the repo (easier than cloning it).

Running the Studio

First we'll run the Studio as that's more straight forward. If you are new to Sanity I recommend hoping over to their docs as they are extensive.

Navigate to the /studio directory and npm install. From there you'll want to initialize a studio.

Run sanity init (having issues keeping my config out of sanity will update when I resolve that, this will init a new studio)

Run yarn start or npm start.

This will take you through the sanity setup, once completed your studio should be running locally at http://localhost:3333.

You'll notice an empty studio to start, I'd recommend making a Homepage with a slug: home. This will serve as your Index. You'll notice we don't have any products either, we're going to be syncing those directly from Shopify. We won't allow products to be created in Sanity, this pattern is in part to keep product data managed in Shopify and only extended in Sanity.

Deploy your studio

We'll also want to deploy the studio, simply run yarn deploy in the studio root to do that. You'll want to date the project_id and dataset name and apply that to your Netlify environment variables or your .env file in the next section. (you can find the id + dataset in the sanity.json file). To get an API token you'll need to login to manage.sanity.io and create one for your project.

Running the Gatsby Frontend

Again this is not a `how do I use Gatsby guide` so please familiarize yourself with Gatsby before diving in. We're doing some opinionated things with the routing/context/typescript, so I apologize if this isn't for everyone but hopefully you find aspects of it portable to your future projects.

I rely heavily on Netlify for development purposes, and that includes managing environment variables inside of Netlify.

You can however run this without Netlify dev (which for the Shopify sync'ing you'll need to later on).

Rename the env.example file to .env and update the sanity information with the studio you just setup.

Assuming you created a home running gatsby develop will run your Gatsby frontend and you should see whatever content you put into the homepage.

The navigation is manually powered at the moment, so links to shop-all and documentation will error as they're not in your system.

Deploy to Netlify

We'll want our site up on Netlify, we need this in order to leverage the full power of Netlify functions. If you are comfortable handling functions on your own, you can look at the lambda directory and go from there.

I recommend going the github route, this is easiest as to sync the work you are doing into github sooner then later. So first get everyone on github and make sure you have a Netlify account (again not a netlify guide). Add a new site to Netlify via Git and select the repo with your studio + site.

Build command: npm run build

Publish directory: web/public

You will need to set the publish directory in Netlify to web.

Assuming everything is up and running you should now see the local site you were running up on github and it will continue to deploy as you push to master, (we'll set Sanity deployments up later).

I recommend moving the environment variables you setup into Netlify to keep everything in one place, as you'll be running Netlify dev those creds will be pulled down locally.

----

Jump back over to your local instance, go to the web directory and ensure you are linked to the correct deployment. You can do this by running netlify link.

We could simply run netlify dev and things would start up as expected. I do however have a script for running all the required tasks if you prefer to know what you're running. Whatever works for you. (yarn run dev).

Product Sync from Shopify to Sanity

You'll need a Shopify dev store (or real store setup for this) and a few test products.

Navigate to the Notifications section of your store:
yourstore.myshopify.com/admin/settings/notifications

You'll want to create 3 webhooks, all pointing to your Netlify instance. Product create, update, delete. Set them to application/json type and point them to your site:
site.netlify.com/.netlify/functions/shopify-sync

You will need to have your Sanity env variables setup which you can see here https://github.com/ctrl-alt-del-world/midway/blob/master/web/src/lambda/shopify-sync.ts

Shopify webhooks are signed, the webhook as such needs to decrypt the data in order to keep from outside parties updating your studio. That SHOPIFY_SECRET comes from the webhook area at the bottom of the notifications area.

If everything is set up correctly, you can navigate to a product, and update a description and save it and your product should be saved into your Sanity instance!

Advanced Configuration

If you need more customization of the sync, or want more control or understanding of what is going on, you can set the Shopify notifications to your local machine, this will allow you to see product sync data in the console. In order to do this you'll need a tunnel service like ngrok.

Once installed you can run ngrok http 8000 on the running port of your frontend instance. This will give you a secure tunnel to direct your Shopify notification to that accesses your local machine. Keep in mind when your machine isn't running nrok the requests will fail. Shopify will remove notifications if too many requests fail (10-30? failed requests).

Displaying Products on your Frontend

Now that we have products syncing into Sanity, our site should build product pages! In order to ensure the best experience, login to your Sanity instance and ensure your products have images associated to them. (I do not sync product images from Shopify to Sanity).

From there you can also create a collection (in our current frontend I had a shop-all route in the header) that displays all products in a Product Grid module. You could also add a product grid module to the homepage and show products that way. You'll then be able to view products, adding products/cart initialize

Initialize your Gatsby Cart & allow for Product add to cart

We use the Shopify Buy SDK to add items and initialize the user cart. We do this with the Shopify Storefront API. If you navigate to the siteContext, you'll see where we initialize the Shopify client on line 19. https://github.com/ctrl-alt-del-world/midway/blob/master/web/src/context/siteContext.tsx#L19

You'll want to replace the domain and the store token. You can do this by creating a private app in Shopify and enabling the storefront API in that private app. Keep in mind the storefront token is public (hence why I don't mind mine being in the repo).

If you follow along in the siteContext file you'll see we're initializing carts as well as enabling functionality like fetching cart total, adding and removing items, and opening and closing the cart in state.

You should now have everything you need to use/start your headless ecom experience. I talk more about the Shopify accounts in the Shopify guide.

Site rebuilds via Sanity

You can also trigger site rebuilds with Sanity saves, you can do this with Netlify build hooks. You can create a build hook and in your Sanity API settings

twittergithub