QuoteCartPro

Animated cart + RFQ with multi-step flow

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

Animated cart + RFQ with multi-step flow