---
title: "Getting Started with FrameStoreKit"
canonical_url: "https://framestorekit.com/docs/getting-started"
last_updated: "2026-10-21T15:06:29.816Z"
meta:
  description: "Learn the FrameStoreKit setup flow: connect headless Shopify with a public Storefront token, sync products to Framer CMS, and insert commerce components from the plugin."
  "og:description": "Learn the FrameStoreKit setup flow: connect headless Shopify with a public Storefront token, sync products to Framer CMS, and insert commerce components from the plugin."
  "og:title": "Getting Started with FrameStoreKit"
---

FrameStoreKit home

# Getting Started

Connect a headless Shopify store to Framer, sync your catalog into Framer CMS, and design every storefront page with components that inherit your Framer text styles. Shopify keeps running orders, payments, taxes, and checkout.

**Public Storefront token**not**~~An Admin app~~**

This guide assumes you have access to your Shopify admin and a Framer project. Data goes directly from the browser to Shopify's Storefront API — no Admin app, no private token.

## Add components with the plugin

Use the FrameStoreKit plugin to browse components and insert them directly into your Framer canvas after connecting your Shopify store and syncing products. Manage licenses and connected stores from your [account](https://framestorekit.com/account).

## Step 1: Connect your Shopify store

Connect over the public Storefront API — no Admin app required:

1. In your Shopify admin, add the **Headless** sales channel and create a storefront
2. Copy the **public Storefront API token** and your **myshopify.com** domain
3. Open FrameStoreKit in Framer, sign in, and paste the domain and token
4. **Connected!** The plugin validates the token and flags Admin/private tokens pasted by mistake

**Scopes:** two scopes are off by default — enable `unauthenticated_read_product_inventory` for stock components and `unauthenticated_read_bundles` for bundle blocks. The plugin detects missing scopes and guides you.

Connect walkthrough video coming soon

## Step 2: Sync your catalog to Framer CMS

Pull products and collections into Framer Managed Collections:

1. **Open the Sync tab** - Pick the collections or products to sync (sync-all is the default)
2. **Run the first sync** - Products, variants, prices, stock, and images flow into Framer CMS
3. **Keep your own fields** - Framer-only fields you add (story copy, lookbook layout) survive every re-sync

#### **🔄 What syncs**

- **Products & variants:** title, price, compare-at, options, availability
- **Collections:** grouped product listings
- **Manual sync** ships in v1; Auto-Sync via Shopify webhooks is on the roadmap

Sync setup video coming soon

## Optional: Set up customer login

Customer Account setup is optional and available on Pro or Lifetime for the connected Shopify store. Choose **Skip for now** in onboarding if you only need the storefront.

To enable login, enter a public Customer Account **Client ID** and your **published Framer HTTPS site URL**. Register the callback, JavaScript origin, and logout URI shown in the form in Shopify Headless, then create an `/account` page with Account View or Auth Callback.

Follow the [Customer Account setup guide](https://framestorekit.com/docs/shopify/customer-accounts). You can return to **Manage → Customer accounts** after onboarding to update or clear these settings.

## Step 3: Insert storefront components

Drop in product, cart, accounts, AOV, Markets, and analytics components:

1. **Open the Components tab** - Browse 30+ components; Pro ones are badged
2. **Insert onto the canvas** - Product card, gallery, variant selector, cart drawer, checkout button, and more
3. **Bind to your CMS** - Components read the synced product/collection data automatically

#### **📦 Product & Cart**

Free, the storefront essentials

- • Card, gallery, price, stock
- • Variant selector, quantity, add-to-cart
- • Cart drawer, totals, discount code

#### **📈 AOV & revenue**

Pro, front-end, no extra app

- • Quantity breaks, Buy X Get Y (BOGO)
- • Product options + paid add-ons
- • FBT, cart + post-ATC upsell, free-ship bar
- • Low-stock counter, sticky ATC · bundles soon

#### **🌍 Deep Shopify**

Pro, native to Shopify

- • Customer accounts + order history
- • Subscriptions (selling plans)
- • Markets multi-currency, Shop Pay

Components walkthrough video coming soon

Plugin-inserted components use `auto` connection fields to follow your saved site settings. For an older instance, change explicit connection values to `auto` if it should follow future updates.

Storefront filters, search, sort, and favorites are deferred to a later release. See the [components catalog](https://framestorekit.com/components) for what ships today.

## Step 4: Style to match your design

Every component uses Framer's standard styling controls — and inherits your text styles:

#### **🎨 Your text styles, not a widget's**

Every text-bearing component uses your project's text styles, so typography is yours. Colors, spacing, and borders work exactly like native Framer components — style in the property panel.

- **Typography:** components inherit your Framer text styles
- **Colors:** background, text, borders, hover states
- **Layout:** padding, margins, spacing, alignment
- **Effects:** shadows, blur, borders, corner radius

Styling walkthrough video coming soon

## 🚀 Quick start with a starter project

Want to see it working immediately? Start from a wired-up storefront:

### **⚡ Instant setup**

1. **Open the Components tab** - Find the "Starter projects" section
2. **Insert a starter** - A full product page or storefront, already wired
3. **Connect your store** - Point it at your synced catalog
4. **Restyle it** - Or strip it for parts

#### **🛍️ Storefront starter**

Collection and cart flows wired to your Shopify catalog, ready to restyle

Perfect for: full stores, design-led brands, agencies

#### **📄 Product page starter**

Gallery, variant selector, price, stock, and add-to-cart already in place

Perfect for: single products, landing pages, drops

Starter projects give you a working storefront to learn from. Insert one, connect your synced catalog, then make it your own.

## ✅ You're done!

**Publish your Framer site** and check the flow end to end:

✅ Products and collections render from Framer CMS

✅ Add-to-cart updates the cart drawer

✅ Checkout hands off to Shopify-hosted checkout

✅ Everything looks good on mobile

✅ If customer login is configured, sign-in returns to your account page

## Update tokens and site settings later

1. Open **Manage → Connection** to update the public Storefront API token and select **Save changes**.
2. Open **Manage → Customer accounts** to change the Client ID or published site URL and select **Save customer accounts**.
3. Check **Manage → Domains & runtime**. If Framer denied the script write, reopen from the canvas and select **Retry site script update**. Enable disabled snippets in **Site Settings → Code**.
4. Publish your Framer site to apply the saved changes.

Each save replaces the existing FramerHub site script without adding duplicates. Unrelated custom code is preserved. See the [connection and token update guide](https://framestorekit.com/docs/shopify/connect-store#update-credentials) for details.

Free stores display a Powered by FrameStoreKit button on the published site. Applying a Pro or Lifetime license to the connected store removes it after the site script updates and you publish again.

### **🎉 Your Shopify storefront is live in Framer!**

A real headless Shopify store that looks like your Framer design — with Shopify still running orders, payments, taxes, and checkout.

## Need Help?

[<h4>🎯 Component catalog</h4>Browse the full storefront, cart, AOV, accounts, and Markets components](https://framestorekit.com/components) [<h4>💡 How it works</h4>See the connect → sync → design → sell flow end to end](https://framestorekit.com/how-it-works) [<h4>⚙️ Plans & licensing</h4>Free to start; Pro is a yearly license with the full commerce kit](https://framestorekit.com/pricing) [<h4>💬 Get Support</h4>Stuck on your specific setup? We're here to help you succeed](https://framestorekit.com/contact)

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.