> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started 

> This guide walks you through creating a Shopify store and configuring the Storefront API for headless commerce integration with Framerfy.

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/ksO88iQGNZk?si=17KBaNhUvcT84Vpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

## 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](https://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 → Home**
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](https://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:

| Field       | Value                                                                |
| :---------- | :------------------------------------------------------------------- |
| **Domain**  | `your-store.myshopify.com`                                           |
| **API Key** | Your Public Access Token                                             |
| **Name**    | Give a name to your store, so you know which store it is referred to |

Enter these in Framerfy's store connection settings to complete the integration.