Free jewelry website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: oriel.md, data: oriel.json

Jewelry website template: first screen on a phone

About this jewelry website template

Jewelry website template: one free HTML page for an independent goldsmith, with prices by piece, a five-sitting process, a stand-in ring offer for proposals, three remade-piece stories, a care price list and an appointment form. Coral, lilac and near-black panels sit on a pale grey page. An AI agent can adapt the single file.

At a glance, October 2026. One 107 KB index.html with its CSS and JavaScript inside, 12 sections, 26 Unsplash photos credited in CREDITS.md, Instrument Sans and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Built for a bench jeweller who sells by appointment: engagement rings, wedding bands, repairs and remade family gold. A silversmith, engraver or watch repairer with a few makers can reuse the structure. Jewelry website design of this kind explains the process and the prices before anyone visits, so people arrive knowing what a commission costs. It has no shop, cart or checkout, and it is a jewellery website template for a workshop, not a store.

Vibe coding with Claude Code, Cursor or Codex goes fastest when you give the agent the facts only the workshop has: starting prices per piece, service prices, lead times, the assay office, makers and roles, hours and address. The agent should replace the prices, the five sittings, the stories and the makers first. The footer wordmark and each sitting name carry an inline --len; set it to the character count of every new name.

Pick it for a studio with a process to show and visits to book. A business that sells stock and ships it needs a shop, and the flower shop template at least shows delivery and standing orders. The weak spot is length: the pieces strip holds the screen for about four item widths of scroll, and the makers section for about 1.4 screens. Owners who do not code can use 8B's no-code builder instead.

Good for:

Goldsmith or custom jewellerJewellery repair and valuation studioSilversmith, watchmaker or engraver with a few makersAny craft studio that sells by appointment and shows a process

Turn the jewelry website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make it the site for <my studio: name, city, what we make and repair, starting prices, service prices, lead times, hallmarking office, makers and roles, hours, booking, legal name and company number>. Replace first the studio name, the five pieces, the five process steps, the three stories, the makers and the care prices. Keep the section ids, the classes AGENTS.md lists and each --len set to its name's character count. Ask me for missing facts; never invent hallmarks, carats, reviews, quotes or contacts.

In a terminal

npx degit 8bsite/jewelry-website-template my-site

Jewelry website design and motion

Palette

#eeeef1 page background and the nav bar once it floats#121014 text, the pieces, makers, menu and footer grounds, the middle story card, the booking form, the small fused pills of the contact facts and the photo caption, rules in the sittings list#e9736a the opening panel, buttons, the free-cleaning pill, piece prices, the logo dot, the 'You' circle, the open question's plus#8e8a75 the sittings ground, the first story card, the empty backing of photos#cdcae8 the stand-in and care grounds, the third story card#ffffff text on dark grounds, the fused photo pills, price pills, an opened question#5b5a63 small text in the metal rows, care prices, the empty frames of the pieces strip#aeacb6 secondary text on near-black: piece lines, makers' roles, footer labels, the form status line

Fonts

Instrument Sans: headings in regular weight, body text, labels, buttons and form fields; a variable font whose width axis widens the sitting names and the footer wordmark, at weight 650 for those display lines
Source Serif 4: the second line of each heading, in upright regular weight, and the italic label of the valuation button on the first screen

A pale grey page cut into full-width bands of different grounds. Every section heading has two voices, a sans line and a serif line, stacked. Photos are tall frames, circles or pills. In the metal section round photos fuse to white pills through a curved neck; the stand-in points use the same pill with an icon, the contact facts a smaller near-black one. Sittings are a numbered list with a round photo on the right. Stories are three stacked cards.

Most bands change ground: a coral opening panel, near-black pieces and makers, khaki sittings, lilac for the stand-in offer and the care prices. The sitting names widen from narrow and light to wide and bold as they cross the reading line, and the footer wordmark stretches to fill the page.

Every value of this jewelry website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the jewelry website page

Navigation
A Menu button, the wordmark with a dot, a Price Guide button and a call button with the founder's round photo; a full-screen menu with nine links
The bar turns into a floating pill after 40 px of scroll, slides away when you scroll down and returns on scroll up; the Menu button opens a full-screen overlay and pauses smooth scrolling.
Every Drawer Holds A Ring Waiting To Be Made.
One big rounded coral panel: a heading in two voices, a paragraph, six badges, a valuation button and a photo of an old jewellery box with a caption pill
On load the coral panel grows from slightly smaller and its heading, paragraph, badges and button rise in turn; nothing moves on scroll.
What Leaves Our Bench Most Weeks
A held screen where five tall piece frames travel sideways as one strand, curving up in the middle
Pinned: the five frames travel sideways as one strand, each riding a curve, upright and highest in the middle and lower and tilted at the edges, while its photo slides inside the frame.
Where Our Metal Comes From
Where the metal comes from: an intro and three rows, each a round photo fused to a pill
The two heading halves slide in from opposite sides as you scroll, and each row's round photo starts smaller and tucked into its pill, then slides out to full size.
Five Sittings From Drawer To Hand
Five numbered sittings from sketch to hand-over; each name swells wide and bold as it crosses the reading line and its photo circle grows
As each sitting crosses the reading line its name widens from narrow and light to wide and bold and its photo circle grows from about half size, then both fall back.
Proposing? Use A Stand-In.
A tall photo beside a pitch for a silver stand-in ring, three points and a button
The photo opens from a rounded inset to the full frame while the picture settles, the heading halves slide together and the three points settle into place.
Three Pieces That Came Back Different
Three remade pieces as stacking cards, each with the story, a quote and a came-in and came-out photo pair
The cards are held with staggered offsets, so each new card slides over the one before, which shrinks to 92 percent.
Four At The Bench And A Seat For You
Four makers and an empty seat for the visitor: round portraits start as a small cluster and spread into a row
Pinned for about 1.4 screens: the circles begin as a small overlapping cluster and spread into a row, then names and roles fade in.
Asked At The Counter
Five questions and answers (native details) with a phone line
The heading halves slide in from opposite sides; the questions open with a plain click.
Looked After For As Long As You Wear It
A care promise and eight price pills that settle from a scatter into one block
The eight pills start scattered and tilted and settle into one block as it scrolls up, the free pill first.
Come Round To Tanner's Wynd
Address, hours, phone and email as fused pills, a shop photo and a booking form
The heading halves slide together, the three fused facts settle and the shop photo opens from a rounded inset.
Footer
Address, hours, contacts and five links above a huge wordmark that widens as you scroll, then the legal line
The wordmark's font width runs from 75 to 100 as the footer comes up, which stretches it across the page.

Before you publish the jewelry website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Price Guide button in the header lead to #care now; point them to your price list page, or keep it on the care and prices section.
Talk To A Goldsmith button in the header lead to a tel: link to the studio phone, labelled with the founder's name now; point them to your own number and the name of the person who answers.
Book A Free Valuation button in the first screen lead to #contact now; point them to your booking calendar URL, or keep it on the form.
Read Our Questions button in the gold section lead to #faq now; point them to keep it, or point to a longer sourcing page.
Ask About A Stand-In button in the proposing section lead to #contact now; point them to your enquiry form or an email link.
Request A Time button of the Book A Visit form lead to action="#" with method post; a script checks the name and email, clears the form and shows a thank-you line, nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler; drop the preventDefault in section-script:contact when you do.
Email us link in the contact block and the email in the footer lead to mailto links to the studio address now; point them to your studio address.
The booking form is a demo: with JavaScript it only checks the name and email, clears itself and shows the thank-you line; without it the form posts to #.
The pieces section holds the screen for about four item widths of scroll and the studio section for about 1.4 screens, which is long on short laptop screens.
On phones the stacking story cards are compressed into a smaller layout with a small came-in photo; long stories may be tight.
gsap, ScrollTrigger and Lenis load from CDNs before the motion scripts; offline they are missing and the motion does not run.

Questions about this jewelry website template

Is this one of the free jewellery website templates, and can I use it for clients?

Yes. It is a single index.html under the MIT license, so a freelancer doing web design for jewelers can ship it for clients at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, the fonts from Google's servers, and there is no build step or CMS. The photos are Unsplash images listed in CREDITS.md.

Can I take online orders with it?

No. There is no cart, checkout or stock list. Pieces show a from price as plain text, and the buttons lead to the questions, the care prices, the phone link or the booking form. To sell online, point the buttons at your shop platform or choose a template built for it.

Does the booking form send anything?

No, not as shipped. A script checks the name and email, shows a thank-you line that promises a reply within a working day, and clears the form. Without JavaScript the form posts to #. Connect Formspree or Netlify Forms, and rewrite the promise to match how you reply.

How do I give it to an AI agent, and what must stay?

Download index.html and AGENTS.md into one folder and paste the prompt above into Claude Code, Cursor or Codex. The agent keeps the ids and the data-8b-section, data-8b-motion and data-8b-part attributes. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

What happens on a phone, with reduced motion or without JavaScript?

On a phone the pieces strip still runs sideways, the makers and prices reflow and story cards compress. With reduced motion, entrance and scroll animations and smooth scrolling are off, while the nav bar still hides on scroll and buttons react to hover. Without JavaScript the Menu button cannot open its overlay; the questions and footer links still work.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and its engine designs a new site, its own design, not this template. Designing is free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a jewelry website? More free templates