Framer is one of the most powerful website builders available, giving you complete design freedom that platforms like Squarespace or Wix simply can't match. But what if you want to sell products on your Framer site?

Until recently, adding ecommerce functionality to Framer was complicated. You either needed to redirect visitors to an external store or write custom code. Now, with dedicated plugins, you can have a fully functional online store in minutes.

In this guide, we'll show you exactly how to add ecommerce to any Framer website—no coding required.

Why Add Ecommerce to Framer?

Before we dive into the how, let's talk about why Framer is actually a great choice for ecommerce:

Complete design control — Unlike Shopify or WooCommerce, Framer lets you design every pixel. Your store can look exactly how you envision it.

No platform fees — You're not paying Shopify's monthly fee on top of your ecommerce plugin.

Seamless brand experience — Your store lives on the same site as your marketing pages. No jarring transitions to a separate checkout domain.

Fast performance — Framer sites are optimized for speed, which improves both user experience and SEO.

The Easiest Way: Use an Ecommerce Plugin

The simplest approach is using a dedicated ecommerce plugin. Here's how to do it with FramerFlo:

Step 1: Install the Plugin

Open your Framer project and click the Plugins icon in the toolbar (it looks like a puzzle piece). Search for "FramerFlo" and click Install.

Step 2: Create Your Account

Head to app.framerflo.com and sign up for a free account. You'll get a 30-day free trial to test everything out.

Step 3: Add Your Products

In your FramerFlo dashboard, navigate to Products and click "Add Product." Fill in the details:

• Product name

• Description

• Price

• Images (multiple angles recommended)

• Inventory quantity (optional)

Repeat this for all the products you want to sell.

Step 4: Connect a Payment Processor

You'll need a way to accept payments. FramerFlo supports three options:

Stripe — The most popular choice. Works in 40+ countries with competitive rates (typically 2.9% + $0.30 per transaction).

PayPal — Great for international customers who prefer PayPal's buyer protection.

Square — Perfect if you also sell in-person and want unified reporting.

Go to Settings, then Payment Processors, and follow the prompts to connect your preferred option.

Step 5: Add Components to Your Framer Site

Now for the fun part. In Framer, you'll find FramerFlo components in your plugin assets. Drag and drop these onto your canvas:

Product Grid — Displays all your products in a customizable grid layout.

Product Card — Feature a single product anywhere on your site.

Cart Icon — Shows item count and opens the cart drawer. Place this in your navigation.

Checkout Button — Triggers the secure checkout flow.

Style these components to match your brand using Framer's design tools.

Step 6: Publish and Start Selling

Hit publish in Framer, and you're live. Customers can now browse products, add them to cart, and check out—all without leaving your site.

Alternative Methods

Shopify Integration

If you already have a Shopify store, plugins like Framer Commerce let you connect it to your Framer site. The downside is you're paying for both Shopify ($29+/month) and managing two platforms.

Manual Integration

For developers comfortable with code, you can build custom checkout flows using Stripe's API and Framer's code components. This gives you maximum flexibility but requires significant development time.

For most people, a dedicated plugin is the fastest path to selling.

Tips for Your Framer Store

Invest in product photography. Good images sell products. Use natural lighting, clean backgrounds, and show multiple angles.

Write detailed descriptions. Don't just list features—explain benefits. Help customers understand why they need your product.

Keep checkout simple. Every extra step loses customers. Enable guest checkout so people don't have to create accounts.

Test on mobile. Over 60% of ecommerce traffic is mobile. Make sure your store works flawlessly on phones.

Common Questions

How much does this cost?
FramerFlo is $20/month after the free trial. You'll also pay standard payment processing fees (around 2.9% + $0.30 per transaction with Stripe).

Can I sell digital products?
Yes. FramerFlo supports both physical and digital products. For digital items, customers receive download links after purchase.

Do I need coding skills?
No. Everything is drag-and-drop. If you can use Framer, you can set up FramerFlo.

What about taxes and shipping?
FramerFlo handles tax calculations automatically. You can configure shipping rates and free shipping thresholds in your dashboard.

Conclusion

Adding ecommerce to your Framer website doesn't have to be complicated. With the right plugin, you can go from zero to selling in under an hour.

The combination of Framer's design flexibility and proper ecommerce functionality means you can build a store that's both beautiful and functional—without the constraints of traditional ecommerce platforms.

Ready to start? Try FramerFlo free for 30 days and see how easy it is.