Transcript of How to Connect Shopify to Framer with Frameship (tutorial)

In this video, I'm going to show you how you can connect your Shopify store to Framer. My name is Ryan from Insert Frame. Let's get started. So, here we are inside of a Framer project. Now, what I want to do is go to the CMS cuz we're actually going to sync all of our Shopify data to the Framer CMS so then we can show it on our Framer website. So, let's go up to the plugins tab here and let's open the Frameship plugin. From here, you'll be guided to create a new collection. Now, you can call this whatever you want, but I'm going to call this my store. Click on create. And now, we can connect this to Shopify. Now, we need a couple of details here. We need our Shopify store URL and a storefront API access token which we will need to generate from Shopify itself. So let's go to Shopify here and let's firstly go to our apps and let's click on app and sales channel settings. From here we can go to develop apps and we can create an app which we can call our framer connection but again you can call this whatever you like. Click on create app and go to configure storefront API scopes. Now this is really important that we get right because essentially what we're doing is allowing framer to read our website so it can pull the data correctly. So we need to make sure we have checked unauthenticated write checkouts and unauthenticated read checkouts as well as unauthenticated read product listings and unauthenticated read product inventory. Once you've ticked those, head over and save this and click on install app and just press install. Great. Now, you'll notice under our API credentials here, we have a new access token key. So, let's just copy that and go back to framer and we'll paste that in here. And the only other thing we need is our Shopify store URL. So, if I go back to Shopify here, you'll notice at the top of the page at the left, we've got our public URL link for Shopify. So, we'll go back to the plugin and we'll paste that in. And all I need to do is click connect your Shopify store. Now, once that's done, I can go ahead and sync my products. And just like that, you can see all of my products have properly imported. Now, if all of your Shopify data isn't syncing correctly, there might be a couple of reasons. Let's click on manage here. And you'll notice we can actually set up all of our field properties for our Shopify connection. Now, by default, these should work just fine. But sometimes you might have a custom field or something that's set up a little bit differently in Shopify. So, you can either tweak the field properties here or add a new field option here as well to match what's in your Shopify. And that's a super simple tutorial on how to connect your Shopify store to the Framer CMS.