AniTokyo — Custom Shopify Theme
Fully customized Shopify theme with a 2000+ line customer dashboard, custom cart & predictive search
A heavily customized Shopify theme for an anime-streetwear storefront. The build replaces Dawn defaults with a bespoke design system, a 2000+ line customer account dashboard, custom AJAX cart and predictive search, and a layout-level snippet that handles redirect and avatar injection across the whole storefront.
Overview
AniTokyo is a Shopify storefront for an anime-streetwear brand. The theme is built from scratch on top of Shopify's Liquid + Sections architecture — no Dawn boilerplate, no page builder, no CSS framework.
The centerpiece is templates/page.dojo.liquid: a custom customer account dashboard (~2000 lines of Liquid) that replaces Shopify's bare-bones default account pages with profile management, order history, and an avatar picker backed by a curated asset library.
Around the dashboard sit a custom AJAX cart drawer, an enhanced predictive search, and custom section templates for collection, search, cart and product pages — all wired through a custom theme.liquid layout with an AniTokyo snippet that injects avatars and handles redirects.
Architecture
Shopify Liquid theme → custom layout + AniTokyo snippet → custom sections/snippets → custom JS (cart, search) + 3500+ line CSS
Tech stack
MVP features
The theme is built from scratch on Shopify's Liquid + Sections architecture — no Dawn boilerplate, no page builder, no external CSS framework. 3500+ lines of base.css drive the entire visual system.
A bespoke 2000+ line Liquid template that replaces Shopify's bare-bones account pages with profile management, order history and a curated avatar picker.
A theme.liquid-level snippet that handles per-route redirects and injects the customer's chosen avatar across the entire storefront.
custom-cart.js drives a hand-rolled cart drawer with live add/remove, quantity sync and optimistic UI on top of the Shopify AJAX API.
search.js plus a custom predictive-search.liquid snippet deliver a richer, brand-specific search experience instead of Shopify's default dropdown.
Bespoke header, footer, collection grid, search, cart and product-card sections/snippets — every customer-facing surface is hand-built.
Curated anime avatar set (Goku, Gojo, ...) shipped as theme assets and wired into the dashboard's profile picker.
Workflows
Customer dashboard (page.dojo)
- 1
Customer logs in and is routed by the AniTokyo snippet to the custom /pages/dojo dashboard instead of Shopify's default account page.
- 2
page.dojo.liquid renders profile, order history and the avatar picker, pulling data from Shopify's customer object.
- 3
Avatar selection is persisted, and the AniTokyo snippet injects the chosen avatar into the header on every subsequent page.
AJAX cart flow
- 1
Customer clicks add-to-cart on a product card or product page.
- 2
custom-cart.js posts to the Shopify AJAX cart API and updates the cart drawer in place — no full page reload.
- 3
Quantity changes and removals sync the same way, with the cart count in the header updated optimistically.
Predictive search
- 1
Customer types in the header search input.
- 2
search.js calls Shopify's predictive search endpoint and renders results through the custom predictive-search.liquid snippet.
- 3
The full search page (main-search.liquid + search.json) takes over on submit, using the same custom card-product layout.