--- title: "Framer Ecommerce: How to Build an Online Store with Framer (2026)" description: "Framer has no native e-commerce. Here's every real option: Shopify integration, digital product embeds, third-party plugins, and when to use a different platform entirely." canonical_url: "https://framerhub.io/blog/framer-ecommerce-guide" last_updated: "2026-06-09T00:00:00.000Z" --- A client sends you a brief. They want to sell 40 products on their Framer site. Shoppers should be able to filter by size, color, and price. They want checkout to feel native, not like a widget dropped in from another platform. You open Framer. There's no cart, no checkout, no product pages built in. Framer has no native e-commerce. That's the situation. This guide covers every real option for handling it in 2026, what each one actually does, where each one breaks down, and which one fits your specific project. --- ## What Framer gives you (and what it doesn't) Before picking an integration, understand what Framer actually provides. **Framer CMS**: A solid content layer. You can build product collections with fields for price, images, descriptions, and SKUs. Displaying products in Framer CMS works well. Taking payment does not happen here. **Framer forms**: Basic contact and lead capture. No payment fields, no cart logic. **Custom code components**: Framer lets you embed arbitrary HTML and JavaScript. This is the gateway for every e-commerce integration in this guide. So the architecture for framer ecommerce always works the same way: Framer handles the design and front-end experience. A third-party platform handles payments, inventory, and order management. The two connect via embeds, APIs, or dedicated plugins. That's not a shortcoming unique to Framer. Many serious stores run on headless Shopify regardless of their front-end. Knowing the real landscape helps you set the right expectations with clients before you start building. For a broader comparison of Framer against platforms with native e-commerce, the [Framer vs WordPress comparison](/blog/framer-vs-wordpress) covers that in detail. --- ## Option 1: Shopify buy button (fastest setup) Your client has 12 products. They already use Shopify to manage inventory. They want the site built in Framer. This is the right option. The Shopify Buy Button is the quickest framer shopify integration. You generate an embed code from your Shopify admin, paste it into a Framer custom code component, and you have a working product widget with cart and checkout. **What it does:** - Displays a product with image, title, price, and variant selector - Opens a Shopify-hosted cart and checkout overlay - Handles payments, taxes, and order confirmation through Shopify - Syncs inventory automatically **What it doesn't do:** - Give you a full product catalog page inside Framer - Allow deep customization of the cart UI - Provide filtering or search across products **Best for**: Small catalogs (1 to 20 products), brand sites selling merchandise, creators adding physical products to a Framer site. ### Step-by-step: Shopify buy button in Framer **Step 1: Set up your Shopify store** You need an active Shopify account. The Starter plan at $5/month works for Buy Button only. Add your products with images, prices, and variants. **Step 2: Create a buy button in Shopify** In your Shopify admin, go to Sales Channels, then Buy Button. Click "Create a Buy Button." Choose the product or collection. Customize the button style to match your Framer design. Copy the generated embed code. Official Shopify Buy Button docs: [help.shopify.com/en/manual/online-sales-channels/buy-button](https://help.shopify.com/en/manual/online-sales-channels/buy-button) **Step 3: Add it to Framer** In your Framer project, insert a Code Component or use the Embed element for simple cases. Paste the Shopify Buy Button embed code. Adjust size and position in Framer's layout system. The widget renders live in preview and on your published site. **Step 4: Design everything around it** The Buy Button widget itself has limited styling (you configure it in Shopify's builder). Design the product photography layouts, descriptions, related products, and social proof sections in Framer. The Framer design carries the brand. Shopify handles the transaction. **Step 5: Test the full flow** Use Shopify's test mode to place a test order. Verify the cart opens correctly, checkout works, and the confirmation email sends. Check on mobile. The Shopify cart overlay is responsive but verify it doesn't conflict with your Framer layout. **Pros and cons**
Shopify Buy Button
Setup time 30 to 60 minutes
Technical skill Low, no code required
Customization Limited, Shopify controls cart UI
Products Works best for small catalogs
Checkout Shopify-hosted, trusted
Inventory sync Automatic
Cost Shopify Starter at $5/month minimum
--- ## Option 2: Headless Shopify via Storefront API Your client runs a fashion brand. They have 200 products with size and color variants. They want the browsing experience fully branded, not a widget from another platform. This is headless territory. Instead of embedding a widget, you connect Framer's CMS to Shopify's Storefront API. Product data, titles, descriptions, images, prices, and variants sync into Framer CMS collections. You design the entire storefront in Framer. Checkout redirects to Shopify's hosted checkout. This is what the dedicated framer commerce plugins (covered next) are built on top of. **What it enables:** - Full product catalog pages designed entirely in Framer - Real-time inventory and price display - Product filtering and search across the catalog - A cart experience that matches your brand design - Variant selection (size, color) within your Framer UI **What it requires:** - A Shopify store with Storefront API access enabled - A Shopify Basic plan or above - Either a dedicated plugin or custom development work **Best for**: Mid-size stores (20 to 500 products), brand-forward e-commerce sites, clients who already use Shopify and want a custom Framer frontend. The Shopify Storefront API documentation is the reference for custom builds: [shopify.dev/docs/api/storefront](https://shopify.dev/docs/api/storefront) --- ## Option 3: Dedicated framer commerce plugins You need a Shopify-connected Framer store but you're not building headless from scratch. Two third-party plugins handle the Shopify connection with pre-built components. FramerHub does not make a Shopify or general e-commerce plugin. What's covered here are other people's tools, described honestly. ### Framer Commerce (framercommerce.com) Framer Commerce is the most established framer shopify plugin in the ecosystem. It provides drag-and-drop components, product grids, carts, and checkout flows, all built on the Shopify Storefront API. **What it provides:** - Pre-built product display components - Cart and checkout powered by Shopify - Designed to work inside Framer's visual editor Honest assessment: It's a solid starting point for Shopify-connected Framer stores. The component set covers the core catalog-to-checkout flow. How far you can push customization depends on your specific design requirements. ### Frameship (frameship.io) Frameship is another third-party option for Framer plus Shopify. Positioned similarly to Framer Commerce with a component-based approach. **What it provides:** - Shopify product sync - Pre-built UI components - Cart and checkout handling **Plugin comparison**
Framer Commerce Frameship
Backend Shopify Shopify
Approach Component library Component library
Setup Moderate Moderate
Catalog depth Good Good
Pricing One-time / plan One-time / plan
### Where FramerHub fits FramerHub does not sell a Shopify plugin. Where it does help: once your products are in a Framer CMS collection, the [CMS Filter plugin](/plugins/framer-cms-filter) lets shoppers filter that catalog by price, category, size, and more. Trusted by 1,500+ Framer professionals. That covers product discovery, not checkout. For the Shopify connection itself, use one of the two plugins above. --- ## Option 4: Digital products (Gumroad, Lemon Squeezy, Polar) You're selling a Framer template pack, a design course, or an ebook. A full Shopify setup is overkill. Embed-based solutions are faster, cheaper, and built for digital goods. These are the three most common options for digital product sales on Framer. ### Gumroad Gumroad is the simplest option for digital sales. Create a product, get an embed code or overlay link, add it to Framer. **How it works in Framer**: Link any button to a Gumroad product URL. It opens Gumroad checkout in an overlay. Payment, file delivery, and license keys are handled by Gumroad. **Best for**: Creators and designers selling 1 to 10 products. No monthly fee. Gumroad takes a percentage of each sale. ### Lemon Squeezy Lemon Squeezy handles EU VAT compliance automatically. That's a real advantage when selling digital products internationally. Embed a checkout button or use overlay mode. **Best for**: Software tools, SaaS products, digital goods with international buyers. Tax complexity is handled for you. ### Polar Polar is built for digital product sellers and open-source creators. It handles payments, license keys, and subscriptions. Embed options work cleanly in Framer via custom code components. FramerHub uses Polar for its own product sales. The payment flow integrates well with Framer site designs. **Best for**: Developers and creators selling tools, plugins, or subscription products. **Digital product embed comparison**
Gumroad Lemon Squeezy Polar
Setup time 15 minutes 20 minutes 20 minutes
EU VAT handling Basic Automatic Automatic
Subscriptions Yes Yes Yes
License keys Yes Yes Yes
Monthly fee None, % of sales None, % of sales None, % of sales
Best for Creators Software / SaaS Open-source / tools
--- ## Option 5: Stripe payment links You're a freelancer. A client wants to pay a project deposit through your Framer site. You don't need a cart, a catalog, or a checkout flow. You need a button that takes payment. Stripe payment links are the right tool here. **How it works**: Create a payment link in Stripe Dashboard. Link any Framer button to that URL. The customer clicks, pays on a Stripe-hosted page, and receives a confirmation. You see the payment in your Stripe dashboard. **What it doesn't do**: Cart, multiple products, inventory tracking, or order management. **Best for**: Freelancers selling single services, agencies taking project deposits, event ticket sales, or any one-product scenario. No code, no plugin, no monthly fee beyond Stripe's standard processing rate. For simple use cases, this is the fastest path to accepting payment on a Framer site. --- ## All framer ecommerce options compared
Method Setup difficulty Best catalog size Checkout Monthly cost Best use case
Shopify Buy Button Low 1 to 20 products Shopify hosted $5+ (Shopify) Small physical product stores
Headless Shopify High, custom work Unlimited Shopify hosted $29+ (Shopify) Large branded storefronts
Framer Commerce / Frameship Medium 20 to 500 products Shopify hosted Plugin cost + Shopify Full store, pre-built components
Gumroad Very low 1 to 50 digital Gumroad hosted None Digital products, creators
Lemon Squeezy Very low 1 to 50 digital LS hosted None SaaS, international digital
Polar Very low 1 to 20 digital Polar hosted None Tools, subscriptions
Stripe payment links Very low 1 product Stripe hosted None Single payments, services
--- ## When to use Framer for e-commerce, and when not to Framer e-commerce works well in specific situations. Being clear about this upfront saves you client friction later. **Use Framer for e-commerce when:** - Brand experience matters more than catalog depth, fashion, design goods, creative services - You're selling digital products where embeds are sufficient - The store has fewer than 50 products with limited variants - The client already uses Framer and wants to add selling without a platform switch - You need animations and interactions that standard e-commerce platforms can't deliver **Consider a different platform when:** - The store has hundreds of products with complex variants, inventory rules, and fulfillment logic - B2B features are required: net terms, customer account pricing, or purchase orders - The client needs a native mobile app tied to the store backend - Advanced SEO is critical and product pages need server-rendered HTML at scale - E-commerce is the primary business, not a secondary revenue stream on a brand site For clients where e-commerce is the core business and design flexibility is secondary, platforms like Shopify or [WordPress with WooCommerce](/blog/framer-vs-wordpress) are the more practical recommendation. Pointing clients toward the right tool, even when it's not Framer, builds more trust than forcing a stack that doesn't fit. --- ## Product filtering for Framer stores You have 60 products in your Framer CMS. Shoppers need to filter by category, price range, and size. Framer's native dynamic filtering handles basic single-field cases. For multi-field filtering, price range sliders, real-time search, and filter combinations, you need more. The [Framer CMS complete guide](/blog/framer-cms-complete-guide) covers how CMS collections work. That's the foundation for product display in any Framer store. For advanced product filtering, price ranges, multi-select attributes, and real-time search across multiple fields, the [CMS Filter plugin](/plugins/framer-cms-filter) handles exactly that. The same patterns used for real estate listings and job boards apply directly to product catalogs. Browse the full [FramerHub plugin library](/plugins) to see what's available. --- ## Frequently asked questions **Does Framer have native e-commerce?** No. As of 2026, Framer has no built-in cart, checkout, or payment processing. Every framer ecommerce implementation uses a third-party solution: Shopify (buy buttons or headless), digital product platforms (Gumroad, Polar, Lemon Squeezy), or Stripe payment links. **What is the easiest way to add e-commerce to Framer?** For physical products: embed a Shopify Buy Button. For digital products: embed a Gumroad or Polar checkout link. Both take under 30 minutes and require no custom development. **Can I connect Framer to Shopify?** Yes. Two paths: Shopify Buy Button (embed a product widget, simple setup) or headless Shopify via Storefront API (full catalog integration, more setup). Third-party plugins like Framer Commerce and Frameship handle the headless connection with pre-built components. **Should I use Framer for a serious online store?** For brand-forward stores with up to around 50 products, digital product shops, or stores where design quality is the differentiator, yes. For stores where e-commerce is the core business with complex inventory, fulfillment, and scaling needs, a dedicated platform is more practical. **What is Framer Commerce?** Framer Commerce (framercommerce.com) is a third-party plugin that connects Framer to Shopify via the Storefront API. It provides pre-built product grid, cart, and checkout components designed to work inside Framer. --- ## Where to start The right framer ecommerce setup depends on what you're selling and how much complexity you need. **Selling physical products, small catalog**: Start with the Shopify Buy Button. Set up in under an hour, no risk, proven checkout. **Selling digital products**: Gumroad or Polar. Embed the checkout in your Framer site in 20 minutes. Both handle licensing, delivery, and payments. **Need a full Shopify-connected storefront**: Look at Framer Commerce or Frameship. Once products are in your Framer CMS, add [CMS Filter](/plugins/framer-cms-filter) so shoppers can narrow the catalog by price, type, and size. **Single service or one-time payment**: Stripe payment link. No setup beyond creating the link in your Stripe dashboard. Framer's design advantage is real. The e-commerce layer just needs to come from the right source for your project. If you're building product-display pages in Framer's CMS and need filtering, the [Framer CMS complete guide](/blog/framer-cms-complete-guide) is the next read.