E-commerce Fashion Store Homepage Template

An editorial e-commerce homepage for a fashion store, built with Bootstrap 6 for a fictional label called Maison Vale, with category tiles, filterable new arrivals, a working shopping bag, a sale countdown, reviews and a newsletter signup.

How it works

The page lives in .mv-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to the brand clay. Dark buttons use the built-in theme-inverse role.

• Announcement bar and navbar: navbar lg:navbar-expand laid out as a three-column grid: links on the left, the centered .mv-brand logo, and icon actions on the right. Below 1024px the links move into a <dialog class="drawer drawer-start">. "Women" opens a .menu with menu-header groups.
• Hero and categories: a serif headline, a two-photo lookbook (.mv-look) and four category tiles.
• New arrivals: .chip buttons with data-mv-filter hide or show cards by their data-mv-cat and announce the count in a live region. Heart buttons use data-bs-toggle="button", and each .mv-add button adds the product to the bag and shows #mv-toast.
• Shopping bag: #mv-bag is a <dialog class="drawer drawer-end">. The script builds the list from the data-mv-name, data-mv-price and data-mv-img attributes, with quantity buttons, remove links, the subtotal, the badge count and a free-shipping progress bar.
• Search: #mv-search is a <dialog class="dialog dialog-lg"> with a form-adorn field; typing or clicking a popular chip lists matching products.
• Sale banner: the countdown always runs to the coming Sunday at 23:59 local time, so it never shows a stale date. The code button copies KNIT10, with a fallback message when the clipboard is blocked.
• Reviews and newsletter: review cards, then <form data-bs-validate novalidate> with a simulated submit.

Customization

• Change --mv-clay, --mv-ink and --mv-bone on .mv-page in style.css to rebrand; update the --bs-primary-* overrides next to them.
• Change FREE_SHIPPING at the top of script.js to move the free-shipping threshold.
• Edit the starting bag Map in script.js to start empty or with other products.
• Add products by copying a .mv-product card and setting data-mv-id, data-mv-name, data-mv-price and data-mv-cat.
• Replace the saleEnd() function with your real sale end date.
• Replace the setTimeout in the newsletter handler with fetch() to your email provider.
• The photos come from Unsplash; replace them with your own product and campaign photos.

Accessibility

A skip link jumps to #mv-main. Filter chips use aria-pressed, the bag button label includes the item count, quantity controls have labels, focus stays in the bag after changes, and toasts use role="status". The countdown is a role="timer", star ratings have text labels, and hover-only effects stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). BS5 developers will notice: btn-solid theme-inverse and btn-outline replace btn-dark, the navbar and cart use Drawer instead of navbar-collapse and Offcanvas, Dropdown is now Menu, Modal is now Dialog, the badges use badge theme-inverse, and validation uses data-bs-validate.