Bones — mobile-first e-commerce HTML template

Live demo (English) · Live demo (Arabic, RTL) · Documentation

Everything a store needs

A complete store, not a set of screens. Product page with snap gallery and zoom, variant picker with sold-out states, size guide, reviews and bundles; quick view; a sticky add-to-cart bar; cart drawer and cart page; wishlist and compare; filter, sort and instant search. Two checkouts — one-page and stepped — with express pay buttons, real autocomplete and inputmode fields, order confirmation and order tracking. A full account area: order history, addresses, payment methods, sign in, register and password reset. Every empty state is designed, not left blank.

39 pages, English and Arabic

39 pages, in both languages, light and dark. The Arabic build is the same code — the layout is mirrored by the browser through CSS logical properties, with no separate right-to-left stylesheet to maintain — and it ships with real Arabic copy, not machine-translated placeholder.

Dark and light layout

Dark mode is built in. It follows the system setting, or shoppers can switch it themselves. Every colour is a light/dark token pair checked for WCAG AA contrast, and four accent presets ship in the same tokens.css file, so re-theming the store is one file and no build step.

Tailwind CSS 4 Handlebars partials Vite 8 build

You do not need the build to use the template. The download contains finished, self-contained sites in demo/ltr and demo/rtl — plain HTML, CSS and JavaScript, no build step, no dependencies. Double-click any page to preview it, or upload one folder as your site root. The Vite + Tailwind CSS 4 + Handlebars source project is included too.

Connect a real backend when you are ready. The documentation ships a “Connect a backend” guide with working adapters for Snipcart, Stripe and Shopify Buy Button, plus notes for Foxy, Commerce Layer, Medusa and the WooCommerce Store API. The adapters are real modules with placeholder keys, kept outside the size budget so they cost you nothing until you use one.

Measured performance. Lighthouse across twelve pages in both languages, median of three runs:

Accessibility, best practices and SEO: 100 on every page tested, both languages, desktop and mobile.
Desktop performance: 99–100.
Mobile performance: 94–99.

Zero runtime dependencies, a Lucide SVG sprite of 74 icons, self-hosted fonts, AVIF/WebP/JPEG at three sizes, a 17 KB stylesheet and 20 KB of JavaScript gzipped.

Already own version 1? The 2.x download still contains your original 1.x AMP files, unchanged, in a legacy/ folder. Version 2 is a complete rewrite and shares no code with 1.x, so the two cannot be merged — nothing is taken away from you, and your licence still covers the old files.

Bones | Mobile-First eCommerce HTML Template