Combine Shopify Store products with Sanity's structured content to build an ultra-modern e-commerce website stack. Where Shopify's product data is embellished in Sanity Studio and automatically kept in sync with Sanity Connect.
1. Prerequisites
Sanity Studio is the only CMS to be Shopify Plus Certified, making it a perfect match for building e-commerce experiences. You'll connect them along with the purpose-built Hydrogen front-end framework.
2. Preparing your Studio
Sanity Studio is where your content creators will go to create and maintain content about your business, such as extended storytelling for your products.
3. Linking Shopify to your Sanity project
You now have a Shopify-compatible Sanity Studio. Let's fill it with Shopify product and collection content.
4. Creating a Hydrogen front end
Hydrogen is a front-end framework based on Remix and preconfigured to query from Shopify stores.
5. Fetching Shopify products
With the Hydrogen app connected to Shopify, you will next need to create “routes” to fetch and display products.
6. Fetching Sanity content
Your front-end is only telling half the story. Bring your products to life with extra content from your Sanity project.
7. Visual Editing for interactive live previews
To dramatically improve the content creation experience for your authors, configure your Hydrogen front end and Sanity Studio for Visual Editing.
8. Next Steps with Hydrogen and Sanity
Now that you've got some simple content rendered in Hydrogen, we wanted to give you some ideas for elevating experiences using this stack.