5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T16cb,

Overview

QuoteCart Pro is a complete cart and quote request (RFQ) system for Framer websites. It allows visitors to add products to a persistent cart, enter contact details through a multi-step checkout flow, and submit a quote request via webhook, all with polished animations and full design customization.

5 Display Modes

Add to Cart Button

Place on product cards. Includes 4 button styles (filled, outline, ghost, minimal). Shows animated checkmark feedback on click. Configurable product ID, name, price, image, and quantity per click.

Cart Icon

Designed for your site header. Choose from 3 icon styles (bag, cart, basket). Animated badge counter bounces when items are added. Click opens the slide-in drawer.

Cart Drawer

Full slide-in panel from left or right with backdrop blur. Spring-animated open and close. Contains the full cart experience including item list, quantity steppers, promo codes, multi-step form, and submission.

Cart Page

Inline full cart view for dedicated cart pages. Same features as the drawer but embedded into your layout.

Mini Cart

Compact summary bar showing item count and total price. Clicking opens the drawer. Ideal for sticky footers or floating elements.

Multi-Step Checkout Flow

3-step animated flow with a progress bar:

Cart — Review items, adjust quantities, apply promo codes, add per-item notes
Details — Dynamic customer form with configurable fields
Review — Order summary with itemized breakdown and contact details before submission

Animated step indicator shows progress. Steps transition smoothly and can be disabled to skip directly to review.

Animated Cart Experience

Items slide in with staggered animations when the drawer opens
Quantity steppers animate smoothly (trash icon appears at quantity 1)
Toast notifications animate in and out when items are added or removed
Badge counter bounces when cart count changes
Total price updates with a pop animation
Success state displays an animated checkmark after submission
Empty cart shows an illustrated SVG empty state

Dynamic Form Builder

Configure customer fields using a simple text format in the property panel.

Supported field types: text, email, tel, textarea, and select with custom options. Any field can be marked as required. The form validates before allowing progression to the review step.

Promo Code System

Built-in discount code support. Set a valid code and discount percentage in the property panel. Users enter the code in the cart and the discount is applied to the total with visual feedback. Included in the webhook payload.

Per-Item Notes

Each cart item can include an optional note. Users click “Add note” to expand a text area. Notes are included in the webhook payload for customization requests or special instructions.

Webhook Integration

Sends a POST request with a JSON payload to any endpoint (Make, Zapier, Cloudflare Workers, custom API). Return 2xx for success. Non-2xx responses show a configurable error message. Success displays an animated checkmark with the request ID.

15 Currencies

Built-in formatting for USD, EUR, GBP, TRY, JPY, CAD, AUD, CHF, CNY, INR, BRL, KRW, SEK, AED, plus a Custom option for your own symbol. Decimal places configurable from 0 to 4.

4 Theme Presets + Custom

Obsidian — Dark glass with subtle transparency
Snow — Clean light theme with soft shadows
Ocean — Deep blue tones
Sand — Warm neutral earth tones
Custom — Full control over 15 color properties

Cross-Instance Communication

All component instances using the same Storage Key stay synchronized. Add to Cart buttons anywhere update the cart icon badge and drawer contents in real time via localStorage and custom DOM events. Works across browser tabs.

Property Panel (14 Grouped Sections)

Mode — Component type selector
Theme — Presets and custom colors
Product — Product configuration
Button — Button settings
Cart Icon — Icon settings
Drawer — Drawer behavior
Cart — Currency and cart options
Form Fields — Dynamic field setup
Checkout Steps — Step configuration
Webhook — Submission settings
Toast — Notification settings
Typography — Font controls
Styling — Border radius controls
Storage — Cart persistence key

5a:[["$","$L5d",null,{"post":{"id":"019c7029-1a15-7cdf-a2a6-b370bc2ab278","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"df3fedfd-4d3f-4100-b2f4-0eb9ffdcaaa1","name":"Can Girgin","slug":"can-girgin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29285/avatar-ET5yH7T79O6hzfpRHA4wHb7OxgIv8O.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"vhPXqpN4fSTgBuhw2dNX","resolved":true,"title":"QuoteCartPro","body":"$5e","bodyJson":null,"introduction":"Animated cart + RFQ with multi-step flow","slug":"quotecartpro","author":{"framerUserId":"df3fedfd-4d3f-4100-b2f4-0eb9ffdcaaa1","name":"Can Girgin","slug":"can-girgin","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29285/avatar-ET5yH7T79O6hzfpRHA4wHb7OxgIv8O.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vhPXqpN4fSTgBuhw2dNX/quotecartpro-lJ4XYuIcwgc8I18zmTBoRBz71AyhW1","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-15T18:28:34.908Z","updatedAt":"2026-02-18T09:42:43.620Z","publishedAt":"2026-02-18T09:51:07.797Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://affable-store-815977.framer.app/","price":"15","paymentUrl":"https://joworks-studio.lemonsqueezy.com/checkout/buy/84cc07ae-1ede-4094-953e-1cf984aa33ed","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"e755SWdxwhpA5lnERifT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-18T09:51:07.797Z","updatedAt":"2026-02-18T09:51:07.797Z","reported":false}}],"$L5f"]

Suggested for you