Vellum — Free Fine Jewellery & Accessories Website Template
Vellum is a free single-page Bootstrap 5 template for a fine-jewellery and accessories boutique, built on a deep-emerald and antique-gold palette over pearl neutral. What sets it apart: it's product-led, not another editorial lookbook — a featured collection grid, scroll-snap bestsellers rail and budget-based gift guide do the selling, all driven by hand-written vanilla JavaScript with no jQuery.
Key features
- Full-height emerald hero with an infinite service marquee
- Featured collection grid with hover "add to bag" reveal on gold-framed cards
- Add-to-bag micro-interaction that pulses the header bag counter
- Budget-based gift guide with Everyday / Occasion / Heirloom tabs
- Scroll-snap bestsellers rail with prev/next controls that disable at the ends
- Auto-rotating press quotes with dot nav and pause-on-hover
- Materials & ethics section with four inline-SVG pillars
- Newsletter block with real front-end email validation and status messaging
- Vanilla JavaScript, no jQuery or icon fonts — drops onto strict-CSP hosts
Best for
- Fine-jewellery and accessories brands
- A single-page boutique or collection launch
- Whitespace-led, product-first storefronts
- Makers who want a gift guide and bestsellers rail
- Front-end for a headless commerce backend
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1 (single-page)
- Responsive: Yes
- Style: Fine-jewellery boutique — emerald & antique gold, delicate serif, whitespace-led
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Vellum free to use commercially?
Yes. Vellum is free for both personal and commercial use, so you can launch a real jewellery brand on it without a licence fee. There's no attribution requirement baked into the page.
Do I need Node, npm or a build step to run it?
No. Bootstrap's CSS and JS bundle are self-hosted inside the template, the two display fonts load from Google Fonts, and every interaction lives in one plain js/main.js. Just open index.html in a browser and it runs — there's no build tool, compiler or package install.
How do I change the colours and fonts?
The whole palette — emerald, antique gold and pearl — plus the type scale are driven from a single :root block of CSS custom properties at the top of css/style.css. Edit those variables to rebrand the entire template at once. The display type pairs Cormorant Garamond with Hanken Grotesk, which you can swap in the same file and the Google Fonts link.
Can I edit it without knowing how to code?
Mostly, yes. Copy is written directly in index.html and photos live in the img/ folder, so text and image swaps need only basic HTML familiarity. Restyling colours means editing a handful of clearly named CSS variables, no JavaScript required.
Is it responsive and mobile-friendly?
Yes. Vellum is built on Bootstrap 5's responsive grid and is designed to work across phones, tablets and desktops. The collection grid, bestsellers rail and gift-guide tabs all adapt to smaller screens.
How does the gift guide and add-to-bag actually work?
The gift guide filters products by tabs (Everyday, Occasion, Heirloom) using each card's data-tier attribute, so re-tagging a card moves it between tabs. The add-to-bag button is a front-end micro-interaction that pulses the header bag counter and confirms the add inline — it's a demo, not a live cart.
Can I use it as a real store that takes orders?
Not on its own. Vellum is a static front-end template, so the bag counter, add-to-bag and product links are demo interactions with no payment processing. To sell for real, wire the product cards and bag up to your own commerce backend — Shopify, WooCommerce or a headless API.
What pages and sections are included?
It's a single long-scroll page covering the hero, featured collection, atelier craftsmanship story, materials and ethics, bestsellers rail, press quotes, a budget-based gift guide and a newsletter block, plus a rich four-column footer. There's no secondary page to wire up — everything a jewellery launch needs sits in one file.
