Watch a live product demo đź‘€ See how Sanity powers richer commerce experiences

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.

Installation

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 frontends.

Settings

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.

Synchronization activated at initial setup
Synchronization activated after initial setup

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.

How to synchronize

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.

When to synchronize

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.

Sync collections

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.

Reference Studio for Shopify

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 PROJECT_ID and DATASET_NAME with those from the project your Shopify store is connected to:

npx @sanity/cli init --template shopify --project PROJECT_ID --dataset DATASET_NAME

You'll find comprehensive documentation for this studio in its README.md.

The Shopify reference studio

Integrating with an existing studio

If you already have set up a studio and want to surface the product, variant and collection documents, then you can go to the reference studio's source code and copy the schema files from there.

Was this article helpful?