Overview

An HTML template for a warm, polished jewellery and accessories boutique: fine jewellery in vermeil, solid gold and platinum, and an accessories edit of silk scarves, bags and sunglasses. Bijoura ships three home pages, a light and a dark theme, right-to-left support, a dollar / euro / pound switch, real-time WebGL rings and logic that is worked out rather than typed in: a ring-size guide in US, UK and EU; engraving with a live preview on the band; a bespoke ring builder priced line by line; metal and stone filters with a price and a photograph per metal; gift wrap with a note; gift cards; appointments in each boutique’s own time zone; and a shop with a bag, coupon, zones and sales tax.

What’s included

• 3 home pages, each with its own scroll moment: A Ring That Turns In The Light (a solitaire on four claws turns to face you as two studio lights sweep across it), The Stack (four rings slide one by one down a porcelain display finger as the list lights and the total rises) and The Engraving (a white-gold band tips to show its inside and the words are cut into it letter by letter)
• 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 silk-scarf print in the ivory bands and the page titles, and liquid gold swirling in a ring round the footer’s wordmark (a fluid simulation the pointer stirs)
• The ring-size guide: your finger’s circumference, a ring you own against a circle drawn at true size, or a size you know — US, UK and EU from one table of 21 sizes, saved and preselected on every ring
• The engraving studio: the words on the band as you type, three letter styles, inside $35 or outside $45, each piece’s own character limit, cut in 3 days
• The bespoke ring builder: 5 settings, 5 metals by the gram, 5 stones by the carat, the size, side stones and engraving, drawn live in WebGL and priced line by line with the weeks to make it
• The shop: 35 pieces in 10 categories, metal, stone, ring-size, price, search and sort filters, quick view, a price and a photograph per metal, sizes with stock, engraving on the line, gift wrap with a note, coupon, four shipping zones, sales tax, collection at a boutique, an order number to track, wishlist
• Gift cards, a lookbook with every piece one tap away, six collections, appointments in five steps, two boutiques open now in their own time zones and the dispatch cut-off
• About, the designers, a designer profile, the journal, FAQ with search, account pages, coming soon, 404
• Clasp preloader, Facet In photo reveals, soft-rise copy, a gift ribbon and bow on hover, Swiper sliders and Fancybox popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open bijoura/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the boutique clock, the ring sizes, the engraving, the bespoke prices, the appointments and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the bijoura/ 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, the metals and stones, the products and their prices, the ring sizes, the engraving, the bespoke rates, the gift wrap, the services 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 bijoura/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

bijoura/
├── *.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 (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/                         1 files
        ├── blog/                        5 files
        ├── cutout/                      4 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── gallery/                     20 files
        ├── hero/                        6 files
        ├── icons/                       34 files
        ├── life/                        13 files
        ├── logo/                        7 files
        ├── menu/                        3 files
        ├── panel/                       11 files
        ├── shop/                        58 files
        └── team/                        4 files

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

White is the ground and ink sets the type, the menu, the primary buttons and the footer. The four soft bands of a boutique window — ivory, butter, apricot and blush — carry the edits, the departments, the engraving and the quotes. Apricot is the one accent: badges, counts and button hovers, with deep apricot for the eyebrows and links on white. The packshot tile is the warm off-white every product sits on. --bj-bg, --bj-surface, --bj-panel, --bj-heading and --bj-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). The metal swatches on the product cards take their colours from the metals list in the data block.

Fonts

Two Google Fonts are loaded in the head of each page: Outfit (every heading, in tracked capitals, and the prices) and DM Sans (body text, the menu, the buttons and the small labels). Swap them by editing the Google Fonts link and the --bj-ff-head / --bj-ff-body variables.

Logo

The logo is the word bijoura in lowercase serif letters with a fine gold chain hanging under it in a swag, a small round stone at its lowest point. 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 — light lettering, for the headers over the hero photographs and the dark theme
• logo-word.png / logo-word-light.png — the word without its chain, for the preloader, where the necklace closes its clasp and settles under the word
• logo-ghost.png / logo-ghost-ink.png — the large faint watermark behind the boutique bands and the About copy
• favicon.png — the b with its swag and stone on an ink 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

Bijoura 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 bijoura-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; the four bands have their own dark values (--bj-band-ivory and the others).
• Packshots — the product tiles keep their light plate (--bj-plate) in the dark theme, so the photographs need no second version.
• WebGL — the scarf print reads --gl-1 to --gl-3 and --gl-alpha, which the dark block swaps; the rings and the liquid gold keep their metal in both themes.
• Logo and icons — the light logo shows on photographs and in the dark theme; each illustrated 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.

Boutique Logic

The figures on every page come from one data block, JS block 09 Bijoura Data near the top of main.js (var BIJOURA). Edit it once and the prices, sizes, fees, slots, hours and totals follow. Prices are in US dollars; the currency switch shows them in EUR 0.92, GBP 0.79 (key bijoura-currency), and prices written in the pages carry a data-usd attribute so the switch can repaint them. Times are minutes after midnight (660 = 11:00 am); weekdays run 0 = Sunday to 6 = Saturday.

The ring-size guide

Every way in ends at an inside circumference: a finger measured with a strip of paper, a ring’s inside diameter times π, or a size you know. The guide takes the first size at least that big (within 0.15 mm), so between two sizes it sizes up, and a wide band takes the next half size.

Engraving

The words are cut on the band in the WebGL preview as you type, within the piece’s character limit; the line in the bag is the piece’s price in its metal plus the fee for the place.

The bespoke ring builder

The setting’s making, plus the metal (the setting’s grams, 4% more for each size above 6, at the metal’s price per gram), plus the centre stone (its rate × carat^1.5, so the price per carat rises with the size), plus the side stones the setting adds, each rounded to five dollars, plus an engraving. The weeks are the setting’s plus the stone’s.

How the bag totals

The coupon comes off the pieces, and free US shipping is checked after it. Gift wrap is for the whole bag; sales tax is worked out on the pieces after the coupon, the wrap and the shipping. Gift cards are added on top, untaxed.

A gift card takes any whole amount between $25 and $1,000: a typed $1,200 becomes $1,000. The cut-off line in the top bar counts down to 3 pm New York time on weekdays (at 1:00 pm: two hours left) and otherwise names the next working day.

The bag, the wishlist, the coupon, the gift wrap and note, the saved ring size, the bespoke design, the appointments 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 29 Shop) to []. Checkout and appointments confirm on screen with a reference — connect them to your own systems to take real orders and bookings.

WebGL & Liquid Gold

The rings are drawn in real time with WebGL by the Jewel Renderer (block 10): a comfort-fit band, brilliant-cut stones with flat facets and fire, claws, a pearl and a porcelain display finger, lit by a soft studio of two strip lights. Jewel Scenes (block 12) put them to work — the turning solitaire (data-ring-light, Home 01), the stack (data-ring-stack, Home 02), the engraving (data-engrave-moment, Home 03), the engraving studio and the bespoke builder, where the ring can be turned by dragging. Each scene draws only while it is on screen; under reduced motion it shows its finished frame.

One small WebGL shader draws the scarf print — a silk-scarf chain print of oval links and links on edge riding slow silk folds — in the ivory bands and the plain page titles. Each print is one canvas:

<canvas class="bj-gl" data-gl="scarf" data-gl-side="1" aria-hidden="true"></canvas>

• Place — data-gl-side fades the print toward one side so the copy stays clear (1 strongest on the right, -1 on the left, 0 even).
• Colours — gold and apricot with a silk sheen: --gl-1, --gl-2, --gl-3 and the strength --gl-alpha. The theme switch repaints them.
• Performance — a print 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 liquid gold (block 21, data-liquid-gold) is a 120 × 120 stable-fluids simulation on a 2D canvas: a swirl and a pull to the ring’s radius keep the gold moving round the wordmark, lobes swell and travel, and the pointer stirs it. It runs only while the footer is on screen.

RTL (Right To Left)

Bijoura 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 bijoura-lang and bijoura-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, and the engraving reads left to right on the band.

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 Clasp preloader, the header, the Facet In and soft-rise reveals, the theme and direction switch and the WebGL scarf print.
• 09–13 — Bijoura Data, Jewel Renderer, Custom Select, Jewel Scenes, Currency. Bijoura Data holds every figure; the Jewel Renderer draws the rings in WebGL (band, brilliant-cut stones, claws, pearl, the display finger, the engraving) and Jewel Scenes stage them; the dollar / euro / pound switch repaints every price.
• 14–20 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, the newsletter, choice cards.
• 21–22 — Liquid Gold, Boutique Clock. The footer’s liquid gold (every page) and the boutique clock: open now in each boutique’s own time zone and the dispatch cut-off.
• 23–37 — Ring Size Guide, Engraving, Appointments, Bespoke Ring Builder, Gift Card, Contact Form, Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, Order Tracking, Lookbook & Search, FAQ Search. The feature pages: the ring-size guide, the engraving studio, appointments, the bespoke ring builder, gift cards, contact, the shop with the bag, gift wrap and checkout, accounts, the journal, demo forms, the countdown, order tracking, the lookbook and header search, 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 four rendered rings, the illustrated icons, the bow and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download. Where a piece comes in several metals, its white-gold and rose-gold photographs end in -wg and -rg; the product page swaps them as the metal changes.

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, booking, checkout, 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: Outfit, DM Sans

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.