Tokyobike.com (Headless)

Phase 1: Content Platform (May 2024 – September 2024)

The project initially started as a content-focused website built with Next.js, TypeScript, and Sanity CMS. The goal was to create a highly flexible editorial platform that would reflect Tokyobike’s minimal and design-oriented identity.

Key Features

• Developed a fully custom frontend using Next.js and TypeScript.
• Implemented static generation for excellent performance and SEO.
• Built a unique bento-style blog archive layout.
• Created reusable content components and custom page layouts.
• Developed blog posts and category structures within Sanity CMS.
• Implemented custom navigation systems and editorial layouts.
• Optimized SEO and metadata across the site.
• Created a flexible content management experience for non-technical users.

Phase 2: Headless Commerce (March 2025)

The second phase introduced Shopify as a headless commerce backend using the Shopify Storefront API and GraphQL, while preserving the editorial experience established in the first phase.

Product Experience

• Built highly customized product pages.
• Developed completely custom bundle products.
• Integrated Shopify native gift cards.
• Created custom product color swatches and advanced variation selectors.
• Implemented variant filtering and custom option ordering.
• Supported grouped display of single-option variations.
• Added sticky purchase forms optimized for desktop and mobile.

Shopping Experience

• Developed a navigation system with multiple custom components.
• Created custom collection pages and landing pages.
• Implemented native Shopify search.
• Built a cart drawer and dedicated cart page.
• Added support for cart notes and custom cart attributes.

Pickup & Delivery System

One of the most complex parts of the project was a fully custom pickup and delivery system.

• Implemented date and time slot selection.
• Availability is dynamically determined based on products in the cart.
• Developed support for unlimited pickup locations managed through Sanity CMS.
• Integrated store selection with Shopify cart attributes.
• Created a highly configurable system that can easily adapt to business requirements.

Inventory & Order Synchronization

Integrated Shopify with Zoho Inventory through Zoho Flow to enable bi-directional synchronization of:

• Products
• Inventory
• Customers
• Orders

This automation streamlined operations and maintained inventory consistency across systems.

Shipping System

Implemented advanced shipping workflows using ShipEZ, supporting:

• Multiple shipping zones.
• Product tag-based shipping rules.
• Custom delivery configurations based on product types and destinations.

Migration

Managed the migration from the previous WordPress + WooCommerce platform, preserving SEO and existing URLs while moving content and store functionality to the new architecture.

Technologies

• Next.js
• TypeScript
• Sanity CMS
• Shopify Storefront API
• GraphQL
• Shopify Customer Accounts
• Shopify Cart Attributes
• Shopify Gift Cards
• Zoho Flow
• Zoho Inventory
• ShipEZ
• SCSS
• JavaScript

Outcome

Tokyobike.com successfully evolved from a content-driven website into a highly customized headless commerce platform. The combination of Next.js, TypeScript, Sanity CMS, and Shopify Storefront API provides a fast, scalable, and maintainable architecture that balances rich editorial storytelling with complex e-commerce functionality.

The new platform preserves the brand’s unique identity while providing a flexible foundation for future growth. Designed primarily for the Japanese market, the architecture is also well-positioned to support multilingual expansion and additional regional storefronts in the future.