Verde — Slow Fashion eCommerce Template

Overview

Verde pairs a warm cream-and-sage editorial aesthetic — Cormorant Garamond display serif over clean Inter UI — with the entire storefront experience, not just a landing page. It's built in plain HTML, CSS and vanilla JavaScript: open any file in a browser and it works, with zero build step and no dependencies beyond a single Google Fonts request.

All 15 pages are interlinked through navigation, footer, breadcrumbs and CTAs, so the full eCommerce journey — browse, product, cart, checkout, account — works end to end out of the box.

Pages included

Folder structure

verde-clothes-template/
├── index.html          ← home
├── shop.html  product.html  cart.html  checkout.html
├── login.html  register.html  account.html  wishlist.html
├── about.html  contact.html  blog.html  blog-post.html
├── order-success.html  404.html
├── docs.html           ← this documentation page
├── css/
│   └── style.css       ← all styling, CSS custom properties at top
├── js/
│   └── main.js         ← qty steppers, size/color selectors, gallery, wishlist
├── assets/
│   ├── favicon.svg     ← site icon (linked in every page head)
│   └── images/         ← 27 photos (products, team, blog, hero, category, editorial)
├── CREDITS.md          ← photographer + source for every photo
└── README.md

Quick start

• Open any .html file in your browser. No build step, no install.
• Replace the dummy copy and prices with your own.
• Swap the included photos for your own product photography (see Photography).
• Update the brand name VERDÉ in the nav and footer (search the codebase).

Colors

Every color lives in CSS custom properties at the top of css/style.css. Change --sage to your brand color and --bg / --paper to your background — a handful of edits reskins the whole template.

:root {
  --bg:    #F5F1E8;   /* page background, warm cream */
  --paper: #FBF8F1;   /* cards, inputs, lighter cream */
  --ink:   #1A1A1A;   /* primary text + dark CTAs */
  --sage:  #7B8B6F;   /* brand accent (sage green) */
  --peach: #E8B59E;   /* secondary accent */
  --red:   #B94F3A;   /* sale tags, destructive */
  --green: #5C7C4F;   /* delivered status */
  --line:  #DCD7C8;   /* borders */
}

Typography

• Cormorant Garamond — display serif (headings, brand mark, large numbers).
• Inter — UI sans (body, buttons, labels, navigation).

To swap fonts, replace the Google Fonts <link> in each page's <head>, then update font-family on body and .serif in style.css.

Photography

The template ships with 27 real photos in assets/images/, already wired into every image slot through the CSS (see the IMAGES section near the bottom of style.css). All photos are from Unsplash under the free Unsplash License — see CREDITS.md for the photographer and source of each file.

To use your own photos, replace the file in assets/images/ and keep the same filename — no HTML or CSS edits needed. The mapping:

• product-1.jpg … product-12.jpg — shop / product / cart / wishlist images (4:5)
• cat-dresses.jpg, cat-tailoring.jpg — home category cards (product-4.jpg is reused for the Knitwear card)
• team-1.jpg … team-4.jpg — about-page team portraits (team-1 also serves as the blog author avatar)
• blog-2/3/5/7/9/11.jpg — journal cards and article images
• hero.jpg, editorial.jpg, post-hero.jpg — home hero, editorial bands, blog-post hero

Recommended dimensions: products 1100×1375 (4:5), team 860×1110, blog 1100×810, hero ~1600×900, at 70–80% JPG quality.

Brand & contact

Search and replace VERDÉ (uppercase) and Verdé (mixed case) across all .html files to set your brand name.

Replace the placeholder addresses hello@verde.studio and trade@verde.studio with your real email addresses.

Components included

The CSS is modular — any of these can be lifted into other projects:

• Sticky header with announcement bar and keyboard-navigable links
• Product cards with hover-swap imagery, quick-add and wishlist heart
• Filter sidebar with checkbox lists, color swatches and size grid
• Product detail with thumbnail gallery, qty stepper and accordion sections
• Cart line items with sticky summary
• 4-step checkout with payment method selection
• Form system (inputs, selects, textareas, checkboxes, helper text, errors)
• Auth cards (login, register, forgot password)
• Account sidebar, content blocks and orders table with status pills
• Blog grid and long-form article body styling
• Newsletter section, marquee and editorial split
• 404 and order-success pages

Responsive behavior

• ≥1100px — 4-column product grid, 2-column shop layout, 5-column footer
• 900–1100px — 3-column products, sidebar moves above the grid
• <900px — 2-column products; sidebar, footer and grids collapse; nav simplifies
• <700px — single-column hero/editorial, single-row PDP gallery

All breakpoints are handled with CSS Grid and clamp() typography. No JavaScript resize handlers needed.

Browser support

Latest two versions of Chrome, Safari, Firefox and Edge. Uses CSS Grid, custom properties, aspect-ratio and clamp(). :has() is not required.

Performance

• Total CSS ~40KB; total JS ~1.5KB (vanilla, no framework).
• ~5MB of optimized JPGs across 27 images — swap in your own to taste.
• Single Google Fonts request; no other third-party scripts.
• Each page averages ~6KB of HTML.

License

• Template code (HTML/CSS/JS): MIT — commercial use OK.
• Fonts: Cormorant Garamond and Inter — SIL Open Font License.
• Photography: Unsplash License (free for commercial use). Per-photo credits and source links are in CREDITS.md.