Overview
TiflToys is a headless Shopify storefront built with Next.js 16. Shopify remains the commerce backend while the custom frontend controls the catalogue, product pages, cart, content pages, and visual design.
Features
- Product, collection, and sector browsing
- Product detail pages with galleries, variants, availability, and preorder support
- A persistent cart with add, update, and remove actions
- Inventory-aware quantity limits with a fallback when inventory scope is unavailable
- Shopify-hosted checkout
- Contact, delivery, refund, privacy, and terms pages
- Sitemap, robots, manifest, loading, error, and not-found routes
Architecture
The storefront reads product and collection data through Shopify's Storefront GraphQL API. Read queries use revalidation while cart reads and mutations bypass the cache.
The Shopify cart is the source of truth. Server Actions perform cart mutations, and the cart ID is stored in an HTTP-only, same-site cookie for 30 days. Product and cart responses are normalised into TypeScript types before reaching the interface.
Running locally
The app requires a Shopify store domain and Storefront API token. After adding them to .env.local, install dependencies and run npm run dev.