Shoppers

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Shoppers is a website template for clothing and footwear stores, built on Bootstrap 5, with collections for women, men and children. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with eight pages: home, about, shop, product page, cart, checkout, thank you and contact.

The home page has a full-width hero, shipping, returns and support highlights, three collection tiles, a featured products carousel and a sale banner with a discount code. The shop page lists the products with filters, search, sorting and pagination, and each product has its own page with a photo zoom, sizes, a quantity selector and related products. The cart keeps its totals up to date and takes a demo coupon, and the checkout checks the form and shows an order preview on the page: no payment is taken and nothing is sent or stored. You will also find an about page with the store’s story and team, and a contact page with a working contact form and three store addresses. Shoppers gives you a ready-made front end for a fashion shop, to connect to your own store backend and payment provider.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with the original violet palette, Mukta type and 1140 px grid, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the product carousels, with 48 px arrow buttons, PhotoSwipe replaces Magnific Popup for the photo zoom, two native range inputs replace the jQuery UI price slider, a keyboard-operable dialog is the mobile menu, a small built-in scroll reveal replaces AOS, and Lucide SVG icons replace the icon font. npm run build (Dart Sass and esbuild) compiles the minified stylesheets and scripts.
• Lighter pages: the home page went from 1.64 MB to 1.11 MB. Every photo has an AVIF version with the JPEG as the fallback and real dimensions, and the hero photo is preloaded. The download grows from 2.7 MB to 3.3 MB because it now includes the Bootstrap Sass source, the PHP form handlers and the build tools; the 4.6 MB icon font pack it used to carry is gone.
• No third-party requests: Mukta is self-hosted and the icons are local, so the pages load nothing from other servers, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts.
• A working demo shop: 13 fictional products, each kept in one record that the shop, product page, carousels, cart and checkout all read, so names, prices and photos always match. The shop filters by category, size, colour and price, searches, sorts, paginates and keeps saved items; the cart has sizes, live quantities and totals, remove and clear buttons, the DEMO10 coupon and shipping; the checkout validates the form and shows an order preview. No payment is taken and no order is sent or stored.
• Working forms: the contact form and the footer newsletter form send through PHP handlers that you set to your own address, with validation, a spam trap and sending, success and error messages. Before, both pointed nowhere, so nothing could be sent.
• Accessibility: a skip link and landmarks on every page, one h1 per page, submenus that open from the keyboard, a mobile menu that keeps focus inside and closes with Esc, visible focus rings, labelled controls, 44–48 px touch targets, reduced-motion support and WCAG AA text contrast, with a deeper violet for text and buttons and a darker body grey.
• Fixed: the cart no longer overflows the page on tablets (it stacks on smaller screens); the quantity, remove, coupon and checkout controls work (they did nothing); prices and totals agree everywhere (the same products showed different prices on the cards, in the cart and at checkout); hundreds of dead links now go to real pages and filters; the invisible play and close icons, a missing script that failed on every page, the thank-you page that claimed an order was completed and its breadcrumb that said “Contact” are fixed. Demo copy replaces the placeholder text, the store addresses are fictional, and photos with a brand label and of real people are replaced with Unsplash photos and team initials.