Getting Started

​

Prerequisites

• A Shopify account (free trial available)
• Access to your Shopify admin dashboard

​

Step 1: Create Your Shopify Store

If you don’t already have a Shopify store, follow these steps (If you already have an account jump to step 2):

1. Go to shopify.com and click Start free trial.
2. Enter your email, create a password, and choose your store name
3. Complete the onboarding flow—add your business details, select a plan, and configure preferences
4. Add products, organize collections, and set up payment gateways

​

Step 2: Install the Headless App

Framerfy connects to your store via Shopify’s Storefront API for fetching the data. To enable this:

1. In your Shopify admin, go to Settings → Apps and Sales Channels
2. Click Shopify App Store
3. Search for Headless and open the app by Shopify
4. Click Install, then Open

​

Step 3: Create a Storefront

1. In the Headless app, click Add Storefront
2. Enter a name for your storefront
3. Under the Storefront API section, click Manage
4. Enable all required scopes (read access to products, collections, checkouts, customers)
5. Copy the Public Access Token—this is your API key for Framerfy.

​

Step 4: Get Your Store Domain

1. Go to Settings → Domains
2. Copy your primary domain (format: your-store.myshopify.com)

​

Step 5: Configure Framerfy

Now connect your Shopify store to Framerfy:

1. Visit framerfy.ae and sign up using your email
2. Once logged in, go to the Overview page
3. Click + Add Store
4. Enter a store name (doesn’t need to match your Shopify store name—it’s just for your convenience)
5. Paste your Shopify Domain URL and Public Access Token (from Step 3)
6. Click Save

You’re all set! Your store is now connected to Framerfy.

​

Step 6: Access the Plugin

To use Framerfy inside Framer:

1. Open your Framer project
2. Click Plugins in the toolbar
3. Search for Framerfy and open it
4. Click Login and enter your credentials (the email and password from Step 5)
5. Select your store and click Continue
6. You’ll land on the home page—your plugin setup is complete ✅

​

Step 7: Fetch Data in CMS

To sync your Shopify products to Framer’s CMS:

1. Go to Framer’s CMS page
2. Click Manage (available in the header)
3. Select all the fields you need for building your website
4. Click Confirm
5. Your Shopify data will now sync to Framer CMS

::: tip Note If you make changes to your Shopify products, click the Sync button in the header to pull the latest updates. :::

​

Step 8: Use Custom Components

Once setup is complete, open the plugin to access the Component Library. It includes ready-to-use components for your Framer × Shopify integration:

• Variant selectors
• Variant image carousels
• Price display
• Add to cart button
• Buy button
• Cart modal
• Price filters
• Color selectors
• Quantity selector

Drag and drop these components into your Framer project to build your storefront. ::: tip Feedback We’re currently in alpha. If you need a component that’s missing, submit a request via our Help & Feedback form with the component name and description. We’re actively building based on user feedback—don’t hesitate to reach out. :::

​

Connection Details

You now have everything needed to connect: Enter these in Framerfy’s store connection settings to complete the integration.