FrameCart is a fully functional shopping cart system for Framer. Not a UI mockup. Not a decorative drawer. A real, working cart where visitors browse products, add items, manage quantities, and check out all without leaving your Framer site. No backend. No code. Just drop it in and sell.
FrameCart is fully mobile responsive. On desktop, products display in a clean multi-column grid that automatically fills your frame width. On mobile, it collapses to a single column with full-width cards, readable typography, and properly sized buttons — no breakpoint setup, no extra configuration. Switch to your phone breakpoint in Framer and everything just adapts. Your customers get a seamless shopping experience on every device.
Drop ProductCard onto your page and fill in your products from the property panel — name, price, image, description. Drop CartDrawer into your navbar and paste your checkout URL. Publish. That's it. Your Framer site now has a complete, working shopping cart.
When a visitor clicks Add to Cart, the drawer slides in smoothly from the right edge of the screen and updates in real time. They can increase or decrease quantities, remove individual items, and see a live running subtotal. When they're ready, checkout sends them straight to your payment link.
ProductCard renders a fully responsive product grid. Cards automatically divide the frame width equally based on how many columns you set — resize the frame and every card adapts instantly. You can add unlimited products directly from the property panel using the built-in array control, giving each product its own name, price, image and description. The number of columns is adjustable from one to four, and the gap between cards, image height percentage, content padding, and text spacing are all independently controlled. Images support both Cover and Contain fit so product photos display exactly how you want them. On screens narrower than 500px the grid automatically drops to a single column regardless of your column setting — no manual breakpoints needed.
The cart drawer slides in from the right edge of the browser on any screen size. It opens automatically the moment a visitor adds something to cart and stays perfectly in sync across every product on the page. Inside the drawer, each item shows a thumbnail, product name, unit price, a quantity stepper with plus and minus controls, the line total, and a remove button. The subtotal updates live as quantities change. The checkout button links to any payment URL you choose — Stripe, Lemon Squeezy, Gumroad, Paddle, or anything else. An optional Clear Cart button can be toggled on for buyers who want to start over. The empty state shows a customizable icon and message when no items have been added.
The cart icon sits wherever you place it in your design. Four icon styles are available — Shopping Bag, Cart, Basket, and Minimal. The live badge updates instantly as items are added, showing the total item count. Badge size, font size, font weight, font family and colors are all fully customizable from the property panel.
The Add to Cart button supports four styles — Filled, Outline, Pill Outline, and Pill Filled. Button text, added confirmation text, padding, font size, border radius, background color, text color and border color are all independently adjustable. When a product is added, the button briefly switches to a confirmation state with your choice of six icons — a checkmark, circle check, sparkle, heart, shopping bag, or no icon at all. The confirmation color is fully customizable.
Every text element uses Framer's native font picker. Product name, price, description and button text each have their own font control on the ProductCard. Drawer title, item name, item price, subtotal total, checkout button text and badge numbers each have their own font control on the CartDrawer. Font size and font weight are separately controlled for badge numbers and quantity steppers so every number in the interface can match your brand typography precisely.
Every element in both components has its own dedicated color picker. On ProductCard you can control card background, image background, content area background, text color, muted text color, border color, button background, button text, button border, added state color, badge color and badge text color. On CartDrawer you can control the drawer background, header background, footer background, item row background, text color, muted text color, border color, quantity button background and color, checkout button background and text, close button background and color, empty state icon color, empty state text color, badge background and text color. Full dark mode support — every color is yours to set.
Two components ship in one file. Paste one component link into any Framer project and both ProductCard and CartDrawer appear in your assets panel immediately - no additional setup. Works on Framer Free, Basic, Pro and Scale plans. Compatible with Formspree that accepts a checkout URL.
All sales are final due to the digital nature of this product. If you have any questions before purchasing, feel free to reach out, happy to help.
Kunal Sharma
