HULL is an open-source, MIT-licensed headless Shopify starter that combines Next.js for the storefront with Sanity.io as the CMS, automatically syncing products from Shopify into Sanity so developers can build and manage a custom e-commerce site. The project is maintained by Nick DiMatteo (ndimatteo) and has over 1,400 GitHub stars.
What is HULL?
HULL is a production-ready starter template for headless Shopify e-commerce. It takes a Shopify store's products and syncs them into a Sanity CMS backend, then renders a customizable storefront with cart, inventory, and SEO features. The front end runs on Next.js, the back office runs on Sanity Studio, and the whole package is designed to deploy smoothly on Vercel.
Key Features
- Tailwind CSS styling — utility-first CSS framework for rapid UI development, with extracted component classes that can be overridden in a dedicated styles folder.
- Framer Motion animations — page and component animations powered by Framer Motion.
- Shopify Buy SDK cart — global cart with full variant data, supporting single-variant products and photo galleries with variant granularity.
- Real-time inventory — SWR hooks check live product availability from Shopify.
- Klaviyo integration — waitlist form for out-of-stock products and newsletter form with opt-in field.
- Sanity-powered CMS — product sync from Shopify, live preview, dynamic page routes, modular content, promotion banner, and cookie notice.
- SEO and performance — automatic sitemap.xml and robots.txt generation, 301 redirects managed from Sanity, JSON-LD product schema, and page-level share settings.
- Accessibility — ARIA landmarks, focus trapping, keyboard navigation support, required alt text, and a skip-to-content link.
- Deployment — works with Vercel out of the box and supports Sanity's Vercel Deploy plugin for client-triggered builds.
Who is it for?
- Developers building headless Shopify storefronts who want a production-ready starter with a CMS for content and products.
- Agencies that need to hand off e-commerce sites to clients; Sanity Studio lets clients edit content, and the Vercel Deploy plugin lets them trigger builds.
- Shopify merchants who want a custom front-end beyond the default theme, with full control over design and UX.
- Non-Shopify projects — the marketing-starter branch strips out Shopify logic for use as a general marketing site starter.
What can you do with HULL?
- Launch a custom storefront: deploy the Sanity starter to Vercel, connect your Shopify store, and go live with a headless storefront.
- Manage products visually: products sync from Shopify into Sanity, where you can edit content before publishing; live preview shows changes instantly.
- Capture email leads: use the built-in Klaviyo waitlist and newsletter forms to collect customer emails.
- Hand off to clients: empower non-technical users to edit content in Sanity Studio and trigger deployments via the Vercel Deploy plugin.
How does HULL work?
- Deploy via the Sanity Starter or clone the repository from GitHub.
- Initialize the Sanity Studio and configure CORS origins.
- Create a custom Shopify app with Admin and Storefront API scopes, then install webhooks for product create/update/delete.
- Add environment variables for Sanity, Shopify, Klaviyo/Mailchimp/SendGrid.
- Run yarn dev to start the front end at localhost:3000 and the studio at localhost:3333.
Pros and cons
- Pros: high-quality packages, solves common UX problems, opinionated but extensible, includes accessibility and SEO features out of the box.
- Cons: very opinionated structure may require adapting; demo products must be deleted when connecting a real Shopify store; existing Shopify products don't sync until you edit them.
Pricing
Free and open source under the MIT license.
Alternatives
- Shopify Hydrogen — Shopify's official headless React framework for building custom storefronts.
- Next.js Commerce — Vercel's open-source, Next.js-based Shopify starter.
FAQ
Can I use HULL for non-Shopify projects?
Yes. A marketing-starter branch is available that removes all Shopify logic, giving you a general-purpose marketing site starter on Next.js and Sanity. Clone it directly from the repository.
Does HULL automatically sync my existing Shopify products?
No. Only products you create or edit after connecting your Shopify store sync into Sanity. To force a sync, make a change to an existing product in Shopify.
How can I see the bundle size of my website?
Run yarn analyze from the project root. This builds the site and opens Webpack Bundle Analyzer visualizations for your build files.
What do I do if I see "Failed to communicate with the Sanity API"?
Log out and log back in using the Sanity CLI: run sanity logout, then sanity login. This usually resolves the authentication issue.
Can clients trigger Vercel deployments from Sanity?
Yes, by installing the Sanity Vercel Deploy plugin. It adds an interface in Sanity Studio so clients can initiate builds after their edits.
