Clever Cookie

The challenge

Clever Cookie had outgrown their standard Shopify theme. As a rapidly growing e-commerce brand selling artisan baked goods, they needed a platform that could keep pace with their ambitions. Three key problems were holding them back:

Performance was suffering. The default Shopify theme loaded in over 4 seconds on mobile — an eternity in e-commerce, where every second of delay costs conversions. Heavy theme code, unnecessary app scripts, and unoptimised images were dragging the experience down.

TikTok Shop was a missed opportunity. With a growing social media following, Clever Cookie needed to sell directly through TikTok. Their existing setup had no way to integrate social commerce alongside the main store without duplicating product management.

Creative control was limited. Shopify’s Liquid templates made it difficult to create the bespoke brand experience they wanted. Every design change felt like a fight with the theme system, and the result never quite matched the brand’s personality.

The approach

Rather than patch the existing theme or switch to another template, I proposed a fundamentally different architecture: headless commerce. Keep Shopify for what it does best — managing products, inventory, orders, and payments — but replace the entire frontend with a custom-built storefront.

This approach gave us three advantages from day one:

1. Total performance control — No theme bloat, no unnecessary JavaScript, no third-party app overhead
2. Full design freedom — Every component built from scratch to match the brand exactly
3. Platform flexibility — The frontend can integrate with any service, not just Shopify’s ecosystem

I chose SvelteKit as the frontend framework for its exceptional performance characteristics. Svelte compiles away at build time, producing minimal JavaScript that runs faster than any React or Vue equivalent. Combined with Cloudflare Pages for edge deployment, the result would be a storefront that loads almost instantly from anywhere in the UK.

The solution

Architecture overview

The storefront connects to Shopify through the Storefront API, a GraphQL interface that provides everything needed for a shopping experience: products, collections, cart management, and checkout. The TikTok Shop integration runs alongside, synchronising the product catalogue so that inventory and pricing stay consistent across both channels.

Headless storefront

The custom SvelteKit frontend handles the entire customer-facing experience. Every page is pre-rendered at build time for instant loading, with client-side hydration adding interactivity where needed — cart updates, product filtering, and dynamic search all work seamlessly without full page reloads.

Key technical decisions that shaped the build:

• Static generation with ISR — Product pages are pre-built at deploy time, then incrementally updated when data changes in Shopify. Customers always see fast pages with fresh data.
• Edge-side cart management — The shopping cart operates entirely in the browser using Shopify’s cart API, meaning cart interactions are instant with no round-trip to a server.
• Optimistic UI updates — When a customer adds to cart, the UI updates immediately while the API call happens in the background. The experience feels native.

TikTok Shop integration

TikTok Shop was one of the primary drivers for the rebuild. The integration keeps the product catalogue synchronised between Shopify and TikTok, so the team manages everything from one place. When a product is updated in Shopify — price change, new variant, stock adjustment — the TikTok listing updates automatically.

Custom product filtering

Rather than a generic filter sidebar, I built a filtering system tailored to how Clever Cookie’s customers actually shop. Filters for dietary requirements, flavour profiles, and occasion make it easy to find the right product. The filtering happens entirely in the browser for instant results.

Performance optimisation

Performance wasn’t just a goal — it was the primary design constraint. Every decision was measured against its impact on load time:

• Zero unnecessary JavaScript — SvelteKit’s compiler strips away everything the page doesn’t need
• Responsive images — Every image served in the optimal format and size via Cloudflare Images
• Font optimisation — Self-hosted fonts with display:swap and preloading
• Critical CSS inlining — Above-the-fold styles load with the HTML, no render blocking

Project gallery

The results

The impact was immediate and measurable:

• Page load time: under 1 second — Down from 4+ seconds, a 75% improvement that directly correlates with higher conversion rates
• Lighthouse score: 98-100 — Near-perfect scores across Performance, Accessibility, Best Practices, and SEO
• Thousands of monthly visitors — The infrastructure handles traffic spikes from social media campaigns without breaking a sweat
• Multi-channel selling — Shopify + TikTok Shop managed from a single product catalogue
• Zero downtime — Cloudflare’s edge network provides automatic failover and global redundancy

Before and after

Metric	Before (Shopify theme)	After (Headless)
Page load	4.2s	0.8s
Lighthouse Performance	42	99
Time to Interactive	6.1s	1.2s
Total JS payload	847 KB	89 KB
Image weight (avg page)	2.4 MB	380 KB