Dracobay — Headless Shopify Storefront Engineering
Full-stack headless Shopify storefront built with Hydrogen, Next.js, TypeScript and Tailwind CSS — featuring a complete product catalogue, customer account dashboard, wishlist system, checkout, shopping cart, Shopify Flow automations, and full SEO integration via Google Search Console and Bing Webmaster Tools. Deployed on Vercel.
The Challenge
Building a fully headless Shopify storefront from scratch required bridging two separate worlds: the rich Shopify commerce backend with its APIs, Flow automations, and checkout infrastructure — and a completely custom Next.js/TypeScript frontend that had to feel fast, modern, and native. Every feature that a standard Shopify theme provides out of the box (wishlists, account dashboard, cart, collections, SEO) had to be built manually. Additionally, the headless architecture required careful SEO engineering to ensure Googlebot and Bingbot could fully crawl and index a JavaScript-heavy application.
The Solution
Shopify Hydrogen provided the commerce-aware React primitives as the foundation, with Next.js layered on top for full routing control, SSR, and ISR. The Storefront API drove all dynamic data. Custom React components and hooks handled wishlist state, cart management, and account flows. Shopify Flow handled all backend automation without custom server infrastructure. For SEO, server-side rendering ensured all critical content was available to crawlers at first paint, complemented by structured data, dynamic sitemaps, and active Search Console monitoring.
Results
Fully headless Shopify storefront live at dracobay.com
Complete feature parity with native Shopify themes: catalogue, cart, checkout, accounts, wishlists
Shopify Flow automations running order management and marketing workflows
Indexed and monitored across Google Search Console and Bing Webmaster Tools
Global edge delivery via Vercel
Built and maintained entirely solo as sole developer
Dracobay is a Hong Kong-based dropshipping storefront specialising in anime, collectibles, fashion, and lifestyle products — action figures, streetwear, accessories, and limited-edition collaborations. As the sole developer, I architected and built the entire platform from the ground up as a fully headless Shopify storefront.
Headless Architecture Rather than using a standard Shopify theme, the entire frontend was built using Shopify Hydrogen — Shopify's official React-based headless framework — combined with Next.js for routing, server-side rendering and static generation. TypeScript provided full type safety across the codebase, and Tailwind CSS handled all styling. The application is deployed and served globally via Vercel's edge network.
Shopify Storefront API Integration All product data, inventory, pricing, collections, and customer data flows through the Shopify Storefront API. This includes real-time stock status, multi-currency support, variant selection, and collection filtering — the full catalogue is dynamically driven without any hardcoded product data.
Customer Account Dashboard A complete customer account system was implemented: registration, login, order history, address management, and account settings — all connected to Shopify's customer API and rendered within the custom Next.js frontend.
Wishlist Functionality A full wishlist system was built, allowing customers to save products across sessions. This required custom state management and persistence logic integrated with the Shopify customer layer.
Cart & Checkout A custom shopping cart experience was built with real-time line item management, quantity updates, and discount code support. Checkout flows through Shopify's native checkout for payment processing, maintaining full PCI compliance while keeping the custom frontend experience intact.
Shopify Flow Automations Shopify Flow was configured for backend business logic — automated order tagging, inventory threshold triggers, customer segmentation workflows, and marketing automation sequences.
SEO & Discoverability The headless architecture required careful SEO implementation: server-side rendered product and collection pages with full meta tag control, structured data markup, sitemap generation, and canonical URL management. The site was submitted to and actively monitored via Google Search Console and Bing Webmaster Tools, with ongoing performance tracking and indexation management.
Homepage Experience The homepage features a full-width hero banner, trending now products, just arrived section, top 10 bestsellers, featured product spotlight, curated collections, shop by brand, current collections, recommended products, and a mobile app promotion section — all dynamically populated from Shopify data.
Tech Stack
