Sanity
A starter template for building custom Shopify storefronts with Hydrogen and Sanity, featuring real-time content preview.
What is Sanity?
AKVA is a starter template and demo storefront that demonstrates how to build custom Shopify storefronts using Hydrogen and Sanity. It solves the problem of creating rich, content-driven e-commerce experiences by integrating Shopify's commerce capabilities with Sanity's flexible content management, allowing merchants to craft unique shopping narratives.
Developers and agencies building headless Shopify storefronts who want to integrate a powerful CMS for editorial content and require real-time preview features for content editors.
Developers choose this starter because it provides a production-ready example of best practices for combining Hydrogen and Sanity, including live preview, optimized data fetching, and a clear separation of commerce and content responsibilities, accelerating custom storefront development.
Overview
A starter for Hydrogen + Sanity projects
Use Cases
Best For
- Building headless Shopify storefronts with custom content management
- Implementing real-time content preview for editorial teams
- Creating rich product storytelling experiences with structured content
- Developing performant e-commerce sites using Remix and Hydrogen
- Integrating Sanity CMS with Shopify's Storefront API
- Learning best practices for caching and data fetching in Hydrogen projects
Not Ideal For
- Teams requiring a maintained, production-ready starter template for long-term projects
- Projects that rely solely on Shopify's built-in content management without a separate CMS
- Simple storefronts where a basic Shopify theme suffices, avoiding headless complexity
- Developers needing extensive documentation or active community support for troubleshooting
Pros & Cons
Pros
Pre-configured with the hydrogen-sanity plugin for seamless data fetching and caching from Sanity within Remix loaders, as shown in the README's code examples for query utilities and client usage.
Enables live-as-you-type previews for editors, enhancing content workflow directly in the storefront, configured via the hydrogen-sanity plugin with examples in the demo routes.
Uses Shopify for core commerce data like inventory and pricing, while Sanity handles editorial content, providing a clean architecture that prevents data conflicts and enriches storytelling.
Implements Hydrogen's caching strategies and Remix's defer/Await for prioritized loading, optimizing page speed and reducing API calls, as detailed in the data fetching sections.
Cons
The repository is no longer updated, meaning no bug fixes, security patches, or compatibility with newer versions of Hydrogen or Sanity, posing risks for production use.
Requires setting up multiple services like Sanity Studio, Sanity Connect for Shopify, and environment variables, which can be time-consuming and error-prone for developers new to the stack.
Heavily dependent on Shopify and Sanity, making migration to other e-commerce platforms or CMSs difficult without significant code rewrites and data layer changes.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.