Orbit
A single-product store with a live 3D product.
Orbit is a complete store for one hero product and a handful of accessories. The product stands on a plinth in real 3D: visitors drag it to turn it, pick a glaze and watch it recolour, and scroll through a story that swings the camera to each feature. Everything else a store needs is here too: a shop with filters, a product page, a cart drawer and cart page, checkout steps, an order confirmation, and the pages people look for before they buy.
- For
- Product store
- Built with
- Next.js 16, TypeScript, Tailwind CSS 4, three.js
- Pages
- 10 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A procedural pleated pour-over set on a plinth: drag to turn it, recolour it live from the glaze picker, and watch it swing to each feature as the story scrolls.
What you get
Straight from the template's README, the same file you will find in the repository.
- Pages: Home, Product detail (one page per product), Shop, Cart drawer, Cart, Checkout, Order confirmation, Shipping and returns, About, 404, plus an error page.
- Home: hero with the 3D set, glaze and size pickers and add to cart; value claims; a pinned product story that turns the set to each feature; materials and specs; reviews with a rating summary; accessories; press; FAQ; newsletter sign-up.
- Product page: gallery (live 3D view plus drawn views), colour and size pickers that recolour and resize the 3D set live, price, quantity, add to cart, a delivery estimate worked out from today's date, stock states (in stock, low, sold out), details and specs accordion, reviews with "show more", related products.
- Shop: category, price and stock filters and five sorts, kept in the URL so a view can be shared; empty and loading states.
- Cart: saved in the browser (localStorage), synced across tabs, quantities, remove, promo codes, free-shipping meter, totals. A cart drawer (a native modal dialog) and a full cart page.
- Checkout: contact and address, shipping method with arrival dates, and a clearly marked payment placeholder where Stripe Checkout connects. No payment code is included.
- Design: the Cardzo engine's "sand" palette (bone ground, sea-green accent) and "precise" type pairing (Funnel Display and Funnel Sans, self-hosted), light and dark themes with a toggle that opens as a circle, phone to 1440 px layouts, visible focus, reduced-motion support throughout.
- One content file:
src/config/store.tsholds every product, variant, price and line of copy.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Product detail
- Shop
- Cart drawer
- Cart
- Checkout
- Order confirmation
- Shipping and returns
- About
- 404
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- three.js
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
