Project Overview
Everbloom Preserved is a boutique floral preservation studio in Melbourne. Founded by artist Arie, the brand captures the fleeting beauty of wedding bouquets by casting them in crystal-clear, hand-poured resin blocks. However, as the brand's social media presence soared, their legacy WooCommerce site became a bottle-neck — suffering from slow mobile load times, checkout drop-offs, and struggles with massive image loads of complex resin products.
Blend Designs stepped in to execute a premium replatforming. By separating the storefront into a custom Next.js 14 frontend and leveraging Shopify Headless for secure, bulletproof inventory and checkout management, we created a digital flagship store that matches the luxury feel of Arie’s keepsakes.
The Challenge
The legacy WooCommerce store had several major drawbacks:
- Slow Mobile Performance: Image-heavy pages containing high-definition resin blocks averaged a 6.8-second load time, leading to high bounce rates.
- Unoptimized Image Delivery: Standard WordPress media hosting lacked modern next-gen formats (WebP/AVIF) and responsive size adjustments.
- Checkout friction: Multi-step WooCommerce checkout flows created cart abandonment, especially on mobile browsers.
- Stock Control & Scale: Keeping track of limited artist commission spots and custom orders was complex and prone to database lockouts during peak times.
Our Headless Solution
We designed a high-performance headless architecture designed for visual impact and transactional speed.
Technology Stack
- Frontend Framework: Next.js 14 utilizing App Router and React Server Components (RSC)
- Backend CMS / Commerce: Shopify Headless CMS (via Shopify Storefront GraphQL API)
- Styling & Layout: Tailwind CSS with custom theme integration for burgundy, cream, and soft gold tones
- Hosting & CDN: Vercel Global Edge Network with static incremental regeneration
- Typography: Google Fonts loader serving Cormorant Garamond for display and Outfit for body
Key Replatforming Wins
- Shopify Storefront API Integration: High-performance GraphQL queries fetch real-time stock levels, product collections, and metadata directly.
- Dynamic Collection Flow: A beautiful custom customizer allowing brides to pick shapes (Hexagon, Heart, Round Dome) and sizes (S, M, L, XL) dynamically.
- Next.js Image Optimization: Automatically converts HD raw images into AVIF/WebP, resizing appropriately per mobile device viewpoint.
- Single-Page Checkout: Seamless cart slide-over using Framer Motion leading directly to Shopify's high-converting checkout domain.
Migration & Launch
To secure SEO equity and transaction continuity, we executed a detailed cutover plan:
- Shopify Catalog Sync: Seeded Shopify with Arie's product shapes, pricing matrices, and inventory buffers.
- SEO URL Preservation: Set up a mapping of WooCommerce URLs to our Next.js pages, utilizing 301 redirects to preserve and boost Google rankings.
- Domain Transition: Smooth DNS transition with zero downtime, instantly activating global Vercel edge endpoints.
Results
Following the modern headless upgrade, Everbloom Preserved achieved exceptional growth metrics:
- 🚀 Page load time: Reduced from 6.8s to 0.7s (89% improvement)
- 📈 Conversion rate: Increased by +42% in the first 90 days
- ⚡ Core Web Vitals: 100/100 Lighthouse Performance score
- 📱 Mobile engagement: +56% increase in page views per session
- 🛒 Checkout time: Decreased by 64% with single-page cart
- 🔒 Server uptime: 100% since transition from WooCommerce
