MaleFashion

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Male Fashion is a website template for a menswear and accessories store, built with Bootstrap 5.3.8 and plain JavaScript. It has nine pages: home, about, shop, product details, shopping cart, checkout, blog, blog post and contact. The layout is responsive and mobile-ready, and it suits an online clothing store or a website for an apparel brand.

The home page opens with a hero slider, followed by three collection tiles, products under Best Sellers, New Arrivals and Hot Sales tabs, a deal of the week with a countdown, a photo strip and the latest blog posts. The demo shop works in the browser, from the bag and the shop filters to a page for every product, coupon codes and a checkout that is clearly labelled as a demonstration. The product page adds a photo gallery, a video that plays on click, sizes, colours and information tabs; the about page has the store’s story, a customer quote, counters and the team; and the contact page has a map that loads on click, store addresses, a contact form and a customer care section.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.4.1 and jQuery 3.3.1), compiled from Sass with the template’s colours and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, and small built-in modules handle the product filter tabs, the video dialog, the counters, the forms and the map; Magnific Popup, Nice Select, SlickNav, NiceScroll and the countdown plugin are gone, and the selects are native. Lucide SVG icons and a Font Awesome 7 Brands subset for the social logos replace Font Awesome 4, ElegantIcons and the PNG header icons. npm run build (Dart Sass and esbuild) compiles the minified stylesheets and one script bundle.
• Lighter pages: the home page went from 1.7 MB and 54 requests to 0.88 MB and 38 requests, the contact page from 3.0 MB and 80 requests to 0.58 MB and 14, and the download from 7.2 MB to 4.1 MB. Photos have AVIF versions with the JPEG or PNG as the fallback, real dimensions and lazy loading below the fold, the hero photo is preloaded, and the preloader that hid the page until everything had loaded is gone.
• No third-party requests: Nunito Sans is self-hosted (every page loaded it from Google Fonts before), the contact map is OpenStreetMap and loads only after a visitor clicks it, with no API key (a Google Maps embed loaded with the page before), the product video plays from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• A working demo shop that runs in the browser: Add to Cart, wishlist and compare on every product card; a bag that keeps its items between pages and shows its count and total in the header; search, category, brand, price, size, colour and tag filters with sorting and pagination; a page for each of the 16 products (shop-details.html?id=…) with sizes, colours and quantity; quantities, coupon codes (MALE20, WELCOME10) and totals in the cart; and a checkout with validation that ends in a clearly labelled demo confirmation and sends no order, payment or data. Each product has its own name, price and description that match its photo (before, seven names repeated across the cards and a shoe was called a biker jacket).
• Working forms: the contact form, the blog comment form and the newsletter form in every footer send through php/send-email.php and php/subscribe.php, with validation, a spam trap, a recipient you set and an in-page message, and the mailer keeps visitor input out of the mail headers. Before, none of them could send: the fields had no names and the forms had no action. The header search now opens the shop with the matching products.
• Accessibility: a skip link and landmarks on every page, one h1 per page, labelled form fields and controls, a phone menu that works as a dialog (focus stays inside and Esc closes it), keyboard access to the Pages submenu and to the product card actions (both opened on mouse hover only), visible focus outlines and larger targets for the hero arrows and social links. Text meets WCAG AA contrast: red text uses a deeper shade of the brand red and grey text is darker, while the brand red stays on buttons, borders and large type.
• Fixed: the quantity arrows worked backwards (the up arrow lowered the number) and now stay within limits; choosing a size no longer clears the chosen colour, and the other way round; the shop sidebar’s duplicated categories are gone; and every link that went nowhere (hundreds of placeholder links, a misspelt breadcrumb link and empty previous and next post links) now leads somewhere. The demo copy is rewritten for a menswear store, the contact page has a customer care section for the delivery, returns and payment links, and typos are corrected.