FramerShop

What is FramerShop?

FramerShop is a commerce layer for Framer that turns your designs into a real shop. You design pages and components in Framer, bring your product data in with this plugin, and ship — with the confidence that your site stays up‑to‑date.

This plugin connects a Framer project to your FramerShop catalog so you can import products into a CMS collection and keep them in sync. From there, bind fields to your components (lists, detail pages, galleries) and bring your storefront to life.

FramerShop Demo

Try the demo (no code)

• Duplicate the Framer template: Remix the demo project.

• Sign in at framershop.io with owner@framershop-demo.com / demo1234.

• In Dashboard → Settings, copy the Framer API Key and paste it into the plugin.

• The template already includes CMS data; you can Sync to refresh it or Import to swap in the demo catalog.

Why it feels magical in Framer

• Design‑first workflow: start with your ideal layout, not a template.

• Live product data: real content while you design, not lorem ipsum.

• Instant binding: drag‑and‑drop fields onto components; no schemas to hand‑code.

• Seamless sync: re‑run the plugin to refresh items without breaking your bindings.

• Optional components: use FramerShop’s cart/checkout building blocks to go from design to production faster.

What the plugin does

• Imports your products into a Framer managed collection

• Preserves your field naming while safely updating data

• Sets each item’s slug to your product SKU for predictable URLs

• Supports:

  • Rich text descriptions

  • Arrays of images

  • Enum categories (pulled from your store)

  • Multi‑collection references for product bundles

  • Stock and featured flags