Introduction
FeCommerce is a suite of free Framer plugins for building real, working e-commerce sites, no code required. This documentation covers installing the plugins and setting up each one.
The plugins
- FeCommerce: sync WooCommerce products into Framer — via CMS or live API — with product, cart and checkout components.
- StripeKit: accept Stripe payments: sync your catalog and drop Buy Now buttons with auto-generated Payment Links.
- RazorpayKit: take Razorpay payments: UPI, cards and one-tap checkout.
- Calendly Booking: embed native Calendly scheduling widgets.
- SEO Toolkit: live SEO score, meta tags, JSON-LD schema, previews and speed audits.
Install a plugin
Every FeCommerce plugin installs from the Framer Marketplace in a couple of clicks. The flow is the same for all of them.
Open the plugin page
Visit our Framer Marketplace profile and pick the plugin you want, or click Install Free from any product page.
Click Install
Framer opens the plugin in your editor. Click "Install". It's added to your account and available in every project.
Open it from Plugins
In any Framer project, open the Plugins menu in the toolbar and launch the plugin to configure it.
Requirements
What you need before connecting each plugin:
| Plugin | You'll need |
|---|---|
FeCommerce | A WooCommerce store + REST API keys, and a Framer account. CMS sync works on any plan, including Free. |
StripeKit | A Stripe account + publishable/secret API keys. |
RazorpayKit | A Razorpay account + Key ID and Key Secret. |
Calendly Booking | A Calendly account and an event link. |
SEO Toolkit | A Framer project. No external account needed. |
FeCommerce: Overview
FeCommerce connects your WooCommerce store to Framer. It pulls your products into a Framer CMS collection and gives you components (product grids, product pages and a cart) that read from that collection. Update a product in WooCommerce and it flows through to your Framer site.
How the pieces fit
- Sync: the plugin imports products (title, price, images, variants, stock and categories) into a CMS collection, or pulls them live via API.
- Components: product grid, product detail, cart and checkout components read from your store. Bind the CMS-mode components to your collection from the right-hand panel.
- Cart & checkout: items add to a cart backed by the WooCommerce Store API (with coupon support). FeCommerce includes a built-in checkout — contact, shipping address and live shipping rates — with Cash on Delivery, bank transfer and cheque built in, plus an optional Stripe card. Prefer a hosted flow? Pair with StripeKit or RazorpayKit instead.
Connect WooCommerce
FeCommerce talks to your store through the WooCommerce REST API. You'll generate a read-only key in WooCommerce and paste it into the plugin.
Generate API keys
In WordPress, go to WooCommerce > Settings > Advanced > REST API and click "Add key". Set permissions to Read and generate.
Paste into the plugin
Open FeCommerce in Framer and paste your Store URL, Consumer Key and Consumer Secret.
Sync products
Click "Sync". Your products import into your chosen Framer CMS collection. Re-sync any time to pull updates.
Store URL: https://yourstore.com
Consumer Key: ck_xxxxxxxxxxxxxxxxxxxxxxxx
Consumer Secret: cs_xxxxxxxxxxxxxxxxxxxxxxxx
Permissions: ReadProduct & cart components
Once products are synced, drag the FeCommerce components from the Assets panel onto your canvas. For CMS-mode components, bind their fields to your synced collection from the right-hand panel.
| Component | What it does |
|---|---|
| Product Listing Page | Self-fetching shop grid with filters, sorting and pagination. Links to each product page. |
| Product Page | Full detail layout: gallery, variations, price, quantity, Add to Cart and Buy Now. |
| Product Detail (CMS) | CMS-bound detail layout for synced products. |
| Product Grid (CMS) | A fixed product grid built from your synced products. Works on the Free plan — no collection wiring needed. |
| Variant Selector | Size pills + colour swatches; auto-disables out-of-stock variants. |
| Buy Now Button | Adds to cart and goes straight to checkout. |
| Add to Cart Button | A button you can place anywhere to add a specific product to the cart. |
| Cart | Slide-in side panel with quantities, totals, coupons and a checkout button. |
| Cart Page | Full-screen cart with line items, coupons and totals. |
| Checkout | Full-screen checkout: contact, shipping, live rates and payment. |
| Mobile Sticky Cart | Fixed bottom bar on phones with Add to Cart / Buy Now. |
| Product Reviews | Review list + submission form, read from your store. |
| Related Products | "You may also like" row of same-category products. |
Styling
Every component is a normal Framer layer: change fonts, colors, radius and spacing in the right panel. Double-click to enter a component and edit its inner elements.
StripeKit: Overview
StripeKit connects your Stripe account and turns your real products into drag-and-drop checkout components. Sync your catalog, drop Buy Now buttons with the Stripe checkout wired in, and generate Stripe Payment Links, all without a backend, OAuth or code.
Connect Stripe & checkout
Get your API keys
In the Stripe Dashboard, copy your Publishable key and Secret key.
Connect in the plugin
Open StripeKit in Framer and paste your keys. Use test mode keys while you build.
Add a checkout button
Drop a Checkout Button on the canvas, set the product/price, and publish. Clicking it opens Stripe Checkout.
4242 4242 4242 4242 with any future date and CVC. Swap to live keys when you're ready. RazorpayKit: Setup & checkout
RazorpayKit connects your Razorpay account and turns your Payment Links into drag-and-drop Pay Now buttons. Choose hosted Payment Links or a Standard Checkout modal, with multi-currency support (INR, USD, EUR, GBP, AED, SGD, AUD, CAD).
Get your keys
In the Razorpay Dashboard, go to Settings > API Keys and copy your Key ID and Key Secret.
Connect in the plugin
Open RazorpayKit in Framer and paste your Key ID and Key Secret.
Add checkout
Place a Pay button, set the amount and currency and label, and publish. Customers check out with UPI or cards in one tap.
Calendly Booking: Setup
Embed Calendly scheduling that matches your Framer design. No generic iframe.
Copy your event link
In Calendly, open the event type you want to embed and copy its scheduling link (e.g. calendly.com/you/30min).
Choose a widget
Drop a Calendly Booking component and pick a style: a Button + Popup or a full Inline scheduler.
Paste & publish
Paste your link, tweak colors to match your theme, and publish.
SEO Toolkit: Setup
Get a live SEO score, analyze your page, and manage meta tags, JSON-LD schema, search/social previews and speed, all inside Framer.
Per-page meta
- Open SEO Toolkit from the Plugins menu
- Select a page and set its title, description and social image
- Preview the Google and social card before publishing
Schema & technical
Add JSON-LD structured data (Organization, Product, Article and more) and run the technical checklist and Lighthouse speed audit so search engines and AI answer engines understand your pages.
<title>Your Page: Brand</title>
<meta name="description" content="Under 160 characters.">
<meta property="og:title" content="Your Page">
<meta property="og:image" content="/og-image.jpg">Troubleshooting
Products aren't syncing from WooCommerce
Check that your Store URL is correct (with https://), the REST API keys have Read permission, and your store is publicly reachable. Then click Sync again.
Synced products don't show on the page
Make sure the component is bound to the Products CMS collection and that you're on a Framer Pro plan (CMS requires it). Re-publish after syncing.
Stripe/Razorpay checkout doesn't open
Confirm your API keys are pasted correctly and you're using matching test/live keys. Checkout only runs on the published site or in Preview, not in the editor.
The Calendly widget is blank
Verify the event link is public and copied in full. Some ad blockers block Calendly, so test in a clean browser window.
How do I get updates?
Plugins update automatically through the Framer Marketplace. See the Changelog for what's new.