Sanity Connect for Shopify

You can install Sanity Connect on the Shopify app store to set up synchronization of your product inventory 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.

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

You can configure how and when Sanity Connect should synchronize products to your content lake. You can change these options at any time.

Direct sync: This will synchronize all products and variants as documents to your content lake. You can check the reference below to preview the data model for these documents.

Custom sync (coming soon): This option will let you enter an endpoint to sync to. Typically that will be a serverless function where you can reshape the data and do other business logic before it's added to your content lake.

Sync data automatically: Automatically sync whenever you save products. Note: The sync will update the Shopify information for both published and drafts 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.

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@shopify init --template shopify --project PROJECT_ID --dataset DATASET_NAME

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

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

Hydrogen is Shopify's new React-based framework that comes with a lot of building blocks that help you build custom storefronts with cart handling, checkout, and more. It's currently in developer preview so that you can start experimenting and get a feeling for how it works.

The best place to start exploring what you can do with Hydrogen and Sanity is by checking out the demo starter. Its README.md contains an introduction and documentation of how it works. Inside of this starter, you'll also find an implementation of useSanityQuery that lets you combine product information from Shopify with content from Sanity to make sure that the frontend always reflects the latest state of your inventory and store.

useSanityQuery relies on some assumptions about the shape of your data and id conventions to work. These are baked into how the Sanity Connect automatic sync works, but if you have opted for a custom sync option, make sure you familiarize yourself with these assumptions if you use them to leverage the hook in your Hydrogen frontend.

You will find all data from Shopify under the store property. Typically, you want to set these fields as readOnly or hidden in your Sanity Studio schemas.

This is an example of a product document. Note the array of references to variant documents.

{
  "_createdAt": "2021-11-03T16:29:25Z",
  "_id": "shopifyProduct-6639500034135",
  "_rev": "o2tnlhWyosT1SsguwHFbhC",
  "_type": "product",
  "_updatedAt": "2021-11-07T02:22:27Z",
  "body": [],
  "images": [
    {
      "_key": "1472e0cfc7dd",
      "_type": "image",
      "asset": {
        "_ref": "image-84e890423efd39ed23c5ec4518a54ed4db8c9b7f-3840x2160-jpg",
        "_type": "reference"
      }
    }
  ],
  "sections": [],
  "store": {
    "createdAt": "2021-11-03T16:29:19Z",
    "id": 6639500034135,
    "isDeleted": false,
    "options": [
      {
        "_key": "Material",
        "_type": "option",
        "name": "Material",
        "values": [
          "Glass",
          "Fire",
          "Cream"
        ]
      }
    ],
    "previewImageUrl": "https://cdn.shopify.com/s/files/1/0550/0456/1495/products/vase_01_00000.jpg?v=1635957059",
    "priceRange": {
      "maxVariantPrice": 10000,
      "minVariantPrice": 10000
    },
    "productType": "",
    "slug": {
      "_type": "slug",
      "current": "vase"
    },
    "status": "active",
    "tags": "",
    "title": "Example Vase A (v11)",
    "updatedAt": "2021-11-05T15:41:59Z",
    "variants": [
      {
        "_key": "7bc42489-a319-46ca-b667-e50a46bfcd25",
        "_ref": "shopifyProductVariant-39466495705175",
        "_type": "reference",
        "_weak": true
      },
      {
        "_key": "e41f4cc4-341c-4269-b2a6-81449e0a950b",
        "_ref": "shopifyProductVariant-39466495737943",
        "_type": "reference",
        "_weak": true
      },
      {
        "_key": "db63fd33-6bab-4ec6-b16d-479d554d5ab8",
        "_ref": "shopifyProductVariant-39466495803479",
        "_type": "reference",
        "_weak": true
      }
    ]
  }
}

This is an example of a variant document.

{
  "_createdAt": "2021-11-03T16:30:42Z",
  "_id": "shopifyProductVariant-39466495705175",
  "_rev": "6S6DS0jiziiPJrIgugMBKV",
  "_type": "productVariant",
  "_updatedAt": "2021-11-05T20:42:33Z",
  "store": {
    "compareAtPrice": 0,
    "createdAt": "2021-11-03T16:30:34Z",
    "id": 39466495705175,
    "isDeleted": false,
    "option1": "Glass",
    "option2": "",
    "option3": "",
    "previewImageUrl": "https://cdn.shopify.com/s/files/1/0550/0456/1495/products/vase_01_00001_a672060a-9184-44fe-9a4e-d81dd630387f.jpg?v=1635957098",
    "price": 100,
    "productId": 6639500034135,
    "sku": "",
    "status": "active",
    "title": "Glass",
    "updatedAt": "2021-11-03T16:38:15Z"
  }
}