⚠️ Sentry - I have Sentry set up in the build step, in thenetlify.tomlfile. I recommend removing this if you don't want to use Sentry, working on abstracting it as optional
Midway v 0.8
⚠️ 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.
Starter kit for Gatsby, Sanity.io, & Shopify
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
Getting Started Guide
Basic Instructions
Initial Setup
- 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
Studio/
- In the
studiofolder runsanity initand create a new project. - 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.jsexport (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.
Web/
- Rename
env.exampleto.envby typingmv env.example .envin your terminal. - Enter your Sanity API keys in the
.envfile. - Modify
gatsby-config.jsand 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.
Current Feature Status
✔️ Ability to activate accounts
✔️ Ability to reset passwords
✔️ ability to add to cart
✔️ Ability to quick add to cart
Feature roadmap
✖️ 🍝 Mock Blog
✖️ 🍝 Docz website?
Bonus Features?
✖️ ✨ netlify plugins (a11y/gatsby booster)
✖️ ✨ jest testing
Shopify/
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.
Shopify
- 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 -> Webhooksand 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)
Local Development of Functions
You can alternatively run your webhook locally, you can do this with ngrok- npm install ngrok -g
- ngrok http [:PORT]
- Point Shopify webhook to the above url + /.netlify/functions/shopify-sync
Features
Gatsby site with real integrations into a Shopify Instance
👨💻 TYPESCRIPT- 🛒 Shopping Cart create powered by Shopify Buy SDK
- 📡 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
💆♀️ Headless Account Managements via/accounts/*📹 Headless Preview via/previews/*coming soon💻 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- 📹 Preview via panes coming soon
🏢 Site settings- Menu configuration pattern
- Basic Footer configuration pattern
📃 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/src/lambda/shopifyfile will generate new Sanity documents with these default fields.
- Products have default settings for
Credits
Thanks to Lucas for kicking this whole thing off.
Ian with the smooth react-transition-group page transitions
Trevor for the siteContext component from his Gatsby-Shopify-Starter
David for fixing the scrollTop on page transition
More learning
- Sample company website built with Gatsby & Sanity.io
- Sanity + Shopify Roundtable: Headless ecommerce with Kevin Green & Joseph Thomas
License
MIT