Overview

An HTML template for a friendly lingerie and loungewear boutique with two shops, in London and New York: lace and silk, robes and soft knits, fitted by hand. Silkora ships three home pages, a light and a dark theme, right-to-left support, a pound / dollar / euro switch, and logic that is worked out rather than typed in: a bra fit calculator that turns the underbust and the bust into a band and a cup with the EU, French and US sizes and the sister sizes; a sets builder that prices a bra, a brief and a robe as a set; a fabric guide; fitting booking with each fitter’s days; gift cards with a balance check; order tracking; and a full shop with colours, bra sizes, sold-out sizes, a bag, coupon, shipping zones, collection from a boutique and VAT.

What’s included

• 3 home pages, each with its own scroll moment: The Set (a bra, its brief and a robe slide together into one set and the set price counts down), Fabric Drift (the swatches drift across with their names) and The Robe Belt (a drawn robe’s belt crosses and ties itself in a bow as you scroll)
• A white theme by default and a dark theme on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• A WebGL Satin Stitch — small flowers embroidered stitch by stitch along the edges of the blush bands, the page titles and the footer — and the footer’s silk bow, one twisting ribbon that sways and gives way to the pointer
• The fit calculator: centimetres or inches, bands 28 to 44, cups AA to J, the UK, EU, French and US sizes and the sister sizes; save it and the shop filters by it
• The sets builder: a bra, a brief and a robe in your colour and size, 10% off two pieces and 15% off three, in the bag as one set
• The fabric guide: 6 fabrics with what they are made of, stretch, breath, softness and sheen, and how to wash them
• Fitting booking in six steps: 4 kinds of fitting in two boutiques or on video, each fitter’s days and the free starts in the boutique’s own time zone
• Gift cards from £25 to £500 in three designs, as an e-card on a date or a boxed card by post; the balance check
• The shop: 24 pieces in 5 categories, colours that swap the photograph, bra sizes with sold-out sizes, quick view, the product page with the matching brief, bag, coupon, shipping zones, VAT included, collection from either boutique, checkout with an order number, order tracking, wishlist
• The lookbook with shop the look, the fitters and a fitter’s page, the boutiques with maps, the journal, FAQ with search, account pages, coming soon, 404
• Tissue Part preloader, Veil Lift photo reveals, soft-rise copy, a lace edge rising on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open silkora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the boutique clock, the fit calculator, the sets, the fittings, the gift cards, the tracking and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the silkora/ folder to your hosting provider using an FTP client (such as FileZilla) 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 controlled by CSS variables — see Colors & Fonts. The boutiques and their hours, the size tables, the pieces, the set rates, the fabrics, the fittings and fitters, the gift cards and the shop rules live in one place — see Boutique 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 silkora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

silkora/
├── *.html                              the 31 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (37 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── art/                         15 files
        ├── bands/                       7 files
        ├── banner/                      5 files
        ├── blog/                        7 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── gift/                        3 files
        ├── hero/                        14 files
        ├── icons/                       20 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── shop/                        53 files
        ├── strip/                       5 files
        ├── team/                        3 files
        └── tiles/                       6 files

To publish the site, upload the contents of silkora/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --sk-cherry-rgb) — change both together.

White is the ground and blush the warm bands, the tonal buttons and the fields; ink sets the type, the primary buttons and the footer. Cherry is the one accent — the sale and discount bands, the counters, the bow — and --sk-accent-text, a shade deeper, is the cherry used for small text so it reads on white. Cocoa washes the photo bands; satin is the ground of the drawings; the stars are yellow. --sk-bg, --sk-surface, --sk-panel, --sk-heading and --sk-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Work Sans (every heading in capitals, the menu, the buttons and the body) and Red Hat Display (the italic line under a title, and upright for the prices and figures). Swap them by editing the Google Fonts link and the --sk-ff-head, --sk-ff-body and --sk-ff-alt variables.

Logo

The logo is the word SILKORA in widely tracked Work Sans capitals with a small satin bow tied at the foot of the O. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering with a cherry bow, for white grounds (the headers in the light theme, the mobile menu)
• logo-light.png — light lettering with a blush bow, for the header over the hero photographs, the footer and the dark theme
• favicon.png — the bowed O on a cherry square, the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Silkora opens white: the light theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that dims the lights. The choice is saved in the browser under the key silkora-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees the white page first. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Drawings — the canvases (the robe, the bow) read their colours from --cv-ink, --cv-satin, --cv-satin-2, --cv-cherry, --cv-belt and --cv-paper, which the dark block swaps; the stitched flowers read --gl-1 to --gl-3.
• Logo, icons and lace — the light logo shows on photographs and in the dark theme; each illustrated icon, the dress form and the lace edges ship in a light and a dark version and the right one shows by theme.
• Plates — the shop’s white product plates stay light in the dark theme, framed by the dark card, so the pieces keep their true colour.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Boutique Logic

The figures on every page come from one data block, JS block 09 Silkora Data near the top of main.js (var SILKORA). Edit it once and the sizes, prices, sets, slots, dates and totals follow. Prices are in pounds sterling; the currency switch shows them in GBP 1, USD 1.27, EUR 1.17 (key silkora-currency), and prices written in the pages carry a data-gbp attribute so the switch can repaint them. Times are minutes after midnight (600 = 10:00 am); weekdays run 0 = Sunday to 6 = Saturday.

The fit calculator

Both measurements are read in inches (centimetres divided by 2.54). The underbust rounds to the nearest inch and up to an even number: that is the band. The bust rounds to the nearest inch; each inch over the band is one cup on the UK ladder (0 = AA, 1 = A …). The sister sizes are one band down and a cup up, and one band up and a cup down — the same cup volume.

Sets

A set is two or three pieces chosen together. In the bag its pieces share a set reference and take the set’s rate while every one of them is still in the bag; take one out and the others go back to their own price.

How the shop totals

Prices include VAT: the bag shows the VAT inside the total, not on top of it. The set saving comes off first, then the coupon off what is left, then the free-shipping check. Gift cards carry no VAT and take no coupon; a boxed card adds £3.50 and ships with the order; collecting from a boutique ships free.

Gift cards

A card is valid for 24 months from the day it is sent. The balance check finds it by its code and shows the value, what has been spent, the balance and the date it runs out.

The bag, the wishlist, the applied coupon, the saved size, the fittings and the orders are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 31 Shop) to []. Checkout and booking confirm on screen with a reference — connect them to your own systems to take real orders and appointments.

WebGL & Drawings

One small WebGL shader draws the Satin Stitch — small flowers embroidered along the edges of the blush bands, the plain page titles and the footer. Each flower outlines itself first, fills its petals stitch by stitch from the centre, holds, fades and is worked again elsewhere. Each layer is one canvas:

<canvas class="sk-gl" data-gl="stitch" data-gl-edge="top" aria-hidden="true"></canvas>

• Place — data-gl-edge picks the edges the flowers run along: top, bottom, both, left or right, so they stay clear of the copy.
• Colours — --gl-1 the floss, --gl-2 the accent floss, --gl-3 the light on the thread and --gl-alpha the strength. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

The footer’s silk bow is one ribbon swept along a spline through the bow’s shape: it twists along its length, turning edge-on to a line and showing its blush back, sways in a breeze and gives way to the pointer (data-bow, block 20). The scroll moments are drawn with plain markup and 2D canvases (data-set-moment, data-fabric-drift, data-robe-belt, blocks 21–23); their colours follow the theme tokens and they rest in their finished state for reduced motion.

RTL (Right To Left)

Silkora is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys silkora-lang and silkora-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own. Prices, sizes and figures keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 37 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Tissue Part preloader, the header, the Veil Lift and soft-rise reveals, the theme and direction switch and the WebGL Satin Stitch.
• 09–12 — Silkora Data, Boutique Clock, Custom Select, Currency. Silkora Data holds every figure; the Boutique Clock says which boutique is open now and when the next free fitting is; the pound / dollar / euro switch repaints every price.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, the newsletter, choice cards.
• 20–23 — Silk Bow, The Set, Fabric Drift, The Robe Belt. The footer’s silk bow (every page) and the scroll moments: a set coming together (Home 1), the fabric swatches drifting across (Home 2) and the robe’s belt tying itself (Home 3).
• 24–37 — Fit Calculator, Sets Builder, Fabric Guide, Fitting Booking, Gift Cards, Order Tracking, Contact Form, Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the fit calculator, the sets builder and shop the look, the fabric guide, fitting booking, gift cards with the balance check, order tracking, contact, the shop, accounts, the journal, demo forms, the countdown, FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the fabric swatches and lace pieces, the dress form, the illustrated icons, the gift card designs and the language flags are included and ready to use. All demo photography shown on the live preview, the product photographs among it, is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, fitting, gift card, checkout, tracking, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) 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 reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<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>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

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

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 popups.

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.