Sanity Connect for Shopify
Setting up and configuring Sanity Connect for Shopify
You can install Sanity Connect on the Shopify app store to set up synchronization of your product information to your content lake. This will let you add custom metadata to product information, as well as reference and use product information in your other content.
You can use this content in a custom storefront through headless solutions – such as Shopify’s Hydrogen framework or Next.js – or push your Sanity content back to Shopify to use in a Liquid storefront.
How to install Sanity Connect in your Shopify store and connect it to a project:
- Find Sanity Connect on the Shopify app store and push the Add App button
- If you have multiple Shopify accounts, you need to choose the one that contains the store you want to add the app to
- After choosing the store, Shopify will show you the permissions Sanity Connect needs to work and its data policies. You can push the Install app button to continue.
- The app will ask you to connect to your Sanity account. If you don't have one, you can choose to Create new account.
- When you're logged in, you will need to connect your shop with a project on Sanity. You can choose between existing projects or create a new one (for free).
- Select organization to list out projects under it, and then the project and dataset you want to sync to.
- You are now ready to configure the app.
Gotcha
Once you chose Start synchronizing now, the app will add product documents to your content lake. It can be wise to test it against a non-production dataset if you haven't tried it before.
You might also want to consider using our Shopify asset plugin, which allows you to select assets from your Shopify store in the context of your Sanity Studio, allowing you to serve assets from the Shopify CDN in your front ends.
You can configure how and when Sanity Connect should synchronize products to your content lake, and whether content should be synchronized back to your Shopify store. You can change these options at any time.
Access content from Sanity.io in your Liquid storefronts
When enabled the content you add to products, variants and collections in Sanity will be synced back to your Shopify store.
We will sync the full document to a JSON metafield on the relevant entity in Shopify. Following the sync, you can access this content in Liquid.
Gotcha
There are some limitations you will encounter when using content from Sanity in Liquid. It’s important to consider these when weighing up whether to use a custom storefront or a Liquid storefront.
Sanity Connect offers two ways to synchronize content from Shopify into your content lake - direct sync and custom sync.
Direct Sync
This will synchronize all products, product variants and collections as documents to your content lake. You can check the reference to preview the data model for these documents.
Protip
Synced documents created by Sanity Connect will count towards your Sanity document usage limit. One document will be created for every product, product variant and collection in your storefront.
You can safely delete these documents at any time without affecting your Shopify storefront.
Custom Sync
This option will let you enter an endpoint that receives updates from Shopify and syncs data to your content lake. Typically that will be a serverless function handler where you can reshape the data and do other business logic as part of the sync.
You may, for example, want to reduce document usage by syncing products but not variants, or sync variants as objects on a product document rather than individual variant documents.
We have further documentation on custom sync handlers including an example serverless function.
Sync data automatically: Automatically sync whenever you save products. Note: The sync will update the Shopify information for both published and draft documents. An update is typically available in your content lake after a couple of seconds.
Sync manually: There will no automatic sync, and you'll have to go into the Sanity Connect settings to trigger a synchronization manually.
Gotcha
Sanity Connect will do an initial synchronization once you choose one of these options.
The Sanity Connect app can optionally sync collections data. It's turned off by default, but you can enable it with the checkbox in the settings.
You can install a production-ready reference studio that's set up with a great editor experience by running this command in your local shell. Replace the PROJECT_ID and DATASET_NAME placeholders with the actual values from the project your Shopify store is connected to:
npx @sanity/cli init --template shopify --project PROJECT_ID --dataset DATASET_NAMEYou'll find comprehensive documentation for this studio in its README.md.
If you've already set up a studio instance and want to surface the product, variant, and collection documents, you can also install Sanity Connect for Shopify and the Shopify assets for Sanity Studio from the corresponding GitHub repositories.