How to build an online store in Framer
A step-by-step guide to building a real Framer online store: products, product pages, a cart and checkout, in about an hour and without code.
by FrameStoreKit team
Short answer: Framer has no built-in cart or checkout, so you pair it with Shopify. Add your products in Shopify, install the FrameStoreKit plugin in Framer, connect the store, sync products into Framer CMS, then design your pages (or remix a template) with product, cart and checkout components. Shopify handles payment, tax and shipping.
Can you sell products on Framer?
Yes, but not on Framer alone. Framer builds the website; it has no product catalog, cart or checkout of its own. For a couple of digital products a payment link can be enough. For a real store with variants, stock, a cart and order management, you connect a commerce platform. Shopify is the most common choice, and it’s what this guide uses. For the other options, see Framer ecommerce: how to sell on a Framer site.
Shopify or WooCommerce?
Use the platform the business already runs on. This guide uses Shopify: hosted, nothing to maintain, and the usual pick for a new store. If the client already sells on WooCommerce, keep it: FrameWoo, our Framer WooCommerce plugin, connects a WooCommerce store to Framer.
What you need
- A Shopify store on any plan, with your products added. Shopify runs payments, tax, shipping and orders.
- A Framer project. A site plan lets you publish on your own domain.
- The FrameStoreKit plugin from the Framer Marketplace. Free covers up to 15 products; Pro ($99/year per store) removes the limit and adds the cart drawer, upsells, product options and customer accounts.
Build your Framer online store in 7 steps
1. Add your products in Shopify
Create the products, variants, prices and stock in your Shopify admin. Shopify stays the source of truth for the catalog, orders and payments, so this is where you manage the business.
2. Install FrameStoreKit and connect the store
Open the FrameStoreKit plugin in your Framer project and follow the onboarding wizard. It checks every setting and tells you exactly what’s missing. This takes about 5 minutes.
3. Sync your products into Framer CMS
Click Sync. Products, variants, images and collections land in Framer CMS collections, ready to bind to pages and lists like any other CMS content. Prices and stock stay live from Shopify.
4. Start from a template or your own design
Start with the $49 Cossaire template for an editorial storefront, or keep the site you already designed and add the store to it.
5. Design product and collection pages
Use a CMS detail page for products and drop in Product Gallery, Variant Selector, Product Price and Add To Cart. Style every component from Framer’s right panel: fonts, colors, spacing and states.
6. Add the cart, checkout and upsells
Add a Cart Drawer or Cart Page, a Cart Badge in the nav and a Checkout Button. On Pro, add quantity breaks, BOGO, product options with paid add-ons, frequently bought together or a free-shipping bar, on native Shopify discounts.
7. Publish and place a test order
Publish the site, add a product to the cart and complete a test order on Shopify’s checkout. Then connect your domain and you’re live.
The pages every Framer store needs
| Page | What it shows | Components |
|---|---|---|
| Home | Featured products and collections | Product Card, Shopify Collection |
| Collection | Products in a category, with filters on Pro | Shopify Collection, Facets, Sort, Pagination |
| Product | Photos, variants, price and add to cart | Product Gallery, Variant Selector, Product Price, Add To Cart |
| Cart | Line items, discounts and total | Cart Drawer or Cart Page, Discount Code Input, Checkout Button |
| Account (Pro) | Sign-in, orders and wishlist | Login Button, Account View, Order History |
How long it takes and what it costs
Connecting a store that already has products takes about 5 minutes and the sync is one click. Remixing a template and publishing takes about 5 more minutes; designing your own product and collection pages takes about 30. You pay for your own Shopify plan and Framer plan. FrameStoreKit is free for up to 15 products, $99 a year per store on Pro, or $249 once for Lifetime. See pricing.
Launch checklist
- A test order went through Shopify’s checkout
- Every product page shows the right price, variants and stock
- Shipping zones and taxes are set in Shopify
- The cart badge and cart work on mobile
- Your custom domain is connected in Framer
- Analytics and the consent banner are on, if you sell in regions that need it
What to know before you start
- Automatic sync: sync is one click, whenever you want
- One-click upsells after payment (Shopify limits them to theme stores)
- Run Shopify theme apps on your Framer site
- Bundles as one cart line (coming soon, via Shopify’s Bundles app)
- Customer file uploads on product options (planned)
- Several projects on one license (that’s the Enterprise plan)
- Shop Pay wallet on the Framer canvas preview (works on the published site)
The full list is in what FrameStoreKit can and can’t do. For the technical setup of the connection itself, see the Framer Shopify integration guide.