--- title: "How to Build an Online Store in Framer (2026 Guide)" canonical_url: "https://framestorekit.com/how-to-build-an-online-store-in-framer" last_updated: "2026-10-21T15:06:28.986Z" meta: description: "Build a Framer online store step by step: add products in Shopify, connect with FrameStoreKit, sync to Framer CMS, design pages and add a cart and checkout." "og:description": "Build a Framer online store step by step: add products in Shopify, connect with FrameStoreKit, sync to Framer CMS, design pages and add a cart and checkout." "og:title": "How to Build an Online Store in Framer (2026 Guide)" --- FrameStoreKit home # **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 teamUpdated October 10, 2026 [![Cossaire storefront preview with the Italian Light collection and editorial fashion photography](https://framestorekit.com/img/templates/cossaire-preview.jpg)Preview Cossaire (opens in a new tab)](https://cossaire.framer.website/) ![Linen Overshirt](https://framestorekit.com/img/fsk/products/linen-overshirt-card-md.webp) **Linen Overshirt** Sand · Organic linen **$68.00** ~~$85.00~~ **XS****S****M****L****XL** **Add to cart ** **Your cart · 2** **Linen Overshirt** M · Qty 2 **$136** **You're $14 away from free shipping** **Checkout · $136.00** ****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](https://framestorekit.com/framer-ecommerce). ## 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](https://framewoo.com), 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. **Connect Shopify** **Store domain**linen-and-co.myshopify.com **Storefront API token**••••••••••••••••••••a91f **Connected · all required scopes on ** ### 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. **Products** **Synced 2 min ago ** **Linen Overshirt**$68.00 **Wool Beanie**$32.00 **Canvas Tote**$45.00 **Merino Crew**$94.00 ### 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. **Knitwear**### 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.**ShopifyProductCard****Title font**Heading / H3**Button**#141A17**Radius**12**Hover border**#4DC67F ### 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.**Your cart · 2****Linen Overshirt** M · Qty 2**$136****You're $14 away from free shipping****Checkout · $136.00**### 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. Checkout · $122.40Secure checkout by Shopify ## 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](https://framestorekit.com/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](https://framestorekit.com/what-it-can-and-cant-do). For the technical setup of the connection itself, see the [Framer Shopify integration guide](https://framestorekit.com/framer-shopify-integration). ## Framer online store questions Still unsure? [**~~Email us~~**](https://framestorekit.com/contact) and a Framer + Shopify person will reply, usually the same day. ### Yes. Framer designs the site and Shopify runs the store. A plugin like FrameStoreKit connects them, so you get a full catalog, cart and Shopify checkout on a Framer site. ### ### ### ### ### ## **Say yes to the next Shopify project** Start free with 15 products. Upgrade when the client signs. [Start building free](https://framestorekit.com/signup) ## Sitemap See the full [sitemap](/sitemap.md) for all pages.