Headless Starter with Sanity + Gatsby + Shopify Repo
⚠️ Sentry - I have Sentry set up in the build step, in the
netlify.toml
file. I recommend removing this if you don't want to use Sentry, working on abstracting it as optional
See Also: HULL Next.js Shopify/Sanity Starter
⚠️ Disclaimer: The Gatsby theme is in active development as I work on documentation + extending the system, the studio is fairly ready for referenced use if you so desire. I will post a v1.0 once everything is in a better place hopefully very very soon :). I am working on creating a full shoppable/authed Shopify experience. The idea here is viewing products, adding them to a cart and getting to a real checkout, you will also be able to register, login, view orders, and also update your address (all traditional shopify experiences but in a headless environment).
Typescript Support: I am no TS expert, and am doing my best with the knowledge I have there are some places that still have issues, like react CreateRef stuff, not really sure what to do with those bits (mostly in the accounts area), if you have experience here I would love some insight into fix that or making it more robust.
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.
I've taken a relatively more opinionated approach and started to fully build out a complete expereince. The documentation is being written while the experience is created, please don't make issues/tickets just yet, if you have contributions around my TS linting/issues feel free to PR those aspects.
Clone this repository to bootstrap a fresh Typescript Gatsby site, powered by Sanity CMS and dynamically import Shopify products to Sanity with the help of a WebHook
rm -rf .git
studio
folder run sanity init
and create a new project.studio/package.json
.deskStructure.js
export (include a fun icon!)The studio is ready/useful, I'll more than likely further modify the structure, like moving the default shopify items into a tab.
env.example
to .env
by typing mv env.example .env
in your terminal..env
file.SANITY_API_TOKEN
SANITY_DATASET
SANITY_PROJECT_ID
.env
file.
GATSBY_SHOPIFY_GRAPHQL_URL
- this url is to your Shopify store graphql data source. e.g - [mystore].myshopify.com/api/graphql
NOTE: there is no http(s)
before the url structureGATSBY_SHOPIFY_STOREFRONT_TOKEN
- also known as the Storefront Access Token
GATSBY_SHOPIFY_STORE
- this is the url to your Shopify store. e.g. - https://[mystore].myshopify.com/
- Note: there is https
before the URLSHOPIFY_WEBHOOK_SECRET
- this is your webhook secret. Once you create a webhook in Shopify you will see this token below your webhooks https://[mystore].myshopify.com/admin/settings/notifications
SHOPIFY_API_KEY
- We use the Admin API to sync products, so we need this to fetch additional data in the sync functionSHOPIFY_API_PASSWORD
- Again we need this for the Admin API in the product SYNCgatsby-config.js
and add your site title, etc.Previewing content is a priority client experience. As a result we implement this out of the box, please keep in mind the pattern + graphql does require groq experience. I wrote an article documenting this experience. I will echo some of that below for this particular experience.
Inside of the manage panel in Sanity, make sure you navigate to settings->api->cors origins and enable the localhost with the correct port, in our case http://localhost:8000
with allow creditials.
Inside of our Gatsby experience you'll notice a previews.tsx
within our pages, you'll also find our config is extended with gatsby-plugin-create-client-paths
to include the previews/
route as a dynamic experience. This allows us to param this route without causing a 404 in Gatsby.
Inside of the Sanity structure builder for pages
and products
I have referenced a new view component. This adds a preview link to the Sanity admin. That componenet: studio/structure/views/preview.js
has a production url (where your live site lives) and a local url: http://localhost:8000
, update accordingly.
✔️ Gatbsy Typescript style
✔️ Fetching data and building pages from Sanity
✔️ Cart object created via the buy-sdk
✔️ Lambda functions being built from src->functions
✔️ Ability to login
✔️ Ability to register
✔️ Ability to logout
✔️ Better error handling for register
✔️ Ability to activate accounts
✔️ Ability to forgot passwords
✔️ Ability to reset passwords
✔️ account status in the header + logout
✔️ view single product detail
✔️ ability to add to cart
✔️ Ability to quick add to cart
✔️ cart visible on the frontend
✔️ Add/remove items from the cart
✔️ Ability to see orders
✖️ Add/remove addresses
✖️ Ability to see/edit addresses
✔️ 🍝 Klaviyo Newsletter
✔️ 🍝 Klaviyo Waitlisting for out of stock products
✔️ 🍝 Product schema json-ld
✔️ 🍝 Focus States & Tab Index for ADA
✔️ 🍝 Seo Meta out of the Box (this works but i have a no-follow on robots.txt)
✔️ 🍝 Sanity Live Preview Content
✔️ 🍝 Docz website?
✔ 🍝 Add Analytics patterns
✔️ 🍝 Add ability to do multi-variant selection
✖️ 🍝 Add a single sync function via sane-sanity!!
✖️ 🍝 Product carousel
✖️ 🍝 Promo Bar in the schema
✖️ 🍝 Mock Blog
✖️ 🍝 Example PDP with extended modularity
✖️ 🍝 Gatsby Create support for filling a sanity studio and getting a working frontend faster
✔️ ✨ Sentry INIT
✖️ ✨ Sentry Function logging
✖️ ✨ netlify plugins (a11y/gatsby booster)
✖️ ✨ Logrocket pattern
✖️ ✨ jest testing
In the Shopify folder I provide an example theme.liquid file, this file is needed if you intend to add accounts to your headless environment (which this theme has functional components to support), shopify doesn't allow you to override the URL structure of the account information, so we redirect to where the headless experience lives. We also pass the hash/pathname etc so we can use that in our headless account system.
Please keep in mind I assume you are already familiar with the Shopify eco system, this repo assumes you've already crafted ecommerce experiences before.
functions/
folder in your project.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-sync]
(if using Netlify, otherwise point to your provider's Lambda location)Gatsby site with real integrations into a Shopify Instance
/accounts/*
/previews/*
/docs/*
Sanity Studio with a schema for
title
, slug
, defaultPrice
, id
, productId
.id
, productId
, variantId
, title
, variantTitle
, sku
, and price
.web/src/lambda/shopify
file will generate new Sanity documents with these default fields.MIT