How To Connect Shopify to Framer

Want to show your Shopify products on your Framer website? Or even run your store directly on Framer? Well, it's simpler than you might think.

This guide will walk you through connecting your Shopify store to Framer using the Frameship plugin.

If you prefer watching along then scroll to the bottom of this article to watch the tutorial video.

What You'll Need

Before we start, make sure you have:

• A Shopify store with products

• A Framer project (in which you want to display the products)

• The Frameship plugin (read below to get 10% OFF)

Step 1: Setting Up Your Collection in Framer

First, you'll need to open your Framer project and go to the CMS section. We'll be syncing all your Shopify data here so it can appear on your website.

Navigate to the plugins tab and open the Frameship plugin. You'll be prompted to create a new collection - you can name this whatever makes sense to you. For this example, we'll call it "My Store". Click create to continue.

If you haven't purchased the plugin yet, you can get 10% OFF with the code FMPT10 on the Frameship website.

The Frameship plugin is a one-time purchase (currently $79), there’s no recurring cost.

Step 2: Getting Your Shopify Credentials

To connect Framer to Shopify, you'll need two things:

1. Your Shopify store URL

2. A storefront API access token

Creating Your Shopify App

Head over to your Shopify admin panel and go to Apps, then click on "App and sales channel settings".

From there, you'll need to select "Develop apps" and create a new app. You can call it "Framer Connection" or anything that helps you remember what it's for.

[Insert screenshot of Shopify app creation page]

Configuring API Permissions

This is a very important step: you need to set the right permissions so Framer can read your store data properly.

Click on "Configure storefront API scopes" and make sure all these boxes are ticked:

• Unauthenticated write checkouts

• Unauthenticated read checkouts

• Unauthenticated read product listings

• Unauthenticated read product inventory

Once you've selected these permissions, you can save your changes and install the app.

[Insert screenshot of Shopify API permissions page]

Step 3: Connecting Everything Together

After installing your app, you'll see a new access token under your API credentials. Copy this token as you'll need it for Framer.

Your Shopify store URL can be found at the top left of your Shopify admin panel. It's the public URL link for your store.

Now, head back to the Frameship plugin in Framer. Paste in your access token and store URL, then click "Connect your Shopify store".

Step 4: Syncing Your Products

Once the two are connected, you can sync your products by clicking the sync button. Your Shopify products should now appear in your Framer CMS collection.

If something doesn’t look right, go to Manage inside the plugin. Here, you can check the field properties and adjust them if you have custom fields in Shopify.

And that's it!

You’ve just connected Shopify to Framer using Frameship.

Now all of your Shopify products can be pulled directly into your Framer designs.

This makes it much easier to manage your store content in one place, while still designing with the flexibility Framer gives you to make your store (or website) stand out.

Watch the tutorial video below: