Overview

An HTML template for a shoes and bags store with eyewear and watches to wear with them — friendly, warm and commercial, on a lime-plaster blush. Solea ships three home pages, a light and a dark theme, right-to-left support, a euro / pound / dollar switch, and the answers a shoe and bag shop is asked every day, worked out rather than typed in: your size from your foot in every system and your width fitting, what fits inside a bag, which frames suit your face, which watch case suits your wrist, and the day your returns window closes — with a full shop around them.

What’s included

• 3 home pages with their own headers and scroll moments: Shoes & Bags (a court shoe’s heel rises from flat to 100 mm), Eyewear (a pair of sunglasses folds and unfolds, its numbers measured) and Watches (a watch’s strap swaps from leather to mesh to canvas, beside a side header)
• The shoe size converter: foot length and width to EU, UK, US women’s and men’s, Mondopoint and 4 width fittings, the shoes in stock in that size and fitting, the full chart
• Bag size compare: three bags drawn to one scale with what you carry (10 everyday items, from a phone to a 15" laptop), how full each one is
• Eyewear frame sizes from your face or the numbers on your frames; every frame measured; a lens builder
• Watch fit from your wrist and a strap builder in leather, mesh or canvas, drawn as you choose
• The returns window from any order date, the five-step return request, order tracking, and every order in the account with its window
• The shop: 25 products in 4 categories with colours, EU sizes and the pairs left, fittings and heel heights; filters, quick view, two product layouts, bag, coupon, delivery zones, VAT, checkout with an order number, wishlist, lookbook and gift cards
• Stores with open now from each store’s hours, services with a repair quote, team, journal, FAQ with search, account pages, coming soon with a countdown, 404
• A white theme by default and a dark theme on one switch, remembered and applied before the page paints; a flag language picker with right-to-left stylesheets
• The Footsteps preloader, Step In card reveals, a stride of footprints under a card on hover, the Plaster Wash WebGL layer and a tote strung in thread in the footer
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open solea/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the converter, the bag compare, the frame finder, the strap builder, the returns window and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the solea/ 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 stores, the size chart, the fittings, the bags, the frames, the watches, the returns rules, the products and the shop rules live in one place — see Store 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 solea/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

solea/
├── *.html                              the 32 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 (40 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
        ├── banner/                      9 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── hero/                        9 files
        ├── icons/                       30 files
        ├── logo/                        7 files
        ├── look/                        23 files
        ├── menu/                        3 files
        ├── shop/                        42 files
        └── team/                        6 files

To publish the site, upload the contents of solea/ 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 --se-jade-rgb) — change both together.

White is the ground and plaster the warm bands — best sellers, the heel moment, the fit guides’ tables; ink sets the type, the black pill buttons and the footer. Jade is the one accent: sale flags, the counts in the header, a chosen size, the footprints, the logo’s sole. Product photographs sit on the pale plate. --se-bg, --se-surface, --se-panel, --se-heading and --se-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). Each product colour has its own swatch class (.sw-<product>-<colour>), written from the data block.

Fonts

Two Google Fonts are loaded in the head of each page: Arsenal (every heading, light and large) and Jost (body text, the menu, the buttons and the small labels in capitals). Swap them by editing the Google Fonts link and the --se-ff-head / --se-ff-body variables.

Logo

The logo is the word SOLEA in Arsenal capitals with its O drawn as a shoe-sole print in jade. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering, for white grounds (every header in the light theme, the mobile menu)
• logo-light.png — white lettering, for the header over the hero, the dark theme and the footer
• logo-word.png / logo-word-light.png, sole.png and sole-ring.png — the word without its O, the print and the O, for the preloader, where the last footstep lands and becomes the O
• favicon.png — the white sole print on a jade 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

Solea 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 solea-theme and applied by a one-line script in the <head> before the page paints. 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 shoe, the sunglasses, the foot, the watch preview) read their inks from --cv-ink, --cv-jade and --cv-muted, which the dark block swaps (the sole’s --cv-leather stays the same in both themes); the plaster wash reads --gl-1 to --gl-3.
• Logo and icons — the light logo shows on photographs and in the dark theme; each drawn icon ships in an ink and a light version and the right one shows by theme.
• 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.

Store Logic

The figures on every page come from one data block, JS block 09 Solea Data near the top of main.js (var SOLEA = { … }). Change a store’s hours, a size in the chart, a fitting, a bag’s inside, a frame’s numbers, a strap price or a product there and every page follows: the cards, the filters, the fit guides, the bag and the worked examples below. Prices are in euros with VAT included; the currency switch converts at EUR 1, GBP 0.86, USD 1.09.

The stores and the clock

Chiado, Lisbon, Mon 10:00–20:00, Tue 10:00–20:00, Wed 10:00–20:00, Thu 10:00–21:00, Fri 10:00–21:00, Sat 10:00–20:00, Sun 11:00–19:00; Santa Catarina, Porto, Mon 10:00–19:30, Tue 10:00–19:30, Wed 10:00–19:30, Thu 10:00–19:30, Fri 10:00–20:30, Sat 10:00–20:30; Fuencarral, Madrid, opening soon. Every “open now” line follows the visitor’s own clock and turns into “closed, opens …” out of hours; orders before 14:00 on a weekday leave the same day.

Shoe sizes and width fittings

A size holds a foot up to its Paris point (two thirds of a centimetre a size) less 10 mm for the toes: EU n holds up to n × 20/3 − 10 mm. UK sizes come from the store’s chart, US women’s are UK + 2 and men’s UK + 1. The fitting is the foot’s width over its length: C narrow (under 37.0%), D standard (under 39.5%), E wide (under 42.0%), EE extra wide (above).

What fits inside a bag

Every bag carries its inside in centimetres; it holds 70% of that box in litres, because bags taper. An item fits when its face goes through the opening either way round with 1 cm to spare and its depth fits; the items together must stay within 80% of what the bag holds.

Frame sizes

A frame is two lenses, the bridge and two 5 mm end pieces wide. The Aurora Round Sunglasses (51 □ 20 – 145) is 132 mm, medium. A 128 mm face suits the frames within 4 mm: Aurora Round Sunglasses, Brisa Panto Sunglasses, Rio Round Frames, Teo Round Frames. The lens builder adds the coatings to an optical frame: the Rio Round Frames with a blue light filter and thin lenses is €149 + €35 + €60 = €244.

Watch fit and straps

A 16 cm wrist suits a 32 to 38 mm case and a small strap. The Classic 36 on mesh (+€20) with two spare mesh straps (€59 each) is €287.

The returns window

The window opens the day an order is delivered: the order day plus the method’s working days (standard 3, express 1, store pickup the next working day), then 30 days, 14 for sale pieces and 45 to exchange a size or a width; the last 5 days show as closing soon.

How the shop totals

Delivery by zone: Portugal €4.95 (free over €100, express €9.95); European Union €9.95 (free over €150, express €19.95); United Kingdom €14.95 (free over €200, express €24.95); United States & World €19.95 (free over €250, express €34.95). Prices include 23% VAT: the bag shows the VAT inside the total, not on top of it. The coupon comes off the goods before the free-delivery check.

The bag, the wishlist, the coupon, the orders and the saved size 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 the return request confirm on screen with a number — connect them to your own systems to take real orders.

WebGL & Drawings

One small WebGL shader draws the plaster wash — the blush bands as a lime-plaster wall, trowel smears and grain lit by a light that drifts slowly round. Each band is one canvas:

<canvas class="se-gl" data-gl="plaster" aria-hidden="true"></canvas>

• Its colours are --gl-1 (the plaster), --gl-2 (its shade) and --gl-3 (the light); the theme switch repaints them.
• It draws at half resolution, about thirty frames a second, only while on screen; visitors who prefer reduced motion get one still frame. Without WebGL, the band’s own plaster colour shows.

The footer’s tote is strung in thread between pins (data-string-bag, block 20): each thread starts slack and pulls taut as the footer comes into view, and a pointer passing over plucks the threads near it. The scroll moments are drawn on plain 2D canvases (data-heel-moment, data-fold-moment, data-strap-moment, blocks 21–23), each scrubbed against its own section’s travel without pinning the page, and settled in one frame for reduced motion.

RTL (Right To Left)

Solea 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) lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys solea-lang and solea-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 the card reveal (the heel is the other corner) mirror on their own. Prices, sizes and figures keep reading left to right inside their rows, and the drawings keep their own handedness.

JavaScript Guide

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

• Core every page shares — 01 Preloader, 02 Sticky Header, 03 Offcanvas Menu, 04 Scroll Reveals, 05 Back To Top, 06 Anchor Scroll, 07 Light & Dark Mode, Direction, 08 WebGL Layers
• Data and the shared parts — 09 Solea Data, 10 Search Panel, 11 Custom Select, 12 Currency, 13 Hero Sliders, 14 Card Sliders, 15 Accordion, 16 Filter Tabs, 17 Grid Search, 18 Newsletter, 19 Choice Cards
• The drawings — 20 String Bag, 21 Heel Moment, 22 Sunglasses Fold, 23 Strap Swap
• The store's logic — 24 Store Clock, 25 Shoe Size Converter, 26 Bag Size Compare, 27 Returns Window, 28 Eyewear Frame Sizes, 29 Watch Fit & Strap Builder, 31 Shop, 37 Order Tracking, 38 Gift Cards, 39 Repair Quote
• Forms and pages — 30 Contact Form, 32 Account Forms, 33 Account Page, 34 Article Tools, 35 Demo Forms, 36 Launch Countdown, 40 FAQ Search

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 drawings rest in one frame.

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 drawn icons 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. A product’s photographs are named in its colours in the data block (imgs: ['tejo-hobo-cognac'] loads img/shop/tejo-hobo-cognac.jpg).

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, return, 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 a v3 key pair in the Google reCAPTCHA admin console for your domain.
• Put the secret key in sendmail.php, replacing YOUR_RECAPTCHA_V3_SECRET_KEY.
• Add a hidden token field inside the form, and 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

• Bootstrap 5.3 — layout grid and utilities (MIT)
• jQuery 3.7 — DOM helpers (MIT)
• GSAP 3 + ScrollTrigger — reveals and the scroll moments (standard GSAP license)
• Swiper — sliders (MIT)
• Fancybox — lightbox and video popups (GPLv3 for open source)
• Font Awesome Free 6 — icons (CC BY 4.0 / SIL OFL / MIT)
• Google Fonts — Arsenal and Jost (SIL Open Font License)
• Flags — the language picker’s SVG flags (MIT)
• Photography — demo images for preview only, replaced by placeholders in the download

Support

If you have a question that this guide does not answer, contact us through the marketplace’s item support. Please include the page and, if possible, a screenshot. We answer within one to two working days.