What is Framerce?

Framerce is an open-source toolkit that connects Shopify stores to Framer websites. Drop in components for products, cart, checkout, and catalog — design them on the Framer canvas, and they pull live data from Shopify at runtime.

Why Framerce?

Connecting Framer and Shopify today forces you into trade-offs:

• Embedding Shopify Buy Button — limited styling, poor performance, no design control
• Building custom code — expensive, fragile, requires a developer for every change
• Using closed-source plugins — subscriptions ($12/mo), per-domain fees ($99), or revenue commission (2%) with no visibility into what runs on your site

Framerce is the open-source alternative. MIT licensed, no recurring costs, and a transparent codebase you can inspect, extend, or self-host.

How it works

Framer Editor → Framerce Plugin → Shopify Storefront API
     ↓                                    ↓
  Visual design              Live product data, cart, checkout
     ↓                                    ↓
  Published site ←── Framerce Runtime ───→ Shopify

1. Install the plugin in Framer and connect your Shopify store
2. Drag components from the insert menu — they appear with property controls
3. Design your pages using the Framer canvas, slots, and layout tools
4. Publish — Framerce loads at runtime, fetches live data from Shopify, and handles cart/checkout

What makes Framerce different

Design on canvas

Components own behavior — add-to-cart logic, variant selection, price formatting — while you own the look. Compose them with slots, property controls, and Framer's design tools. No CSS overrides, no code required.

Live where it matters

Pricing, cart state, inventory levels, and catalog sort order come live from Shopify's Storefront API. Visitors always see current data — not stale snapshots synced to a CMS.

Analytics that convert

PostHog, Triple Whale, and Shopify's Web Pixel track every interaction from page view to checkout completion. UTM parameters and device identity survive the Shopify checkout redirect, so attribution data stays intact for retargeting and conversion optimization.

Markets built in

Shopify Markets multi-currency, localized pricing, and geo-detected checkout locale. Visitors see prices in their currency without extra configuration.

Open source, no lock-in

MIT licensed. Your data stays in Shopify, your design stays in Framer, and you can read every line of code that runs on your site. Hooks like useCart and useProduct let you extend beyond drag-and-drop when you need custom behavior.

Instant and fast

Connect your store in under 5 minutes — one plugin install, one API token. Each component loads 0.5–2 KB from the edge. Shared API requests are deduplicated automatically.

Reference

• Getting Started — Set up Framerce in under 5 minutes
• Components Overview — Browse all available components