Named for the sake of being the middle component missing from your ecom business. Think of this repo as a middlewear to anything and everything custom, ecom, DTC and headless.
This repo was forked from the work that Lucas did on an initial Sanity/Gatsby/Shopify repo. I've extended it to include various patterns that I use in my builds, more functions for handling accounts, typescript, and functional CSS to name a few. I also incldue some common components in my Sanity & Gatsby instance that I don't believe we should rebuild over and over, things like a press module, general ctas etc. Use whatever you'd like or just use it as a baseplate.
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 WebHook
- Remove remote repo by entering
rm -rf .git
- Either create a new repo in this folder and version control both Sanity & Gatsby, or set up new repos for both folders
- In the
studio
folder runsanity init
and create a new project. - Update
studio/sanity.json
and update the Project ID. - Update the studio name in
studio/package.json
. - Edit schemas, add different content types, find out more here: Sanity Docs
- Include these schemas in the
deskStructure.js
export (include a fun icon!)
- Rename
env.example
to.env
by typingmv env.example .env
in your terminal. - Enter your Sanity API keys in the
.env
file. - Modify
gatsby-config.js
and add your site title, etc. - Develop your front end, etc. (purposely left this ultra stripped-down)
- Create a repo specifically for your Gatsby build, host with Netlify or anywhere you can have a Lambda function.
- In your Netlify environment, go to your project and create a new Function.
- Set the functions directory to be the
functions/
folder in your project. - 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)
Local Development of Functions
You can alternatively run your webhook locally, you can do this with ngrok 1. npm install ngrok -g 2. ngrok [:PORT] http 3. Point Shopify webhook to the above url + /.netlify/functions/shopifyA 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 lambda function that will create/update products from Shopify, as well as flag deleted items
Sanity Studio with a schema for
- πΌοΈ Media Plugin
- π¨βπ» Vision Plugin
- π Graphql Deployment Support
- π’ Site settings
- Menu configuration pattern
- Basic Footer configuration pattner
- π Pages
- Meta Card support for SEO with Tabs
- Common modularity patterns
- π° Posts
- π Products & Variants
- Products have default settings for
title
,slug
,defaultPrice
,id
,productId
. - Variants have default settings for
id
,productId
,variantId
,title
,variantTitle
,sku
, andprice
. - The
web/functions/shopify
file will generate new Sanity documents with these default fields.
- Products have default settings for
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.
MIT