Shionhouse

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Shionhouse is a fashion and clothing shop template for labels, boutiques and accessory stores, built on Bootstrap 5. It has a clean, light layout with a serif display face, a purple accent and large fashion photography. The layout is responsive and mobile-ready. There are eight pages: home, shop, product details, about, blog, blog post, contact and elements.

The home page opens with a full-width hero slider, then category cards that reveal a shop button, a grid of new arrivals with ratings and prices, a collection banner, two promo cards and a row of service highlights. The shop page has filters for category, type, size, colour and price beside the product grid, and the product page has a description, a photo gallery, a map that loads on click and a question form. You will also find an about page with the brand story, a blog with a sidebar, a blog post with an author box, comments and a comment form, and a contact page with a working contact form.

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 Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 runs the hero slider, PhotoSwipe 5 the lightbox, and native selects replace Nice Select; Lucide SVG icons replace the old icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all nine pages together went from 32.8 MB and 561 requests to 5.4 MB and 240 requests, and the home page from 12.8 MB to 1.3 MB. Every photo has an AVIF version with a JPG fallback, real dimensions and lazy loading below the fold.
• No third-party requests: the fonts are self-hosted and the map loads only after a click, with no API key.
• Working forms: the contact, product question, comment and newsletter forms send through an included PHP script with validation, a spam trap and sending, error and success messages. The header search lists matching products and the blog search matching posts.
• Accessibility: a skip link, one heading per page, labelled form fields and icon links, visible keyboard focus, keyboard-friendly menus and overlays, and text at WCAG AA contrast with a deeper purple and shades behind text on photos.
• New high-resolution product photos with names and prices for every item, fashion copy for the blog, about and product pages, and meta tags and structured data on every page.