alttext for all images
Still not sold? Here's some videos to get you psyched:
Famous 5-Minute Setup -
From sync to sale, watch me spin up a fresh storefront in under 5 minutes!
Explore the file Structure -
In-depth look at the file structure, naming conventions, and logic under the hood
Setting up your first Product -
Explore the Product settings within Sanity and how to properly setup PDP pages and PLP cards
Connecting to Klaviyo and testing your Forms -
Learn how to quickly connect Klaviyo to utilize product waitlist and newsletter forms
Setup your first Vercel deployment -
Using the Sanity Vercel Deploy plugin, see how easy it is to empower your clients to trigger deploys
You should delete the demo products once you connect your own Shopify account. Demo products will not function properly as they are not part of your Shopify store. Additionally, any existing products in your Shopify store will not automatically sync into Sanity. To trigger a sync, you must make a change to your existing product(s) in Shopify first.
Clone this repository from your GitHub account with the Use this template button
yarn && sanity initin the
enterto reconfigure it to your own project
You have to use a real, live domain name (not localhost!). Be sure to use your Vercel project URL during development, and then switch to the production domain once live. You may not know your Vercel project URL until you deploy, feel free to enter something temporary, but make sure to update this once deployed!
yarnin the project root folder on local
.env.localfile in the project folder, and add the following variables:
NEXT_PUBLIC_SANITY_PROJECT_DATASET=production NEXT_PUBLIC_SANITY_PROJECT_ID=XXXXXX SANITY_API_TOKEN=XXXXXX SANITY_STUDIO_PREVIEW_SECRET=XXXXXX NEXT_PUBLIC_SHOPIFY_STORE_ID=XXXXXX NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN=XXXXXX SHOPIFY_ADMIN_API_TOKEN=XXXXXX SHOPIFY_WEBHOOK_INTEGRITY=XXXXXX // Needed for Klaviyo forms: KLAVIYO_API_KEY=XXXXXX // Needed for Mailchimp forms: MAILCHIMP_API_KEY=XXXXXX-usX MAILCHIMP_SERVER=usX // Needed for SendGrid forms: SENDGRID_API_KEY=XXXXXX
XXXXXXvalues, here's where to find each:
NEXT_PUBLIC_SANITY_PROJECT_ID- You can grab this after you've initalized Sanity, either from the
studio/sanity.jsonfile, or from your Sanity Manage dashboard
SANITY_API_TOKEN- Generate an API token for your Sanity project. Access your project from the Sanity Manage dashboard, and navigate to: "Settings" -> "API" -> "Add New Token" button. Make sure you give
read + writeaccess!
SANITY_STUDIO_PREVIEW_SECRET- A unique string of your choice. This is used to confirm the authenticity of "preview mode" requests from the Sanity Studio
NEXT_PUBLIC_SHOPIFY_STORE_ID- This is your Shopify store ID, it's the subdomain behind
NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN- Copy the Storefront API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials".
SHOPIFY_ADMIN_API_TOKEN- Copy the Admin API access token from "Apps" -> "Develop apps" -> [your_custom_app] -> "API credentials". (Note: youll only be able to reveal your Admin API token once.)
SHOPIFY_WEBHOOK_INTEGRITY- Copy the Integrity hash from "Settings" -> "Notifications" -> "Webhooks" (very bottom of page)
KLAVIYO_API_KEY- Create a Private API Key from your Klaviyo Account "Settings" -> "API Keys"
MAILCHIMP_API_KEY- Create an API key from "Account -> "Extras" -> API Keys
MAILCHIMP_SERVER- This is the server your account is from. It's in the URL when logged in and at the end of your API Key
SENDGRID_API_KEY- Create an API key from "Settings" -> "API Keys" with "Restricted Access" to only "Mail Send"
.env.developmentfile in the
/studiofolder, and add the following (using the same value as above):
Since we're serving our store through a headless environment, we don't want visitors accessing our unused shopify theme. The domain for this is visible during checkout, and is publicly accessible. To silence it, replace your current theme's
theme.liquid file with the one from this repo, and replace
YOUR_STOREFRONT_DOMAIN_NO_PROTOCOL with your actual frontsite domain URL (do not include protocol or trailing slash)
This will essentially "pass-through" URLs accessed at your Shopify Store to your true headless storefront (ie.
yarn dev in the project folder to start the front end locally
yarn dev in the
/studio folder to start the studio locally
If you did not manually set up your project, the
/studio/sanity.jsonwill still be set to the HULL demo project. Make sure to update this before starting the studio, otherwise you will be denied access when trying to access your studio.
This is setup to work seamlessly with Vercel, which I highly recommend as your hosting provider of choice. Simply follow the on-screen instructions to setup your new project, and be sure to add the same
.env.local variables to your Vercel Project
This is an easy one, you can simply run
sanity deploy from the
/studio folder in your project. Select a subdomain you want; your Studio is now accessible from the web. This is where I'll invite the client to manage the project so they can both add billing info and begin editing content.
Once you hand off to the client you'll want to give them the ability to generate builds when they make updates within the Sanity Studio. The easiest way to do this is through my Vercel Deploy plugin.
While this starter is relatively opinionated, the goal was three-fold:
That being said, I understand this means a lot of what's included is very opinionated. However, you'll find that at it's core the structure and naming conventions lend itself to really making it your own.
I've purposefully used extracted component classes, not only for cleaner file structure, but also so you can easily work in your own styles exclusively within the styles folder. Feel free to extend or outright remove the applied styles for all of the components!
You can read more about Tailwind's stance on
@apply here: https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
Absolutely! This starter was actually born out of a non-shopify starter I had been using for my own client projects.
I made a
marketing-starter branch that is HULL without all the Shopify logic! The fastest way to get started is simply cloning that branch locally into an empty project folder:
git clone -b marketing-starter --single-branch [email protected]:ndimatteo/HULL.git .
You can read the setup instructions for this version from the branch's README.
If you get this error in your CLI, you need to logout and log back in again. Simply do
sanity logout and then
sanity login to fix.
Simply navigate directly to:
(making sure to replace
[store_id] with your Shopify Store ID)
While not as easy as Netlify, what I prefer to do is:
yarn analyze from the project folder. This will run a build of your site and automatically open the Webpack Bundle Analyzer visuals for your site's build files.
Huge ups to the following talented and rad folks who helped in countless ways. Thank you for all the support, code contributions, and discussions.