Overview

A soft, pastel HTML template for women’s fashion shops: knitwear, dresses, tailoring, shoes and bags, chosen to pair. Capsula ships three home pages, a light and a dark theme, right-to-left support, and shop logic that is worked out rather than typed in: a capsule builder that counts the outfits ten pieces make, a size finder that gives a size per fit, click and collect per boutique and per size, new in by week, gift cards and the full shop engine.

What’s included

• 3 home pages, each with its own scroll moment: the capsule’s ten pieces fill its rail as the outfit count climbs, fitting-room curtains draw back on each look, and a tape measure wraps a dress form as the sizes tick
• A capsule builder: up to 10 pieces, the outfits they make counted live, the colour rule, bundle savings (5 pieces 5%, 8 pieces 10%, 10 pieces 15%)
• A size finder: bust, waist and hips give a size for fitted, regular and relaxed pieces, saved and suggested on every product page; shoe sizes from the foot
• 36 products in 7 categories with colours, sizes in stock, fit, material and arrival date; size runs on every card, quick view, filters and sort
• Click and collect at 3 boutiques, per size: on the rail or from the warehouse, with live ready times and open-now lines
• New in by week, gift cards (e-gift or posted, any amount from $25 to $500) with a balance check, delivery rates and a returns-window checker
• Bag with colour and size lines, capsule bundles and gift cards, a free-delivery meter, discount code, tax and a three-step checkout (delivery or collect) with an order number; order tracking; an account with saved sizes and the capsule
• Light and dark mode, right-to-left stylesheets with a flag language picker, WebGL tulle layers and a footer garment that turns from a dress into a coat into a jumpsuit
• Fold Up preloader, Hanger Settle reveals, Swiper sliders and Fancybox galleries
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Capsula. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open capsula/index.html in any modern browser. No build tools or server are required — the shop, the bag, the capsule builder, the size finder, gift cards and click and collect all work straight from the files.

2. Deploy to a server

Upload the contents of the capsula/ folder to your hosting provider using an FTP client or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are CSS variables — see Colors & Fonts. Products, sizes, boutiques, gift cards and shop rules live in one place — see Shop Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and capsula/, the template.

capsula/
├── *.html                              the 30 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── assets/
    ├── css/
    │   ├── style.css / style.rtl.css   all custom styles (and the right-to-left twin)
    │   ├── responsive.css / .rtl.css   breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    bootstrap (+ rtl), fancybox, swiper
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (39 blocks)
    │   └── plugins/                    bootstrap, gsap, jquery, fancybox, ScrollTrigger, swiper
    ├── fonts/theme-icons/              the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── art/                         6 files
        ├── banner/                      10 files
        ├── blog/                        9 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── icons/                       14 files
        ├── logo/                        4 files
        ├── look/                        40 files
        ├── menu/                        3 files
        ├── products/                    42 files
        ├── square/                      5 files
        └── team/                        6 files

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Colours used with transparency have an -rgb twin (for example --ca-accent-rgb) — change both together.

White carries the pages, ink the headings, the main buttons and the footer. The five pastel papers — blush, mint, peach, sky and lilac — are the section grounds, the page titles and the product tiles. Peony is the one accent: the shop’s main buttons, sale flags, the bag count, the capsule’s outfit count and every small accent line. Product swatch colours are generated from the data block into the Swatches section of the stylesheet (one class per colour, .sw-dusty-rose and so on).

Fonts

Two Google Fonts: Red Hat Display (headings, prices, figures) and Roboto (body, menu, buttons, labels). Swap them by editing the Google Fonts link and --ca-ff-head / --ca-ff-body.

Logo

The logo — CAPSULA in caps over a slim rule that starts with a peony tab, like the end of a tape measure — ships as PNG files in assets/img/logo/: logo.png (light grounds), logo-light.png (dark grounds and dark mode), the C mark (mark.png) and favicon.png.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved under capsula-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on <html>.

The dark colours live in the [data-theme="dark"] block right after :root. The pastel papers turn into dark tinted grounds; product tiles stay light so the photographs read the same; the footer stays ink in both themes.

Shop Logic

Every figure comes from one data block, JS block 09 Capsula Data (var CAPSULA) near the top of main.js. Edit it once and the cards, size runs, the builder, the finder, prices, dates and totals follow.

Products

Each product has its cat (category), role in a capsule (top, bottom, dress, layer, shoes, or extra for bags and accessories), fit (fitted, regular, relaxed), its colours (name, hex, colour family and an optional photo per colour), stock per size (XS–XL, EU 36–41 or one size), price (and was when on sale), added (days before today, for new in), its material, collection and tile colour. A size with no stock is struck in the size run and on the product page.

The capsule

An outfit is a top with a bottom, or a dress; worn with each layer or with none; with each pair of shoes (one look without when none are picked). It counts when its pieces carry no more than maxFamilies (2) colour families besides neutrals. Bundle savings: 5 pieces 5%, 8 pieces 10%, 10 pieces 15% (capsule.tiers).

Sizes per fit

chart holds each size’s bust, waist and hips range in centimetres. Each fit has a room: the size is the smallest whose top, plus the room, reaches the measurement — fitted pieces want a centimetre to spare (−1), regular ones the size you fall in (0), relaxed ones allow three under (+3). Tops use the bust, bottoms the waist and hips, dresses all three; a size per fit is the largest any of them needs.

Click and collect

Each boutique has its weekly hours (minutes from midnight, null when closed), the categories on its rails and a min: a size is on its rail when the warehouse holds at least that many. From the rail an order is ready 120 minutes after it is placed in opening hours, rounded up to the next 15 minutes (before opening: 120 minutes after it opens); a size from the warehouse reaches the boutique the next weekday at 12:00 pm. Orders are held for 7 days.

Delivery, discount, tax, gift cards and returns

Orders placed before 3:00 pm Monday to Friday leave that day; later ones the next working day. Standard delivery ($7.95) arrives 2 weekdays after dispatch and is free from $120; express ($14.95) arrives the next weekday; click and collect is free. The code SOFT10 takes 10% off everything but gift cards; tax is 9.5% of the goods after the discount (gift cards carry none). Gift cards run from $25 to $500 in $5 steps; a posted card adds $3.50; cards are valid 3 years and the balance check reads giftcards.issued. Returns are open 30 days from delivery or collection, 14 for sale pieces; free in a boutique, $4.95 by post.

The bag, wishlist, discount code, orders, the capsule, saved measurements and the delivery choice are kept in the browser (localStorage). The first visit starts with a small demo bag; set the demo lists in doShop() (block 28) to [] to start empty.

WebGL & Canvas

One small WebGL runner draws the tulle layer: four sheer sheets with gathered folds and wavy hems drifting and overlapping at the top and bottom edges of the page titles and the pastel bands. Each layer is one canvas:

<canvas class="ca-gl" data-gl="tulle" aria-hidden="true"></canvas>

Colours come from --gl-1, --gl-2, --gl-3 and --gl-alpha. The footer’s garment (canvas[data-garment], block 19) is drawn on a 2D canvas: a dress, a coat and a jumpsuit share eleven anchor points per side, and the outline moves from one to the next. The tape measure on Home 3 and the capsule rail on Home 1 are driven by the scroll. Everything runs only while on screen; reduced motion gets one still frame.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the flag language picker lists the languages that read each way. Choosing Arabic stores the direction (capsula-dir) and reloads; the head script sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated. To make a page right to left for good, add dir="rtl" to its <html> and load bootstrap.rtl.min.css, style.rtl.css and responsive.rtl.css in place of the three LTR files.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, organised into 39 numbered blocks:

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Tulle Layers. The core every page shares: the Fold Up preloader, the header, the Hanger Settle reveals, the theme and direction switch and the WebGL tulle layers.
• 09–10 — Capsula Data, Shop Engines & Clocks. Capsula Data holds every figure; the engines count a capsule’s outfits and price its bundle, find a size per fit, group new-in weeks and run the boutiques’ hours, click-and-collect and dispatch clocks.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, grid search, newsletter, choice cards.
• 19–24 — Garment Morph, The Capsule, Search, Capsule Builder, Size Finder, The Tape Measure. The footer’s garment morph and the scroll moments with the feature pages they belong to: the capsule filling its rail, the capsule builder, the size finder and the tape measure.
• 25–39 — Gift Cards, New In By Week, Contact Form, Shop Engine, Account Forms, Returns Window, Article Tools, Demo Forms, The Fitting Room, Quick View, Order Tracking, My Account, Launch Countdown, Shop By Mood, FAQ Search. The rest of the feature pages: gift cards, new in by week, search, contact, the shop (size runs, product page, bag, checkout, wishlist), accounts, returns, articles, demo forms, the fitting room, quick view, order tracking, the account, the countdown, the FAQ and Shop By Mood.

Each block is a self-contained doSomething() that skips pages without its section. Every animation respects prefers-reduced-motion.

Images

The package ships with neutral placeholder images at the correct dimensions. Replace them with your own using the same file names. Images are grouped inside assets/img/:

The logo files, the drawings, the icons and the language flags are included. All demo photography on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form posts to sendmail.php, a lightweight AJAX mail handler; the message appears under the button without reloading the page. The newsletter, checkout, comment and account forms are demo forms that confirm on screen. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs PHP mail() support. On a local computer or a static host it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the script with your site key:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Red Hat Display, Roboto

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popup.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.