Designer Fashion HTML Template
A static HTML, CSS and vanilla JavaScript ecommerce template. No React, no jQuery, no Bootstrap JavaScript, no build step required.
Quick Start
Preview the template with any local HTTP server. The simplest option requires no installation:
python3 -m http.server 8080Then open http://localhost:8080 in a browser. Start from index.html (Home v1) and follow the navigation.
File Structure
All pages live in the package root. There is one shared stylesheet and one shared script — every page loads both.
| Path | Purpose |
|---|---|
assets/css/style.css | All styles — design tokens, layout, components, utilities, responsive rules |
assets/js/main.js | All behaviour — header/footer rendering, product data, interactions, state |
assets/images/ | Place your production images here; demo uses remote Unsplash URLs |
Documentation/index.html | This page |
LICENSE.txt | Envato license and third-party credits |
README.txt | Quick-start and page index |
CHANGELOG.md | Version history |
Page Coverage
| Section | Files |
|---|---|
| Home | index.html, home-02-editorial, home-03-minimal, home-04-sale, home-05-beauty, home-06-menswear, home-07-bags, home-08-department, home-09-lookbook, home-10-launch |
| Shop listing | shop.html, shop-02-top-filters, shop-03-minimal-grid, shop-04-sale, shop-05-beauty, shop-06-editorial, shop-07-compact, shop-08-large-cards, shop-09-brand, shop-10-search |
| Product detail | product.html, product-02-sticky-buy, product-03-minimal, product-04-beauty, product-05-lookbook |
| Cart & checkout | cart.html, empty-cart.html, checkout.html, order-success.html, order-failed.html, order-tracking.html |
| Account | account.html, account-orders.html, account-order-detail.html, account-addresses.html, account-payment.html, account-profile.html, account-rewards.html, account-notifications.html, empty-orders.html |
| Discovery | category.html, brand.html, brands.html, sale.html, new-arrivals.html, search-results.html, empty-search.html |
| Utility | wishlist.html, empty-wishlist.html, compare.html, quick-view.html, size-guide.html, gift-card.html, login.html, newsletter.html, landing.html |
| Editorial | blog.html, article.html |
| Support | faq.html, shipping.html, returns.html, contact.html, store-locator.html, appointment.html |
| Errors | 404.html |
| Brand & legal | about.html, accessibility.html, cookies.html, privacy.html, terms.html |
JavaScript Features
All behaviour is in assets/js/main.js. The file exposes the following named functions:
| Function | What it does |
|---|---|
renderHeader() | Injects the full header (announce bar, utility nav, search, logo, primary nav, mega menu) into [data-header] |
renderFooter() | Injects the footer (newsletter, link columns, legal bar) into [data-footer] |
renderMegaMenu() | Returns the mega-menu HTML string used inside the header |
renderProducts() | Fills every [data-products] mount with product cards; respects data-limit, data-compact, data-source="wishlist" |
toggleMobileNavigation() | Opens/closes the slide-in mobile nav; toggles nav-open on body |
applyListingFilters(filter) | Shows/hides product cards by category; updates the visible item count |
recalculateCart() | Recalculates cart line totals, subtotal and VAT from quantity inputs |
toggleWishlist(button) | Adds/removes a product from localStorage wishlist; shows toast feedback |
addToBag() | Increments the bag counter in localStorage and header; shows toast |
openMiniCart() | Slides in the mini cart drawer from the right |
openQuickView() | Opens the quick view modal overlay |
initSearchAutocomplete() | Attaches a suggestion dropdown to all search inputs |
showCookieConsent() | Shows the cookie bar on first visit (localStorage flag) |
showNewsletterModal() | Shows the newsletter modal once per session (sessionStorage flag) |
validateForm(form) | Validates required fields; highlights invalid inputs; shows toast |
backToTop() | Creates and manages the back-to-top button visibility on scroll |
Data Attributes Reference
| Attribute | Usage |
|---|---|
data-header | Mount point for the rendered header; add data-active="WOMEN" to highlight a nav tab |
data-footer | Mount point for the rendered footer |
data-products | Mount point for a product card grid |
data-limit="N" | Max number of products to render in a grid |
data-compact="true" | Uses 280px image height instead of 360px |
data-source="wishlist" | Renders only wishlisted products |
data-bg="URL" | Background image URL; set on .photo elements — JS writes the CSS at runtime |
data-h="280" | Overrides the default --h CSS variable for image height (pixels) |
data-filter="category" | Filter button; clicking it calls applyListingFilters() |
data-add-cart | Triggers addToBag() on click |
data-qty="1" / data-qty="-1" | Quantity +/− buttons inside .qty |
data-quick-view | Triggers openQuickView() on click |
data-newsletter-modal | Triggers showNewsletterModal() on click |
Customisation
Colors & Spacing
All design tokens are CSS custom properties at the top of assets/css/style.css:
--c-yellow: #ffe255; /* primary action */
--c-raisin: #212121; /* primary text */
--c-black: #000000; /* max contrast */
--c-white: #ffffff; /* page background */
--c-whisper: #f6f6f6; /* secondary sections */
--c-sale: #e30613; /* sale / error */Products
The demo product catalogue is defined as the products array near the top of assets/js/main.js. Each entry takes the shape:
{ id, brand, name, price, src, badge?, old?, color?, categories[] }categories drives the filter buttons on shop pages (e.g. 'bags', 'beauty', 'sale').
Images
Demo images are remote Unsplash URLs defined in the IMG object at the top of main.js. Replace them with paths to files in assets/images/ before going live.
Copy & Pages
Edit text directly in each .html file. The header and footer are JS-rendered — update their copy inside renderHeader() and renderFooter() in main.js.
Browser Support
Chrome 90+, Firefox 90+, Safari 14+, Edge 90+. The template uses CSS Grid, CSS custom properties, and localStorage — all baseline-supported in modern browsers.
Credits
- Demo images — Unsplash (Unsplash License, free for commercial use)
- Font — Arial (system font, no license required)
- Icons — Hand-drawn SVG paths by Webkoding
Support
Open a comment on the ThemeForest item page or email support@webkoding.com. Please include your purchase code and a description of the issue.