Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Get help on SlackWatch Sanity demo

Switching from Prismic: Using Webhooks to Connect Shopify to Sanity

6 replies
Last updated: Dec 5, 2021
Hey Everyone! I recently switched from Prismic to Sanity as my main CMS going forward and I am loving it so far!:)
As a Vue/Nuxt developer I am having a hard time wrapping my head around using web-hooks to connect Shopify to Sanity. Currently my ecommerce sites are split into two parts: Sanity for content and Shopify for ecommerce - an example would be that the landing-page, editorial/blog pages, and internal pages are controlled by Sanity while the collection pages, product pages, and cart/shop component(s) are controlled through the Shopify via the Shopify Graphql API. It does work very well, clients are happy, websites look great, but ideally it would be excellent to have products connected to Sanity for rich-content.

I know that Hull has been a major success (which is awesome by the way! 
😁), but around half of the newer ecommerce sites I have seen use Vue/Nuxt (Vue devtools Chrome extension indicates this). I have seen some templates on Github by independent developers trying to achieve something similar to Hull by setting up web-hooks or complicated functions to connect Shopify to Sanity within Nuxt, but the projects are normally not fully developed.
I was wondering if there are any resources that I can learn more about setting up Sanity and Shopify with webhooks? Perhaps we can get a blog post from the Sanity team all about web-hooks and successfully fetch data? I am what you would call a "noob" when it comes to working with webhooks lol! Any advice or direction to go in would be really helpful.


Edit: I saw the Sanity Connect App that was recently released.. That is only compatible with Hydrogen so far or no? (edited)
Dec 4, 2021, 6:38 AM
Sanity-connect is a Shopify app for syncing products to your Sanity studio. It’s not tied to Hydrogen, you can use any frontend frameworks. But you’ll probably need to hook up your own cart/checkout logic with either the shopify-buy SDK or directly with the Shopify storefront api (GraphQL).
Dec 4, 2021, 9:00 AM
Hey
user T
! Thanks for getting back to me.
Okay great then I might try that out and see how it goes! The only thing I am wondering if Sanity-connect imports the product IDs used within the cart logic/Shopify checkout? Currently my cart adds the selected product's ID, price, image, etc.

Example:

async addToCart() {
  const variant = this.currentVariant
  const payload = {
    qty: this.quantity,
    productTitle: this.product.title,
    variantTitle: variant.title,
    variantId: variant.id,
    price: variant.price.amount,
    image: variant.image
  }

  await this.$store.dispatch('addToCart', payload)
}
I am just wondering if I could use the sanity-connect data instead of the shopify data and only use the shopify api for checkout purposes similar to Hull?
Dec 4, 2021, 8:27 PM
Yeah, this what I’m doing. In my case I’m using the buy sdk
Dec 4, 2021, 9:11 PM
Dec 4, 2021, 9:14 PM
Oh very cool. I will have to just try this out and see how to works. Are you using Vue/Nuxt?
Dec 5, 2021, 12:18 AM
I’m using Next, but the setup should be pretty similar with Nuxt
Dec 5, 2021, 9:29 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
Template

Featured
Official

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen

Blog with Built-in Content Editing
Template

Featured
Official

A Sanity-powered blog with built-in content editing and instant previews.