Linking Shopify to your Sanity project
You now have a Shopify-compatible Sanity Studio, let's fill it with Shopify product and collection content.
You were asked to create a new development store in Shopify Partners in the Prerequisites section. Find that project, or create it if you have not yet already.
For your convenience, Sanity has created the Shopify app Sanity Connect. It seamlessly syncs data from a Shopify store to a Sanity project.
If you have multiple Shopify stores, you may need to click "Switch stores" in the top right to install Sanity Connect into your new development store.
You will use the default sync options for this exercise:
- Choose Direct sync
- Choose Sync automatically
Now connected, Sanity Connect will write product data from Shopify into your project when any changes are made. The Studio you created in the previous exercise has the schema type shapes required to view this content.
In production or another project, it’s possible to use a custom sync function to amend the fields synced to Sanity. While automatic sync – powered by Shopify webhooks – is typically sufficient for most use cases, it’s also possible to trigger it manually.
Now you have a Shopify store connected to Sanity with Sanity Connect – but no products to show.
The import may take a little time, once finished it'll look like the below. But while you wait...
...take a look at your Sanity Studio and watch as the products begin importing immediately thanks to Sanity Connect.
Try publishing some changes in Shopify to these products – such as pricing or availability – you’ll see them update in Sanity.
You’ll also notice in Sanity Studio that the fields this data is being written to are read-only. It’s not the intention for Sanity Studio to be a place to edit product details, just to embellish and editorialize those that come from Shopify, as it is the source of truth.
The editable fields on a product add extra information about a product.
readOnly field in Sanity. Extra content should be added using Portable Text in Sanity. Read more about other assumptions made in the Shopify Studio repo.With more work, you could add schemas for different product types, develop a content structure for variants and products, or create new document types to build a complex content model.
For now, let’s press on with just the product details.
The next step is to create a front end to display this content. Let’s set up Hydrogen.