The problem
Most agency portfolios show a homepage. We wanted proof Clicknify can ship a complete commerce experience — cart, filters, live search, an interactive gift finder — not just a pretty landing page.
An 8-page general-store commerce site with a working cart, live search, and a 4-step gift finder — GSAP-choreographed, fully static, zero backend.
Market context: Premium gifting & general-store retail · trust-sensitive purchase · mobile-dominant browsing · impulse and considered-gift paths.
Duration · Concept build
See the live buildThe result · in numbers
8
Full commerce pages · static HTML
4
Step interactive gift finder
0
Backend, database, or build step
3
Font system · Fraunces + Work Sans + Caveat
The brief
What the client actually needed.
A self-directed capability proof — not a client engagement. The brief I set myself: prove Clicknify can ship a complete commerce experience, not just a landing page. Most agency portfolios stop at a homepage mockup. This one has a working cart, functional collection filters, a live search overlay, and a 4-step gift finder that returns real product matches — the parts that actually decide whether a founder trusts the build.
The problem
What was broken — in numbers.
A homepage is easy to fake. A cart that persists, a filter that actually filters, and a gift finder that returns relevant products are not.
- Pages required
- 8 (Home, Collection, Product, Gift Finder, Gift Guides, Stores, About, Help)
- Interactive systems
- Cart, filters, live search, 4-step finder — all functional
- Technical constraint
- Static HTML · no backend, no build step, no framework lock-in
- Acceptance bar
- Every interaction had to work, not just look designed
The approach
What we did. Why.
Commerce-simulation first. Before a single animation was written, the cart, filter, and search logic had to work end-to-end on localStorage — because a beautiful page with a broken "Add to cart" button is worse than no demo at all.
- localStorage cart with a drawer, live subtotal, and a free-shipping progress bar that updates as items are added
- Collection filters that actually filter — category, price, and sort, wired to the real product data, not a static grid
- A 4-step gift finder (recipient → occasion → budget → urgency) that narrows to a real shortlist, not a decorative quiz
- GSAP + ScrollTrigger for the motion system, with an IntersectionObserver fallback and full prefers-reduced-motion support — so the animation layer degrades gracefully instead of breaking
The execution
Inside the work.
Motion with restraint
Rolling-label buttons, magnetic CTAs, a marquee ticker, and squiggle draw-ins — but every one of them respects prefers-reduced-motion, and the IntersectionObserver fallback means the site still works without ScrollTrigger support. Motion that only works in the best-case browser isn’t a motion system, it’s a demo trick.
A three-font system with one job each
Fraunces for display headlines, Work Sans for body text, Caveat for the hand-written accents (the "wrapped by hand" tags, the founder-note callouts). Three fonts, three distinct jobs, no overlap.
Commerce logic before decoration
The cart, the filters, and the gift finder were built and tested against the product data first. The GSAP choreography, the polaroid photo treatments, and the marquee ticker were the last layer applied — not the first.
The outcome
What moved. And why.
A commerce site that survives being clicked on, not just looked at.
- Working cart, live filters, live search, and a functional 4-step gift finder — all client-side, zero backend
- Full motion system with reduced-motion and no-ScrollTrigger fallbacks built in from the start
- Zero build step — the whole site is static HTML, deployable anywhere in minutes
What didn’t work
Every honest case study has one. This builds more trust than ten testimonials.
The brand film uses AI-generated video rather than real footage — an honest limitation for a concept piece with no real storefront to film. The product photography is licensed stock, not original — fine for a capability proof, not something we’d ship for a paying client without real photography. Both are flagged on the demo itself.
Need more than a landing page — a commerce experience buyers can actually use? Bring it to the Clarity Call.
Book the Clarity Call
Bring one problem.
Leave with one framework.
You don’t need another proposal. You need to know where the money is leaking. The Clarity Audit is how every Clicknify engagement starts. 30 minutes, live, with the Founder. We diagnose one thing — a stuck channel, a leaky funnel, a brand decision that keeps slipping — and leave you with the framework to fix it. Yours to keep, regardless.
- 30 minutes · live diagnostic
- One channel, one funnel, or one brand decision
- Yours to keep — no pitch unless you ask for one
- Founder on every call
Ashwani Srivastava, Founder, on every call. Calendar pick is zone-aware · WhatsApp open for quick questions.