Sylvane

Luxury Fashion & Atelier Ecommerce HTML Template · Version 1.0 · ThemeForest

Getting Started
Pages Overview
Customisation Guide
Typography & Fonts
Products & Data
Dark Mode
Currency Switcher
Cart & Wishlist
Image Credits
Support & Changelog

1. Getting Started

Sylvane is a zero-build, framework-free HTML theme. There is no npm, webpack, or build step required. Simply serve the folder with any static server.

Quick start

# Option A — Node.js
npx serve .

# Option B — Python
python3 -m http.server 8080

# Option C — VS Code Live Server extension
# Right-click index.html → Open with Live Server

Open index.html in your browser — this is the demo navigator linking to all 34 pages.

Note: Do not open HTML files directly via the file:// protocol. Some browsers block local script imports. Always use a local HTTP server.

2. Pages Overview (34 pages)

Homepage Variants (10)

File	Style
`home-classic.html`	Split hero, category rail, bestsellers grid
`home-editorial.html`	Newspaper masthead, pull quote, magazine grid
`home-minimal.html`	Type-driven product list with hover image peek
`home-grid.html`	Mosaic tile hero, circular category strip
`home-luxury.html`	Full-bleed dark hero, cinematic materials grid
`home-magazine.html`	3-column cover layout, editorial story grid
`home-campaign.html`	Full-bleed hero overlay, asymmetric new-in grid
`home-boutique.html`	Warm ivory palette, serif-led hero, round category tiles
`home-cinematic.html`	Dark multi-chapter scroll experience
`home-story.html`	Brand storytelling chapters with editorial imagery

Shop & Commerce (6)

File	Description
`shop.html`	Grid shop with filter drawer, sort, density toggle, compare bar
`shop-editorial.html`	Alternating full-bleed product rows
`shop-list.html`	Compact table view with hover peek and quick-add
`product.html`	Sticky gallery, size selector, size guide modal, accordions
`cart.html`	Qty steppers, gift note, promo code, order summary
`checkout.html`	3-step flow: Information → Shipping → Payment → Confirmation

Content & Brand (18)

about.html · journal.html · journal-post.html · lookbook.html · bridal.html · gift.html · contact.html · stockists.html · care.html · size-guide.html · shipping-returns.html · order-tracking.html · account.html · wishlist.html · privacy.html · terms.html · 404.html · index.html

3. Customisation Guide

Brand name & tagline

Edit window.ME_BRAND at the top of assets/data.js:

window.ME_BRAND = {
  name:    'Your Brand Name',
  tagline: 'Your tagline',
  cities:  ['City A', 'City B'],
};

Accent colour

The accent (used for alerts only, never as a CTA fill) is in assets/foundations.css:

--color-ferry-red: #b5132b;

Navigation links

Edit the links and cols arrays inside Nav and MegaMenu in assets/shared.jsx.

Announcement bar

Edit the phrases array inside Announce() in assets/shared.jsx.

4. Typography & Fonts

CSS Variable	Intended Font	Bundled Fallback
`--font-sans`	Forma DJR / Forma Nuovo	Montserrat (Google Fonts)
`--font-serif`	Times Now	Lora (Google Fonts)

After licensing your fonts, update the two CSS custom property declarations at the top of assets/foundations.css:

:root {
  --font-sans: 'Your Sans Font', Montserrat, sans-serif;
  --font-serif: 'Your Serif Font', Lora, Georgia, serif;
}

5. Products & Data

All product data is in assets/data.js as window.ME_PRODUCTS — an array of 16 product objects. Replace with your own:

{
  id:         'unique-slug',       // used in product.html?id=unique-slug
  name:       'Product Name',
  detail:     'Material / subtitle',
  price:      480,                 // base price in GBP
  category:   'Dresses',          // Dresses | Shoes | Bags | Shirts | Jewellery | Knitwear
  sizes:      ['XS', 'S', 'M', 'L'],
  material:   'Silk',
  isNew:      true,
  bestseller: false,
  image:      'https://your-cdn.com/front.jpg',
  image2:     'https://your-cdn.com/back.jpg',
}

Editorial images

Editorial photos are in window.ME_IMG in assets/data.js. Replace the Unsplash URLs with your photography. Keys: hero1–hero6, detail1–detail3, atelier1–atelier3.

6. Dark Mode

Toggled via the moon icon in the nav. Saved to localStorage as me_dark. Applied as data-theme="dark" on <html>. All dark overrides are in assets/foundations.css under [data-theme="dark"].

7. Currency Switcher

Supports £, $, and €. Conversion rates are in assets/data.js inside window.ME_FMT.price():

var rates = { '£': 1, '$': 1.27, '€': 1.17 };

Update these for production to match live exchange rates.

8. Cart & Wishlist

localStorage Key	Purpose
`me_bag`	Array of cart item objects
`me_wish`	Array of wishlisted product IDs
`me_dark`	Dark mode preference (`"1"` or `"0"`)

Demo promo code: WELCOME10 (10% off). Change PROMO_CODE in assets/pages/cart.js.

Free shipping threshold: £200. Change SHIP_FREE_AT in assets/pages/cart.js.

9. Image Credits

All editorial photography is from Unsplash (free for commercial use, no attribution required). Product placeholder images are inline SVG data URIs. Replace all images with your own photography before launching.

Unsplash License: https://unsplash.com/license

Image files (assets/images/)

File	Photographer	Source
`hero1.jpg`	Unsplash Community	unsplash.com
`hero2.jpg`	Unsplash Community	unsplash.com
`hero3.jpg`	Unsplash Community	unsplash.com
`hero4.jpg`	Unsplash Community	unsplash.com
`hero5.jpg`	Unsplash Community	unsplash.com
`hero6.jpg`	Unsplash Community	unsplash.com
`detail1.jpg`	Unsplash Community	unsplash.com
`detail2.jpg`	Unsplash Community	unsplash.com
`detail3.jpg`	Unsplash Community	unsplash.com
`atelier1.jpg`	Unsplash Community	unsplash.com
`atelier2.jpg`	Unsplash Community	unsplash.com
`atelier3.jpg`	Unsplash Community	unsplash.com

Note for buyers: All Unsplash images are licensed for commercial use. However, for your live site you should replace these demonstration images with your own photography or properly licensed stock images to ensure your brand identity is unique.

Third-party libraries

Library	Source	Licence
React 18 + ReactDOM	unpkg.com/react@18	MIT
Babel Standalone	unpkg.com/@babel/standalone	MIT
Lora (serif fallback)	Google Fonts	SIL Open Font Licence
Montserrat (sans fallback)	Google Fonts	SIL Open Font Licence
Editorial photos	Unsplash	Unsplash Licence

10. Support & Changelog

For support, use the Envato comments tab on the item page or email support@webkoding.com. We respond within 48 hours on business days.

Changelog

Version	Date	Notes
1.0	May 2026	Initial release — 34 pages, 10 homepage variants, full dark mode & currency switcher