How to Add an Ecommerce Store to Your Framer Website

Adding ecommerce functionality to a Framer website traditionally meant choosing between Shopify integrations with their monthly fees or accepting limited product catalogs. The Good Commerce plugin paired with a headless commerce backend, changes this equation entirely, enabling designers to build pixel-perfect storefronts with full commerce capabilities, including subscriptions, wholesale pricing, and unlimited products, without sacrificing design control. This combination provides complete design control, helping create better customer experiences while keeping costs predictable with a $89 one-time plugin fee plus scalable platform pricing.

Key Takeaways

• The Good Commerce plugin costs $89 one-time, compared to $144 to $480 annually for competing Shopify-based solutions.
• Complete design freedom using Framer's visual editor is paired with enterprise-grade commerce infrastructure.
• Native subscription billing and unlimited products are included, versus 25 to 100 product caps on lower-tier alternatives.
• International selling supports 230 currencies and 170 languages, plus built-in B2B wholesale capabilities.
• The platform offers a 100% uptime SLA on its Unlimited plan, with custom SLA terms available on Enterprise.
• Swell applies revenue-based fees above plan thresholds rather than flat per-transaction fees on every external gateway payment, which compares favorably with platforms that charge percentage-based transaction fees.
• Setup involves installing the plugin, entering your Swell Store ID and Public API key, and syncing products. Timing varies by catalog size and design complexity.

Why Choose a Headless Ecommerce Builder for Your Framer Site?

Understanding Headless Architecture

Traditional ecommerce platforms bundle the storefront design with the commerce engine, forcing you into their templates and customization limits. Headless architecture separates these concerns. Framer handles your frontend design while an API-first backend like Swell manages products, payments, orders, and fulfillment independently.

This separation creates tangible advantages:

• Complete design freedom using Framer's visual editor without code constraints
• Framework flexibility to build with React, Vue, Next.js, or any JavaScript framework
• Independent scaling where frontend and backend evolve separately
• Future-proofing that allows technology changes without full rebuilds

Benefits for Framer Users

Framer excels at creating visually striking websites with sophisticated animations and interactions. Adding ecommerce through headless commerce preserves these capabilities while unlocking serious selling power:

• No template compromises that dilute your brand identity
• Real-time product data syncing directly to your Framer CMS
• Component-based building with drag-and-drop commerce elements
• Mobile-first design with full responsive control

The Good Commerce plugin bridges Framer's design interface with Swell's commerce engine, handling the API integration so you focus on creating exceptional customer experiences rather than wrestling with code.

Getting Started: Setting Up Your Swell Account

Choosing Your Swell Plan

Swell offers tiered pricing that scales with your business. Plans range from entry-level options for new stores validating their market, through mid-tier plans with multi-currency pricing and priority support, up to an Unlimited plan with a 100% uptime SLA and developer support, and a Custom Enterprise tier for high-volume merchants. For new stores, the entry-level plan provides sufficient capacity. All plans include unlimited products, native subscriptions, and the full API access needed for Framer integration.

Initial Store Settings

After creating your Swell account, configure essential settings before connecting to Framer:

1. Store details: Set your business name, default currency, and time zone
2. Payment gateway: Connect Stripe, PayPal, or your preferred processor
3. Shipping zones: Define regions and rate structures
4. Tax configuration: Enable automatic tax calculation or connect Avalara or TaxJar integrations
5. Notification emails: Customize order confirmations and shipping updates

First Product Creation

Navigate to Products in your Swell dashboard and create your first product:

• Add product name, description, and pricing
• Upload high-quality images (recommended: under 5MB each)
• Configure variants like size, color, or material
• Set inventory levels and SKUs
• Mark the product as "Active" to enable syncing

Products must have an active status before they appear in your Framer storefront. Draft products will not sync through The Good Commerce plugin.

Designing Your Ecommerce Website with Framer and Swell's Frontend API

Connecting Framer to Swell's Data

The Good Commerce plugin handles API authentication automatically. The connection process takes under five minutes:

1. Install the plugin: Open your Framer project, click the Plugins icon, search "The Good Commerce," and install
2. Get Swell credentials: In your Swell dashboard, navigate to Settings, then API, and copy your Store ID and Public API Key
3. Connect your store: In the plugin panel, paste both credentials and click Connect
4. Wait for sync: Initial product sync takes 5 to 10 minutes for larger catalogs

Once connected, your Swell products automatically populate in Framer's CMS, ready for display in your designs.

Building Product Pages

The Good Commerce provides pre-built components that you customize to match your brand:

• Product Grid: Displays all products with filtering options
• Product Card: Individual product display with image, title, price
• Variant Selector: Size, color, and option pickers
• Add to Cart Button: Triggers cart functionality
• Cart Icon: Shows item count in navigation

Drag these components onto your Framer canvas, then style using Framer's visual editor. Adjust colors, typography, spacing, and animations without touching code.

Implementing a Shopping Cart

Cart functionality works out of the box with The Good Commerce components. The plugin manages cart state, product quantities, and checkout triggers automatically.

For custom cart experiences:

• Position the Cart Icon component in your navigation
• Add a Cart Drawer or Cart Page component for full cart views
• Connect the Checkout Button to trigger Swell's hosted checkout
• Test the complete flow in Framer's preview mode before publishing

Managing Products and Inventory for Your Online Store

Adding Products to Swell

Swell supports diverse product types that sync seamlessly to Framer:

• Physical products with shipping requirements and inventory tracking
• Digital downloads delivered automatically after purchase
• Services without inventory constraints
• Bundles combining multiple products with individual inventory
• Gift cards for customer gifting

Unlike platforms capping at 100 variants, Swell provides unlimited product options and variants, which is critical for businesses with extensive size, color, or customization combinations.

Configuring Product Options

Product options in Swell translate directly to your Framer storefront:

1. Create option types (Size, Color, Material)
2. Add option values (Small, Medium, Large)
3. Set variant-specific pricing if needed
4. Assign inventory per variant
5. Upload variant-specific images

The Good Commerce renders these options as interactive selectors, updating prices and images dynamically as customers make selections.

Bulk Product Management

For stores with extensive catalogs, Swell supports CSV import/export:

• Export your product template from Swell
• Populate with product data in spreadsheet software
• Import back to Swell for bulk creation
• Products sync to Framer automatically

This workflow handles hundreds of products efficiently, avoiding tedious manual entry for large inventories.

Implementing Secure Checkout and Payments with Swell

Setting Up Payment Gateways

Swell integrates with major payment gateways, including Stripe, PayPal, Braintree, Amazon Pay, Klarna, and Affirm. Setup requirements vary by provider. Some use OAuth connections, others require gateway credentials, and Affirm is currently limited to custom checkouts per Swell's documentation.

Swell applies revenue-based fees above plan thresholds rather than a flat percentage on every transaction processed through an external gateway, which compares favorably with platforms that charge per-transaction fees on top of gateway costs.

Customizing Your Checkout Experience

Swell offers two checkout approaches:

Hosted Checkout: PCI-compliant checkout page managed by Swell. Fastest to implement. The Good Commerce connects directly without additional configuration.

Custom Checkout: Build entirely custom checkout flows using Swell's Checkout API for complete control over the customer experience.

For most Framer stores, hosted checkout provides the ideal balance of customization and compliance. Swell's checkout supports guest purchases and saved payment methods. Abandoned cart recovery emails can be enabled and customized in the dashboard.

Abandoned Cart Strategies

Configure automated recovery sequences in Swell:

• Set timing for reminder emails (1 hour, 24 hours, 72 hours)
• Customize email templates with your branding
• Include direct cart recovery links
• Optionally add discount incentives for completion

These automations recover lost sales without requiring third-party email tools.

Powering Subscriptions and Recurring Revenue on Your Framer Store

Creating Subscription Plans

Swell's native subscription engine eliminates third-party app dependencies. Create subscription products directly in your dashboard:

• Define billing intervals (weekly, monthly, quarterly, annually)
• Set separate fulfillment schedules if needed (bill monthly, ship quarterly)
• Configure trial periods for customer acquisition
• Enable mixed carts combining subscriptions with one-time purchases

You can create subscription plans with flexible pricing, including fixed amounts, percentage discounts, or tiered pricing based on commitment length.

Managing Customer Subscriptions

Subscribers access self-service management through their account portal:

• Pause and resume subscriptions
• Upgrade or downgrade plans with prorated billing
• Update payment methods
• View upcoming renewal dates

This self-service capability reduces support burden while improving customer satisfaction.

Optimizing for Retention

Swell includes built-in retention tools:

• Automatic payment retry: Configurable retry logic for failed payments
• Dunning management: Escalating notifications before cancellation
• Card expiration alerts: Proactive reminders before cards expire
• Win-back campaigns: Target churned subscribers with re-engagement offers

These features integrate natively, with no additional apps or monthly fees required.

Advanced Features: Enhancing Your Framer Ecommerce Website

International Selling with Swell

Swell supports displaying prices in 230 currencies and localizing content in 170 languages, with the ability to transact in multiple currencies dependent on your payment gateway. The platform offers:

• Fixed prices in each currency for price optimization
• Automatic exchange rate conversions for hands-off management
• Currency-specific shipping rates
• Localized discount rules

Multi-language support localizes all customer-facing content, including products, categories, checkout, and emails, through the dashboard or API.

Building a Multi-Vendor Marketplace

For marketplace models, Swell provides:

• Multi-vendor product management
• Split payment functionality directing revenue to vendors
• Vendor-specific shipping rules
• Consolidated customer checkout across vendors

This capability serves businesses like coffee subscription services, connecting customers with multiple roasters through a single storefront.

Leveraging Custom Data Models

Swell's API-first architecture allows custom data models beyond standard ecommerce fields:

• Add custom fields to products, orders, and customers
• Create entirely new data models for business-specific needs
• Access all data through a unified Backend API
• Trigger webhooks for real-time event notifications

Developers can extend functionality through Swell's developer tools without platform limitations.

Scaling Your Ecommerce Operations with Swell and Framer

Monitoring Performance and Analytics

Track store performance through Swell's reporting dashboard:

• Sales reports with revenue trends and product performance
• Customer reports showing acquisition and retention metrics
• Financial reports for accounting reconciliation
• Real-time inventory alerts

Integrate Google Analytics and Meta Pixel through Framer's custom code capabilities for comprehensive traffic analysis.

Planning for Growth: Swell's Plans

As your store scales, higher-tier plans unlock additional capabilities, including international price lists, advanced reporting, role-based permissions, developer support, and a 100% uptime SLA. Swell's architecture eliminates re-platforming. The same infrastructure supporting small stores handles enterprise-level traffic and complexity.

Accessing Developer Resources

When customization needs exceed plugin capabilities:

• Review Swell's developer documentation for API reference
• Access the developer console for testing API calls
• Use webhooks for custom integrations with external services
• Build Swell Apps for full-stack extensions

The platform's API-first design means anything visible in Swell's dashboard can be customized or automated through code.

Why Swell Powers the Best Framer Ecommerce Stores

Pairing Framer with Swell through The Good Commerce plugin creates a powerful stack for design-forward brands. Swell stands out as the backend of choice for several compelling reasons.

Native subscriptions without app fees: While competing platforms require third-party subscription apps with additional monthly fees, Swell includes complete subscription management, including billing, dunning, and customer self-service, in every plan.

Unlimited product modeling: Swell removes the 3-option, 100-variant limitations that constrain some competing stores. Businesses with extensive customization options or large catalogs operate without artificial ceilings.

Competitive fee structure on external gateways: Swell applies revenue-based fees above plan thresholds rather than a flat percentage on every transaction through an external gateway. This structure compares favorably with platforms that layer per-transaction fees on top of processor costs.

True API-first architecture: Every feature in Swell's dashboard uses the same Backend API available to developers. This ensures anything you see can be customized, automated, or extended.

B2B and wholesale capabilities built-in: Customer-group-based pricing, net payment terms, and volume discounts work natively, eliminating the app complexity that burdens wholesale operations on other platforms.

For Framer users seeking complete design control with enterprise-grade commerce capabilities, Swell delivers the infrastructure to launch quickly and scale confidently.

Frequently Asked Questions

What is headless commerce and why is it beneficial for my Framer website?

Headless commerce separates your storefront (frontend) from your commerce engine (backend), connecting them through APIs. For Framer websites, this means designing with complete creative freedom while a platform like Swell handles products, payments, orders, and fulfillment behind the scenes. You avoid template constraints, maintain full responsive control, and can rebuild your frontend without migrating your entire commerce operation.

Can I use my existing Shopify theme on Swell for my Framer store?

Swell supports uploading and customizing Shopify themes within its hosted storefront environment, providing a migration path for merchants moving from Shopify. However, for Framer integration through The Good Commerce plugin, you will design your storefront directly in Framer rather than using a Shopify theme. This gives you far more design flexibility than any template-based approach.

How does Swell handle transaction fees on external payment gateways?

Swell applies revenue-based fees above plan thresholds rather than charging a flat percentage on every transaction processed through an external gateway like Stripe or PayPal. You pay your payment processor's standard rates, and Swell's fee structure remains competitive compared to platforms that add per-transaction fees on top of processor costs.

How does Swell handle subscriptions and recurring payments?

Swell includes a native subscription engine in its core platform, with no third-party apps required. You can create subscription products with flexible billing intervals, support mixed carts with subscription and one-time products, configure automatic payment retry and dunning rules, and enable customer self-service for pausing or modifying subscriptions. This eliminates the additional monthly fees typically charged by third-party subscription apps.

What support options are available when using Swell?

Support varies by plan, with email and chat support on all plans, priority support starting at the Standard tier, and dedicated developer support on Unlimited and Enterprise plans. The platform also provides comprehensive developer documentation, a help center with product guides, and integration setup instructions for self-service troubleshooting.