How to Create an Online Store in Framer: Step-by-Step Tutorial

Nov 19, 2025

Want to build an online store with Framer? This step-by-step tutorial walks you through the entire process—from empty canvas to accepting your first order.

No coding required. If you can use Framer, you can build a store.

What You'll Build

By the end of this tutorial, you'll have:

  • A product catalog displaying your items

  • Individual product pages

  • A working shopping cart

  • Secure checkout

  • Order management dashboard

Let's get started.

Prerequisites

Before beginning, make sure you have:

  • A Framer account (free tier works to start)

  • Products to sell (even just 2-3 to start)

  • Product photos

  • A payment processor account (Stripe, PayPal, or Square)

Step 1: Set Up Your Framer Project

If you're adding a store to an existing site, skip to Step 2.

For a new project:

  1. Log into Framer

  2. Click "New Project"

  3. Choose blank or start from a template

Set up your basic site structure:

  • Homepage

  • About page

  • Contact page

  • Shop page (we'll build this)

Step 2: Install FramerFlo

In your Framer project:

  1. Click the Plugins icon (puzzle piece in the toolbar)

  2. Search "FramerFlo"

  3. Click Install

The FramerFlo components now appear in your assets panel.

Step 3: Create Your FramerFlo Account

Open a new tab and go to app.framerflo.com:

  1. Click Sign Up

  2. Enter your email and create a password

  3. Verify your email

  4. You're in—with a 30-day free trial

Step 4: Connect Your Payment Processor

Before adding products, set up payments:

  1. In FramerFlo dashboard, go to Settings

  2. Click Payment Processors

  3. Choose your processor (Stripe recommended for most)

  4. Follow the connection prompts

  5. Complete any verification required

This ensures you can actually accept money when customers buy.

Step 5: Add Your Products

Now let's add what you're selling:

  1. Go to Products in your FramerFlo dashboard

  2. Click "Add Product"

  3. Fill in the details:

Title: Clear, searchable product name
Example: "Minimalist Desk Lamp - Matte Black"

Description: Sell the benefits, include key details
Example: "Illuminate your workspace with clean, modern design. This adjustable desk lamp provides warm, flicker-free light perfect for focused work. Matte black finish complements any desk setup. Includes LED bulb. 18 inches tall, adjustable arm."

Price: Your selling price

Images: Upload high-quality photos

  • Main product shot

  • Different angles

  • Detail shots

  • Lifestyle/context image

Inventory: Set stock quantity (or leave unlimited for digital products)

  1. Click Save

  2. Repeat for remaining products

Start with at least 3-5 products. You can always add more later.

Step 6: Design Your Shop Page

Back in Framer, let's build the shop page:

  1. Create a new page called "Shop" (or "Store" or "Products")

  2. From FramerFlo components, drag "Product Grid" onto the canvas

  3. The grid automatically displays your products

Customize the grid:

  • Adjust columns (3-4 works well for desktop)

  • Set spacing between products

  • Style the product cards (fonts, colors)

  • Configure responsive behavior for mobile

Add a header:

  • Page title: "Shop" or "Our Products"

  • Optional: category filters or search

Step 7: Create Product Detail Pages

When customers click a product, they need somewhere to go:

Option A: Use FramerFlo's built-in product pages
FramerFlo can handle product pages automatically. Check your plugin settings.

Option B: Create a custom product page template

  1. Create a new page

  2. Add product detail components:

    • Large product image(s)

    • Product title

    • Price

    • Description

    • Add to Cart button

  3. Connect components to FramerFlo

For most stores, Option A is faster. Use Option B if you want highly custom product pages.

Step 8: Add Cart Functionality

Customers need to access their cart:

  1. Drag the "Cart Icon" component into your navigation

  2. Style it to match your nav design

  3. This shows item count and opens the cart drawer

The cart drawer (slide-out panel) is included automatically. Customers can:

  • View added items

  • Adjust quantities

  • Remove items

  • Proceed to checkout

Step 9: Configure Store Settings

In your FramerFlo dashboard, configure:

Shipping:

  • Set shipping rates by region

  • Add free shipping threshold (optional but recommended)

  • Configure international shipping if applicable

Taxes:

  • Enable automatic tax calculation

  • Set tax-inclusive pricing if preferred

Checkout:

  • Customize checkout appearance

  • Enable guest checkout (recommended)

  • Set up order confirmation emails

Step 10: Test Everything

Before announcing your store, test the entire flow:

  1. Browse to your shop page

  2. Click a product

  3. Add it to cart

  4. Open the cart

  5. Proceed to checkout

  6. Complete a test purchase (use Stripe test mode or a small real transaction you'll refund)

  7. Verify the order appears in your dashboard

  8. Check that confirmation email arrives

Test on mobile too. The majority of shoppers use phones.

Step 11: Launch Your Store

Everything working? Time to go live:

  1. Review all product information for accuracy

  2. Double-check prices

  3. Ensure payment processor is in live mode (not test mode)

  4. Publish your Framer site

Your store is live.

Post-Launch Checklist

After launching:

  • Place a real test order and verify fulfillment process

  • Set up Google Analytics to track traffic

  • Submit your sitemap to Google Search Console

  • Announce on social media

  • Email your existing audience

  • Monitor orders and customer questions

Tips for Your First Week

Watch for issues. Monitor closely for any problems with checkout, emails, or order processing.

Respond quickly. If customers reach out with questions, fast responses build trust.

Don't panic if sales are slow. New stores take time to gain traction. Focus on driving traffic and refining your offering.

Gather feedback. Ask early customers about their experience. Their insights are valuable.

Growing Your Store

Once your store is running smoothly:

Add more products — Expand your catalog based on what sells

Create content — Blog posts and guides attract organic traffic

Collect reviews — Social proof increases conversions

Optimize pages — Test different layouts, copy, and images

Email marketing — Build a list and nurture customer relationships

Conclusion

You now have a fully functional online store built on Framer. You control the design, the products, and the customer experience.

The hardest part is starting. With your store live, you can iterate and improve based on real customer behavior.

‹ Framer vs Shopify: Which Platform Should You Choose?