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

# Introduction

> Frammerce connects a Shopify store to the Framer canvas and ships 21 commerce components plus a runtime cart - so you can build a real storefront without a Shopify theme.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/framergeeks-5082ee09/N10R_Z8p3wsemciR/images/hero-light.png?fit=max&auto=format&n=N10R_Z8p3wsemciR&q=85&s=562b2700cb32534f26ed32bce73daa54" alt="Frammerce - Shopify storefronts inside Framer" width="1150" height="897" data-path="images/hero-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/framergeeks-5082ee09/N10R_Z8p3wsemciR/images/hero-dark.png?fit=max&auto=format&n=N10R_Z8p3wsemciR&q=85&s=b6ac9618d980659081785924b70261bb" alt="Frammerce - Shopify storefronts inside Framer" width="1150" height="897" data-path="images/hero-dark.png" />
</Frame>

## What Frammerce is

Frammerce is a Framer plugin that turns a Framer project into a Shopify-backed storefront. It does three things:

1. **Connects** your Shopify store to the Framer canvas via the Storefront API.
2. **Ships 21 commerce components** (product gallery, cart drawer, checkout button, etc.) as draggable Framer code components.
3. **Syncs your catalog** into a Framer managed collection so designers can use the CMS they already know.

There is no Shopify theme to maintain, no Liquid to write, and no backend you have to run. Frammerce talks to Shopify's read-only Storefront API at runtime; checkout hands off to Shopify's hosted checkout so payments stay secure.

## What you'll need

<Card title="Before you start" icon="circle-check">
  * A Framer account with the Frammerce plugin installed
  * A Shopify store (any plan, including dev stores)
  * A Shopify Storefront API access token (we show you how to get one)
</Card>

## Where to go next

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/docs/quickstart">
    Connect a store, drag your first component, and ship.
  </Card>

  <Card title="Get a Storefront token" icon="key" href="/docs/get-shopify-token">
    Generate the access token Frammerce needs to read your store.
  </Card>

  <Card title="Components reference" icon="grid" href="/docs/components/overview">
    All 21 product and cart blocks the plugin ships.
  </Card>

  <Card title="CMS sync" icon="database" href="/docs/cms-sync">
    Pull your Shopify catalog into a Framer managed collection.
  </Card>
</CardGroup>

## How the panel is organised

The plugin panel has four primary screens:

| Screen         | What it does                                                        |
| -------------- | ------------------------------------------------------------------- |
| **Components** | Draggable catalog of every product and cart block.                  |
| **CMS**        | Connect your Shopify store, pick fields, sync your catalog.         |
| **Settings**   | View your credentials, manage plan, open sync settings, disconnect. |
| **Pricing**    | Plan tiers and license-key activation.                              |

The Templates screen exists in the panel today as a "coming soon" placeholder - layouts will ship in a future release.