Work · Case study · Demo store
Solene — fine-jewelry demo store
A demo store I built on WordPress + WooCommerce with a Kadence child theme, centred on one product page: a personalised gold medallion with two finishes, three chain lengths and free engraving.
Overview
Built right from the start
The same checklist I audit client stores against — applied while building, not after.
Solene is a fictional fine-jewelry brand. Personalised jewelry is a hard sell online: the shopper is choosing a finish, a length and a word to engrave on something they can't hold, and nothing on a standard product page helps them picture the result.
Unlike Northcairn, there's no before/after here — this product page was built with these solutions from day one, so there's no honest “before” to show. Each block below names the problem it prevents and shows the solution as it runs on the live demo.
01 · Mobile gallery
Photos that say they swipe
On a phone the gallery shows one photo at a time — so it has to say there are more.
Problem
A swipeable mobile gallery with no indicator looks like a single photo. Shoppers see the first shot and scroll on, never reaching the close-up, the scale shot or the video.
Solution
A row of dots under the gallery. Each dot is a real button with a 44×44 tap target and a “Show slide N” label for screen readers. The active dot stretches into a filled pill, and it follows the swipe, not just taps.
Why it matters for conversion
With jewelry, the first photo rarely answers the real questions — how big is it, how does it sit, what does the engraving look like. Those answers are in the other slides, and the dots make sure people get to them.
02 · Sticky add to cart
The button stays in reach
On mobile, Add to cart sits above the fold — and the description, delivery and reviews are all below it.
Problem
Shoppers who scroll down to read the details, delivery terms and reviews leave the Add to cart button several screens behind. To buy, they have to find their way back up.
Solution
A slim bar slides up from the bottom once the main button has scrolled out of view: product name, live price and its own Add to cart. It hides again as soon as the main button is back on screen. If options aren't chosen yet, it scrolls back to them and focuses the first one instead of failing silently.
Why it matters for conversion
The moment someone finishes reading the reviews is often the moment they decide. The bar means the button is right there when that happens.
03 · Variant selection
The chosen option is obvious
Two finishes and three chain lengths — six combinations, and the shopper should always know which one they're on.
Problem
When the selected option looks almost like the others, it's easy to add the wrong finish or length without noticing — and with jewelry that often means a return or an exchange.
Solution
The active Finish and Chain length get a dark outline, a tinted background and a bolder label, and the chosen value is written next to each heading — “Finish: Polished Gold”, “Chain length: 18″”. The price in the buy box and in the sticky bar update together with the choice: the 20″ chain is 159 € instead of 149 €.
Why it matters for conversion
Fewer wrong-variant orders and fewer surprises at checkout, because the price the shopper sees always belongs to the combination they picked.
04 · Personalisation
See the engraving before you buy
An engraved piece is made for one person — the shopper needs to know what they'll get.
Problem
A plain text field asks the shopper to imagine the result: how a name will look in script, whether it fits the disc, whether an accent comes out right. Unsure, they hesitate or leave.
Solution
A live preview: as the shopper types, the text is drawn in script on a photo of the medallion with an SVG overlay. A counter shows “6 of 12 characters” and is announced to screen readers. The 12-character limit is enforced in the field and checked again on the server when the item is added to the cart, where the text is also sanitised.
Why it matters for conversion
Free returns only cover unengraved pieces, so doubt about the result is a real reason not to buy. Showing the engraving on the actual piece removes that doubt at the moment of choice.
05 · Structured data
Every variant visible to Google
Six combinations of finish and length, each with its own SKU, price and availability.
Problem
Out of the box, a variable product is described to search engines as one product with a price range. The individual variants — which finish, which length, what each one costs, whether it's in stock — stay invisible.
Solution
JSON-LD in the ProductGroup / Product pattern: one ProductGroup with variesBy color and size, and a Product for each of the six combinations with its own SKU, name, variant URL and Offer — price, availability and the return policy. It's the same approach I use on a real enterprise project with configurable products.
Why it matters for conversion
Search can match a query to the exact variant and its real price, and each variant URL opens the product page with that finish and length already selected.
{
"@type": "ProductGroup",
"name": "Soleil Medallion Necklace",
"productGroupID": "SOL-004",
"variesBy": [
"https://schema.org/color",
"https://schema.org/size"
],
"hasVariant": [
{
"@type": "Product",
"name": "Soleil Medallion Necklace – Polished Gold, 16\"",
"sku": "SOL-004-PG-16",
"inProductGroupWithID": "SOL-004",
"color": "Polished Gold",
"size": "16\"",
"offers": {
"@type": "Offer",
"url": "…?attribute_pa_finish=polished-gold&…=16-inch",
"price": "149.00",
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock",
"hasMerchantReturnPolicy": { "merchantReturnDays": 30, … }
}
},
… 5 more variants
],
"aggregateRating": { "ratingValue": "4.75", "reviewCount": 4, … }
}06 · Purchase trust
Answers right under the button
Delivery, returns, warranty and what other buyers thought — where the decision is made.
Problem
Before paying 149 € for a piece they haven't held, shoppers want to know how it ships, whether they can send it back and what other buyers thought. When those answers are buried in footer pages, they go looking — and some don't come back.
Solution
Three trust points with icons directly under Add to cart: free tracked delivery, 30-day returns on unengraved pieces, a 2-year metal warranty. Further down, a review summary with the average score and a breakdown by star rating (a real table, with a caption for screen readers). The same rating goes into the structured data as aggregateRating — only when the product actually has reviews.
Why it matters for conversion
The usual last-minute doubts are answered without leaving the page, and a breakdown by stars reads as more honest than a lone average.
Stack & result
Fast, accessible, readable by search
All of the above runs in a Kadence child theme on top of a standard WooCommerce store.
- WordPress
- WooCommerce
- Kadence child theme
- Self-hosted fonts
- JSON-LD structured data
Lighthouse scores for the demo store.
Let's start
Want a product page that sells like this?
The demo is live — open it on your phone, try the engraving preview, then send me a link to your own store.