wizytowki.co - Product Page (Webflow+Shopify)

Michał Stencel

Product Page (Webflow+Shopify) | wizytowki.co

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
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
Cart

🧪 Stack

Webflow (UI layer, buttons, structure)
Shopify (Headless backend for products & checkout)
Smootify (integration layer for variant & price sync)
Tally.so (file upload & notes)
Spline (interactive 3D preview)
Make.com (automations: order sync, invoicing)
Custom JavaScript (dynamic UI logic, visibility toggles)
Tally file upload
Tally file upload
Shopify checkout
Shopify checkout
Like this project

Posted Jul 28, 2025

Apple-style product builder in Webflow with live pricing, Smootify + Shopify checkout, 3D preview, file upload, and dynamic add-on logic.

wizytowki.co – Rive Animations & 3D Models
wizytowki.co – Rive Animations & 3D Models
wizytowki.co – Webflow Site & CMS
wizytowki.co – Webflow Site & CMS
Rive Animation for Stacklock (Fixel)
Rive Animation for Stacklock (Fixel)

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc