Fleur
Fleur is a free, elegant two-page Bootstrap 5 website template for florists and flower shops, pairing an editorial homepage with a full, filterable online bouquet shop. It ships completely jQuery-free, with a vanilla-JavaScript slide-in cart, occasion and colour/price filters, a gallery lightbox, and scroll animations. The design commits to a distinctive floral identity — warm cream, blush, sage, and a deep dusty-rose accent set in Cormorant Garamond and Jost.
Key features
- Two pages: editorial homepage plus a full filterable bouquet shop
- Vanilla slide-in cart drawer with add/remove/quantity and running subtotal
- Shop sidebar filters by occasion, colour and price with live sort and count
- Featured-bouquets grid with a one-click occasion filter
- Six shop-by-occasion tiles and a three-tier weekly subscription band
- Keyboard-accessible arrangement gallery with a vanilla lightbox
- Our-story, services, testimonials, delivery-areas and newsletter sections
- IntersectionObserver reveals and stat count-up that respect reduced-motion
- Bootstrap 5, self-hosted, no jQuery and no plugin dependencies
Best for
- Independent florists and flower studios
- Local flower shops selling bouquets online
- Wedding and event floral designers
- Flower subscription and delivery services
- Any small boutique wanting a shop-ready elegant template
At a glance
- Bootstrap 5, self-hosted — no jQuery, no plugin dependencies
- Vanilla JavaScript: filtering, cart, lightbox, count-up, mobile nav, form validation
- Distinctive florist identity: cream + blush + sage + dusty-rose, Cormorant Garamond + Jost
- Progressive enhancement — all content visible with JavaScript off
- Accessible: semantic landmarks, ARIA on custom widgets, keyboard support, visible focus
- Responsive and mobile-first; navbar and shop filters collapse to slide-in panels
- Front-end only; cart and forms are ready to wire to your own backend
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Fleur free to use for commercial projects?
Yes. Fleur is a free template released under the standard uiCookies license, which covers both personal and commercial use. You can use it for a real flower shop or client site. Attribution is appreciated, and the exact terms are on the uiCookies license page.
Does the shopping cart actually work?
The cart is fully functional on the front end. You can add bouquets from either page, adjust quantities, remove items, and see a live subtotal in the slide-in drawer, and the contents persist across page loads using the browser's localStorage. What it does not include is a payment backend — the Checkout button is a placeholder you point at Stripe, Snipcart, a WooCommerce store, or your own server to take real orders.
How does the bouquet filtering work?
The homepage has a simple occasion filter above the featured grid, and the shop page has a full sidebar with checkboxes for occasion, colour and price plus a sort dropdown and a live result count. All of it is plain vanilla JavaScript reading data attributes on each product card — there is no framework, no jQuery, and no external plugin. To add or change products you just edit the HTML cards and their data attributes.
Does Fleur require jQuery or any plugins?
No. Every interaction — the cart, filters, lightbox, count-up, mobile menu, sticky navbar, and form validation — is written in vanilla JavaScript in a single main.js file, one function per feature. The only bundled library is Bootstrap 5 itself, which is self-hosted rather than loaded from a CDN. That keeps the template light and free of dependencies to maintain.
Will the content still show if JavaScript is disabled?
Yes. Fleur is built with progressive enhancement: all text, images, products and prices are present in the HTML and fully visible without JavaScript. The scroll-in animations only apply their hidden start state when a js class is present on the page, so with scripting off nothing is hidden — you simply get the static page. The filters and cart are enhancements layered on top.
Is the template accessible and mobile-friendly?
Yes. Fleur uses semantic landmarks, descriptive alt text on every image, ARIA attributes on the custom cart, lightbox and filter widgets, visible focus styles, and keyboard support including Escape-to-close and arrow-key navigation in the lightbox. It is responsive and mobile-first, so the navbar collapses to a slide-in menu and the shop filters move into a slide-in panel on small screens. Animations respect the visitor's reduced-motion preference.
How do I change the colours, fonts, or add my own flowers?
The whole palette is defined as CSS custom properties at the top of css/style.css, so you can recolour the template by editing a handful of variables in one place. Fonts come from Google Fonts and can be swapped in the <link> tag and the two font variables. Products are plain HTML cards — duplicate a card, change the image, name, note, price and data attributes, and it appears in the grid, filters, and cart automatically.
What is included in the download?
You get two HTML pages (index.html and shop.html), the custom css/style.css design layer, self-hosted Bootstrap 5 CSS and JS bundle, and the vanilla js/main.js. Demo photography is referenced from the img/ folder so you can drop in your own bouquet photos. There is no build step required — open index.html and it runs. Swap the demo images for your own optimized shots before going live.
