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.
- Shopify Connect: build a Shopify storefront in Framer - sync your catalog into Framer CMS or pull it live via the Storefront API - with product, listing, cart and checkout components.
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 on a public https:// address at the domain root, an administrator or shop manager login, the free FeCommerce Bridge for WooCommerce plugin (1.3.0 or newer), and a Framer account. No API keys needed. |
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. |
Shopify Connect | A Shopify store, your shop domain, and a Storefront API public access token. |
FeCommerce: Overview
FeCommerce connects your WooCommerce store to Framer with a short code you approve in WordPress. Sync your products into a Framer CMS collection, or show them live from your store, then build the shop with drag-and-drop product, cart and checkout components. Orders, stock and payments stay in WooCommerce.
How the pieces fit
- FeCommerce Bridge for WooCommerce: a small free WordPress plugin that lets your Framer site talk to your store. You approve the connection with a short code. No WooCommerce API keys, Stripe keys or passwords.
- Data source: choose CMS (synced to Framer) or API (live from your store) in the plugin. Switch any time.
- Components: product listing, product page, variant selector, cart, checkout and more. They connect to your store automatically when you insert them.
- Cart & checkout: the cart runs on the WooCommerce Store API, with coupons, live shipping and tax calculated by your store. The on-page checkout takes Stripe cards (with 3-D Secure), Paystack, Cash on Delivery, bank transfer and cheque, using the gateways you've enabled in WooCommerce. Prefer WooCommerce's own checkout? Switch the buttons to Redirect mode.
Connect WooCommerce
FeCommerce connects to your store through the free FeCommerce Bridge for WooCommerce plugin. You approve the connection with a short code. No WooCommerce API keys, Stripe keys or passwords.
Install the Bridge plugin
Download the free FeCommerce Bridge for WooCommerce plugin. In WordPress, go to Plugins > Add New Plugin > Upload Plugin, choose the ZIP, then click Install Now and Activate.
Get a code in Framer
In Framer, open FeCommerce and click "Connect store". You'll get a short code.
Approve it in WordPress
In WordPress, go to WooCommerce → FeCommerce, enter the code and click "Approve". Then confirm your store in Framer.
Sync, build and publish
Sync your products, drag components onto the canvas, style them and publish. Under Data Source, pick CMS to sync products into a Framer collection, or API to show them live from your store.
What CMS sync brings in
Name, prices, SKU, images and gallery, stock, description and short description, variations, reviews, rating, categories, tags, brand, additional info and related products. Images are copied into Framer. Weight and dimensions aren't synced.
Syncing adds and updates products but never deletes them. Products removed from your store are listed so you can delete them in Framer. Sync again whenever you change products in WooCommerce.
Product & cart components
Open the Components tab in the plugin and click "Insert Component". Each component arrives already connected to your store. Pick a product under "Select a product" and new product components wire themselves to it.
| Component | What it does |
|---|---|
| Product Listing Page | Live shop grid with search, sorting, filters (category, sale, price, colour), grid or list view and pagination or "Load more". |
| Product Page | Full product layout built from editable layers: gallery, title, price, variants, quantity, Add to Cart and Buy Now. |
| Product Detail (CMS) | Product layout bound to your synced CMS collection. |
| Product Grid (CMS) | Grid of synced products with search, sorting, category tabs and pagination. Works on Framer's Free plan. |
| Product Title, SKU, Price, Price Discount, Rating | Single product details you can place and style anywhere. Price Discount shows the saving as a percentage or amount. |
| Variant Selector & Variant Image Switch | Size pills and colour swatches that disable out-of-stock options, and swap the image to match the chosen variant. |
| Quantity Input & Inventory Label | Quantity stepper, and an in-stock / low-stock label or counter. |
| Add to Cart & Buy Now buttons | Add to the on-page cart, or use Redirect mode to send shoppers to your WooCommerce cart and checkout. Choose what happens after adding: open the drawer, stay, open the cart or go to checkout. |
| Product Tabs | Description, Additional Information, Shipping & Returns and Reviews in tabs. |
| Product Reviews | Review list and submission form. New reviews are moderated in WordPress. |
| Related Products | A "You may also like" row of related products. |
| Share | Share by email, Pinterest, Facebook or X, or copy the link. |
| Cart, Open Cart Button & Cart Item Count | Slide-in cart drawer with quantities, totals and a discount code, plus a button and badge to open it. |
| Cart Page | Full-screen cart with line items, coupon and totals. |
| Checkout | Full-screen checkout: contact, billing and shipping addresses, live shipping methods, tax and payment. Every label can be changed or translated. |
| Mobile Sticky Cart | Fixed bottom bar on phones with Add to Cart and Buy Now. |
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">Shopify Connect: Overview
Shopify Connect brings your Shopify store into Framer and lets you build a complete, fully custom storefront without leaving the design tool. Sync your catalog into the Framer CMS in one click, or pull products live via the Storefront API, then assemble product pages, listings, cart and checkout with ready-made, drag-and-drop components. No themes, no code. Built as a native Framer plugin and free to use.
Two data modes
- CMS mode: syncs products into Framer CMS so pages render from CMS data and load fast. (Cart and checkout still use Shopify's live API in both modes.)
- API mode: fetches live data on demand and fetches products by handle. Switch between the two modes anytime.
Storefront components
Product Page, Product Listing (search, sort, pagination), Variant Selector (pills, swatches, image switch), Add to Cart, Buy It Now, Quantity, Cart Drawer, Cart Page, Cart Icon, Mobile Sticky Cart, Price, Price Discount, SKU, Inventory Label and Counter, Tabs, Related Products, Share, and more. Changing a variant updates price, SKU, stock and image everywhere on the page.
Shopify Connect: Setup & components
Setup requires a Shopify Storefront API access token (a public token). You'll create it in Shopify admin, paste it into the plugin with your shop domain, then sync or fetch your products.
Create a Storefront API token
In Shopify admin, go to Sales channels → Headless → Manage → Storefront API and create a Public access token.
Connect your store
Open Shopify Connect in Framer and enter your shop domain and the Storefront API access token.
Sync or fetch live
Sync products into a Framer CMS collection, or fetch live by handle in API mode. You can switch modes anytime.
Drag components & publish
Drop storefront components onto the canvas. They auto-wire to your store and render real data. Shoppers add to cart and check out through Shopify's secure hosted checkout.
Troubleshooting
Products aren't syncing from WooCommerce
Check that the FeCommerce Bridge plugin (1.3.0 or newer) is active, your store is on a public https:// address at the domain root (not a sub-folder), and that security or cache plugins aren't blocking or caching the /wp-json/fecommerce/ routes. You don't need WooCommerce API keys. If the code expired before you approved it, click Connect store in Framer to get a new one. Then sync again.
Synced products don't show on the page
For CMS components, make sure they're bound to the collection you synced, then republish. Product Grid (CMS) works on Framer's Free plan. If live components show nothing on the published site, check that the store is still connected in WooCommerce → FeCommerce, then republish.
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.
Shopify Connect products won't load
Check that your shop domain is correct and that you pasted a Storefront API public access token (from Sales channels → Headless → Manage API access → Storefront API), not an Admin API token. In CMS mode, re-sync after connecting; in API mode, confirm the product handle exists.
How do I get updates?
Plugins update automatically through the Framer Marketplace. See the Changelog for what's new.