Karl

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Karl is a fashion e-commerce website template built on Bootstrap 5, with a full-width hero slider, a side category menu and a shopping bag in the header. The layout is responsive and mobile-ready and works in all popular web browsers. There are six pages: home, shop, product details, cart, checkout and help and contact.

The home page has a discount bar, a hero slider, two category tiles, new arrivals with category filter buttons, an offer band and customer testimonials. The shop page lists every product with category, price, colour and size filters and pagination, and each product has its own page with a photo gallery and zoom, sizes, quantity and information tabs. The cart has quantities, coupon codes, shipping methods and totals, the checkout has billing details, an order summary and payment methods, and the help and contact page has a contact form, FAQ, shipping, returns and policy sections. The demo shop works in the browser, so Karl gives you a ready-made front end for a clothing or accessories store.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a Bootstrap 4 beta and jQuery 2.2.4), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero, related products and testimonial sliders, PhotoSwipe 5 replaces Magnific Popup on the product photos, small built-in modules run the new arrivals filter and the scroll animations, the price slider is two native range inputs instead of jQuery UI, and Lucide SVG icons replace Font Awesome 4.7 and Themify icons. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.48 MB and 35 requests to 1.56 MB and 30 requests, the shop page from 3.11 MB to 1.64 MB and the product page from 2.42 MB to 1.39 MB. Every photo has an AVIF version with the JPEG as the fallback and real dimensions, and the logo is an SVG. The download is 5.92 MB (it was 4.21 MB) because it now includes the AVIF copies, the Sass sources with Bootstrap’s Sass, the self-hosted fonts, the build tools and seven new product images.
• No third-party requests: Open Sans is self-hosted, the social logos are a small Font Awesome subset (the Twitter bird is now the X logo), and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts.
• A working demo shop: the bag remembers its items from page to page, every product has Add to cart, a quick view and its own page, the shop filters by category, price, colour and size with pagination, the cart takes coupon codes and shipping methods and keeps the totals right, and the checkout checks the required fields and ends with a clearly labelled demo confirmation (no order is placed and no payment or data is sent).
• Working forms: the newsletter form on every page and the contact form on the new help and contact page send through php/send-email.php, with validation, a spam trap and an in-page message. Before, the newsletter form sent nowhere and there was no contact page.
• Accessibility: a skip link and landmarks on every page, one h1 per page, labelled controls, a category menu that works from the keyboard and closes with Esc, visible focus rings, 44 px slider dots and WCAG AA text contrast, with a deeper pink behind and in text, darker greys, shading behind the text on the category tiles and an opaque offer box (the lowest text contrast is now 5.33:1).
• Fixed: every product read “Jeans midi cocktail dress $39.90”, and each now has its own name, price and description; the cart total no longer disagrees with the line totals, and quantities stop at their limits; on phones the hero slider dots no longer cover the headline and no page scrolls sideways; and every link goes to a real page (four links pointed to missing pages and about 90 to #).