Skip to content
This repository has been archived by the owner on Jan 9, 2024. It is now read-only.

Unopinionated bare-bones Gatsby + Sanity + Shopify starter

License

Notifications You must be signed in to change notification settings

lucasvocos/gatsby-sanity-shopify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Unopinionated Starter kit for Gatsby, Sanity.io, & Shopify

BIG thanks to 🍝Kevin Green🍝 for the serverless function.

Clone this repository to bootstrap a fresh Gatsby site, powered by Sanity CMS and dynamically import Shopify products to Sanity with the help of a Web Hook.

Note: This repo is purposely barebones so that you can employ your favorite CSS framework, create your sanity schemas, etc. For a more 'out of the box' starter, check out Midway by Kevin Green or HULL which is a great Next/Sanity/Shopify starter.

Basic Instructions

Initial Setup

  1. Remove remote repo by entering rm -rf .git
  2. Either create a new repo in this folder and version control both Sanity & Gatsby, or set up new repos for both folders

Studio/

  1. In the studio folder run sanity init and create a new project.
  2. Update studio/sanity.json and update the Project ID.
  3. Update the studio name in studio/package.json.
  4. Edit schemas, add different content types, find out more here: Sanity Docs
  5. Include these schemas in the deskStructure.js export (include a fun icon!)
  6. Create a READ/WRITE API token. You'll need this for the Netlify serverless function.

Web/

  1. Rename env.example to .env by typing mv env.example .env in your terminal.
  2. Enter your Sanity API keys in the .env file.
  3. Modify gatsby-config.js and add your site title, etc.
  4. Develop your front end, etc. (purposely left this ultra stripped-down)
  5. Create a repo specifically for your Gatsby build, host with Netlify or anywhere you can have a Lambda function.

Shopify

  1. In your Netlify environment, go to your project and create a new Function.
  2. Set the functions directory to be the functions/ folder in your project.
  3. In Shopify, go to Settings -> Notifications -> Webhooks and create webhooks for Product Creation, Updates, & Deletions (⚠️ Be careful with how you implement this, see more here). Set the webhook's Callback URL to [https://YOUR_URL.DOMAIN/.netlify/functions/shopify] (if using Netlify, otherwise point to your provider's Lambda location)

Features

A blank slate Gatsby site w custom webhook to create new Shopify products

  • 📡 Real-time content preview in development
  • ⏱ Fast & frugal builds
  • 🗃 No accidental missing fields/types
  • 🧰 Full Render Control with Portable Text
  • 📸 gatsby-image support
  • 🔧 Minimal configuration
  • 💻 Custom serverless function that will create/update products from Shopify, as well as flag deleted items
  • 🚧 Jest testing suite support

Sanity Studio with a schema for

Credits

This entire repo is really just merged together from a stripped-down version of Sanity's Sample company website built with Gatsby & Sanity.io repo and a modified version of Kevin Green's lambda function as discussed in the Sanity + Shopify Roundtable: Headless ecommerce with Kevin Green & Joseph Thomas video.

License

MIT

About

Unopinionated bare-bones Gatsby + Sanity + Shopify starter

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published