Apple-style product builder in Webflow with live pricing, Smootify + Shopify checkout, 3D preview, file upload, and dynamic add-on logic.
🔍 Overview
A custom product configuration and checkout experience built on top of Webflow, powered by Shopify and Smootify. The interface mimics the feel of an Apple-style product page, with real-time price updates, dynamic UI states, and seamless integration of add-ons, project files, and 3D previews. Every interaction was designed to feel effortless - despite the complex logic under the hood.
Product page and business card builder
🎯 Scope
Webflow + Shopify (via Smootify)
Webflow handles layout and interaction logic, while Shopify serves as the headless e‑commerce engine. Smootify bridges both sides - syncing dynamic prices, variants, and checkout flow.
Product Builder
Variant selector built with buttons grouped by data-group (e.g. quantity, foil color, project)
Two types of options:
→ Affecting price (e.g. hot-stamping, quantity, project type)
→ Visual only (e.g. edge color, paper type, lamination)
Pricing is not cumulative: combinations are mapped to predefined price points
Dynamic Price Logic
Powered via Smootify’s pricing matrix system
JS handles live price updates without reloading
Fully responsive and touch‑friendly
Cart and Checkout Flow
Selection summary shown in fixed cart panel
Cart triggers Smootify checkout with full variant mapping
Payment and invoicing handled via Shopify + inFakt + Make + Baselinker
3D Product Preview
Embedded Spline model updates based on selected options
Visual feedback while customizing
Upload & Notes
Tally form embedded to upload design files
Optional note field and project brief section
Automatically linked to order via Make automation
Cart
🧪 Stack
Webflow (UI layer, buttons, structure)
Shopify (Headless backend for products & checkout)
Smootify (integration layer for variant & price sync)