Linking Shopify to your Sanity project
You were asked to create a new development store in Shopify Partners in the Prerequisites section. Locate that project, or create one if you haven't already done so.
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 automatically write product data from Shopify into your project whenever changes are made. The Studio you created in the previous exercise has the schema type shapes required to view this content.
In a production or other project, it’s possible to use a custom sync function to modify 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 there are no products to display.
The import may take a little time; once finished, it'll look like the one 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.