BuildMart

BuildMart is a premium, fully responsive e-commerce theme for building materials, construction supplies, and hardware stores, built with Astro and TailwindCSS, that ships with a complete online storefront including product catalog, cart, checkout, and user account pages.

What is BuildMart?

BuildMart is an open-source e-commerce template created by Kantong Aplikasi and distributed under the MIT license. It runs on the Astro 5.17 static-site framework with TailwindCSS 3.4 for styling and TypeScript for type-safe development. The theme takes mock product data as input and produces a static, SEO-friendly storefront with pages for product listing, product details, shopping cart, checkout, wishlist, user dashboard, login/register, order tracking, and more. It also includes category pages for Cement & Concrete, Steel & Metal, Lumber & Wood, Tools & Equipment, Electrical, Plumbing, Paint, and Roofing.

Key Features

• Astro framework — Built on Astro 5.17, which compiles to fast, SEO-optimized static HTML with no JavaScript overhead by default.
• TailwindCSS styling — Utility-first CSS via TailwindCSS 3.4; brand colors are customized in tailwind.config.mjs.
• Persistent shopping cart — The cart stores its state using localStorage, so a visitor's cart survives page reloads and browser sessions.
• Multi-step checkout — A checkout flow is included, alongside order-tracking pages for post-purchase status.
• Product catalog with filtering — Product listing pages support advanced filtering, sorting, and search, and product detail pages include image galleries, specifications, and review sections.
• Wishlist support — Shoppers can save products to a wishlist for later purchase.
• Dark mode — A built-in dark mode toggle is present across the theme.
• Accessibility — The theme claims WCAG 2.1 AAA compliance, with touch targets of at least 44px on mobile.
• High Lighthouse score — The theme is built to reach a Lighthouse performance score of 95 or higher.

Who is it for?

• Building materials suppliers — Set up an online catalog to sell cement, steel, lumber, and other supplies to contractors and DIY buyers.
• Hardware store owners — Launch a modern e-commerce site with category-based browsing (tools, electrical, plumbing, paint, roofing) and a persistent cart for repeat orders.
• Wholesale and industrial distributors — Use the multi-step checkout and order tracking pages to process B2B orders and keep customers informed.
• Home improvement retailers — Serve shoppers on any device with a mobile-first layout, fast page loads, and dark mode for low-light browsing.

What can you do with BuildMart?

• Launch a building-materials storefront: Publish the included homepage, product listing, product detail, cart, and checkout pages with your own branding and mock product data.
• Customize the design: Edit tailwind.config.mjs to change the entire color palette, update the logo and site name in Header.astro and BaseLayout.astro, and replace mock content in the src/pages directory.
• Sell across categories: Use the pre-built category pages for eight construction trades so shoppers can filter by product type.
• Provide a full shopping experience: Give visitors wishlist, order tracking, and user account features without building them from scratch.

How does BuildMart work?

To use the theme, clone the repository, run npm install, and start the development server with npm run dev, which serves the site at localhost:4321. For production, npm run build generates a static site. The theme requires Node.js 18 or later and npm or yarn as a package manager. Product data is currently mock data, so you replace it with your own product list.

FAQ

Is BuildMart free to use?

Yes, BuildMart is released under the MIT License, so it can be used freely for personal and commercial projects. The license file is included in the repository.

What tech stack does BuildMart use?

BuildMart is built with Astro 5.17, TailwindCSS 3.4, and TypeScript. It uses localStorage for the shopping cart and runs on Node.js 18 or later.

Does BuildMart support dark mode?

Yes, dark mode is built into the theme, allowing visitors to switch between light and dark themes.

What pages are included in BuildMart?

BuildMart includes e-commerce pages (homepage, products, product detail, cart, checkout, wishlist), user account pages (dashboard, login/register, orders, addresses), category pages for eight construction trades, and informational pages (about, contact, FAQ, blog, terms, privacy, shipping, returns, careers, support).

How fast is BuildMart?

The theme is designed to achieve a Lighthouse performance score of 95 or higher, thanks to Astro's static generation and optimized bundle sizes.