Shopfront — Free Bootstrap 5 E-commerce Website Template
Shopfront is a two-page online-store template that ships with a real product-detail page, not just a landing mockup — image gallery, colour and size selectors, a quantity stepper and detail/review tabs all wired up in plain vanilla JavaScript. The storefront pairs an electric cobalt accent with a flame-orange sale highlight over warm bone and ink neutrals, so it reads like a boutique fashion brand rather than a generic grid.
Features
- Sticky header with a live cart counter that increments (and animates) on every add-to-cart
- 8-card product grid with instant category filtering (Sneakers / Bags / Apparel / Accessories) — no page reload
- Full
product.html: thumbnail gallery swap, colour swatches, size picker with a sold-out state, and a min/max quantity stepper - Vanilla-JS detail / specs / reviews tabs and a deep-linked "Read reviews" jump
- Countdown sale banner with a one-click "copy discount code" button
- Benefits row, verified-customer reviews, and a newsletter form with front-end email validation
- Hand-written inline SVG icons throughout — no icon font, no external requests, CSP-clean
- Scroll-reveal via IntersectionObserver, wishlist toggles, and toast notifications, all honouring
prefers-reduced-motion
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 2 (storefront + product detail)
- Responsive: Yes
- Style: Modern boutique e-commerce — cobalt & flame on bone, Bricolage Grotesque display
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Shopfront really free for commercial projects?
Yes. Use it for personal or commercial work, including client builds. An attribution link back to uiCookies is appreciated but not required.
Does it use jQuery or any paid plugins?
No. Every interaction — cart counter, filter, gallery swap, stepper, tabs, validation — is written in dependency-free vanilla JavaScript. Bootstrap 5 is self-hosted, and there are no CDN or icon-font requests, so it deploys cleanly on strict-CSP hosts.
Can I connect it to a real store like Shopify or WooCommerce?
Shopfront is a static front-end template, so the cart and checkout are front-end demos. The markup is clean and semantic, which makes it straightforward to wire into Shopify sections, WooCommerce, Snipcart, or a headless commerce API.
How do I add more products?
Copy one `.card-p` article block in the product grid, swap the image, name, price and `data-category`, and the filter picks it up automatically. Product images live in `img/` and are referenced by relative path.
