A sneaker store home screen built with Tailwind CSS: a greeting header, search, brand chips, a promo banner, a two-column product grid and a filter bottom sheet with a price range, size chips and sort options that really filter the grid. It is an HTML mobile template for mobile websites and PWAs and can be packaged as a native app with Capacitor. Use it as the home screen of a shoe store or streetwear app.
How it works
The root .ssh-app is a phone-width column with a sticky .ssh-tabbar at the bottom. Every product is an li with data-ssh-item and the data the filters read: data-brand, data-price, data-sizes (space-separated EU sizes), data-pop and data-new (sort ranks).
render() in script.js combines the active brand chip (data-ssh-brand, aria-pressed), the search text and the applied sheet filters, hides cards that do not match, re-orders the rest, updates the count and shows [data-ssh-empty] when nothing is left.
The filter button opens #ssh-filters, a native <dialog> bottom sheet. The price range is two stacked input type="range" elements; paintRange() colours the track between the thumbs through --ssh-lo and --ssh-hi, and the thumbs cannot cross. While you change values, the submit button previews the result count ("Show 3 results"). Submitting applies the filters and closes the sheet; Escape or a backdrop tap dismiss it without applying.
Customization
--ssh-accentand--ssh-inkon.ssh-appinstyle.css: the electric blue for the banner, badges and active tab, and the near-black for chips and buttons.min,maxandstepon[data-ssh-min]and[data-ssh-max]: price limits of the range slider.- Add a product by copying an
li.ssh-cardand setting itsdata-brand,data-price,data-sizes,data-popanddata-new. - Add a brand by copying a
.ssh-chipbutton with adata-ssh-brandvalue that matches the products. .ssh-tagmarks a card as New; remove it or change the text for Sale or Limited labels.- Replace the toast in the
.ssh-addclick handler withfetch()to your cart API.
Use cases
- Shoe and sneaker store apps: browse by brand, size and price.
- Sports and streetwear shops: a catalogue home with a filter sheet.
- Fashion marketplaces: reuse the sheet for size, price and sorting on any product list.
- Ecommerce PWAs: a mobile-first home screen with search and quick add to bag.
Accessibility
Chips and wishlist hearts are toggle buttons with aria-pressed, the count is announced with aria-live, and the filter button has a text label that includes the active filter count. The sheet is a labelled modal <dialog> with fieldsets and legends; the range inputs have labels and work with the arrow keys, and focus returns to the filter button on close. Animations respect prefers-reduced-motion.
Usage notes
The photos come from Unsplash; replace them with your own product images. Brand and product names are fictional. Bootstrap Icons and Plus Jakarta Sans load from CDNs.
