LloydsFamilyJewellery

My role

Magento 2 / full-stack developer. I designed and built the storefront: the custom Lixup/lloyds theme, catalog and layered navigation, configurable products, Magento checkout with PayPal, Braintree wallets and 3-D Secure, Zendesk chat, Google Tag Manager, Page Builder merchandising, and production hardening on Magento full-page cache behind Cloudflare. Solo Magento 2 / full-stack developer. I designed and built the storefront end to end: the custom Lixup/lloyds theme, catalog and layered navigation, configurable products, Magento checkout with PayPal, Braintree wallets and 3-D Secure, Zendesk chat, Google Tag Manager, Page Builder merchandising, and production on Magento full-page cache behind Cloudflare.

[7 lines collapsed]

• MySQL
• Magento Page Builder
• Magento FPC
• Elasticsearch / catalog search
• Cloudflare
• PayPal / Braintree
• Zendesk

[1 line collapsed]

• Sentry
• Git / GitHub Magento 2 serves the storefront and admin. The frontend/Lixup/lloyds theme (Luma-based) handles layout, product galleries, and checkout UI. Knockout and RequireJS drive Magento UI components on the PDP and checkout. MySQL holds catalog, customers, and orders. Magento full-page cache plus Cloudflare sit in front. Payments go through PayPal and Braintree (Apple Pay, Google Pay, 3-D Secure). Live chat is Zendesk; analytics is GTM (GTM-T39P5WS) with Adobe tags. Errors go to Sentry. Magento 2 serves both the storefront and admin. The frontend/Lixup/lloyds theme (Luma-based) handles layout, product galleries, and checkout UI. Knockout and RequireJS drive Magento UI components on the product page and checkout. MySQL holds catalog, customers, and orders. Magento full-page cache plus Cloudflare sit in front. Payments go through PayPal and Braintree (Apple Pay, Google Pay, 3-D Secure). Live chat is Zendesk; analytics is Google Tag Manager.

---

Features

• Classic collections: engagement, wedding, eternity, dress and gemstone rings, diamond studs, pendants, tennis bracelets
• Lab-grown and natural (earth-mined) diamonds and gemstones, with IGI certificates where supplied
• Configurable products — ring size updates price, metal weight, and add-to-cart
• Lab-grown and natural diamonds and gemstones, with IGI certificates where supplied
• Configurable rings — size (and metal where offered) updates price, weight, and add-to-cart
• Layered navigation: metal, fineness, cut, diamond weight, band width, gem, price
• Wishlist, compare, customer accounts, and guest checkout
• Special vs regular pricing, price promise, and monthly finance examples on the PDP
• Special vs regular pricing, a price promise, and monthly finance examples on the product page
• Checkout with PayPal, cards, Apple Pay / Google Pay, and 3-D Secure
• Finance from £299–£10,000 via Omni Capital (0% for 6–12 months, or longer APR) — applied after the order, not as a fake in-checkout loan
• 0% finance from £299–£10,000 via Omni Capital, arranged after the order rather than as a fake in-checkout loan
• Trustpilot reviews, 12-month manufacturer guarantee, 30-day cancellation, UK assay hallmark copy
• Zendesk live chat plus WhatsApp, Messenger, and Instagram
• CMS: about, diamond guide, FAQ, guarantees, blog (Mirasvit)
• Gift packaging messaging and plain outer parcels for surprises
• About, diamond guide, FAQ, guarantees, and blog CMS pages

---

[53 lines collapsed]

Shopper->>Store: Browse collections and filters
Store-->>Shopper: Category grid with layered nav
Shopper->>Store: Open PDP, pick ring size
Shopper->>Store: Open product, pick ring size
Store-->>Shopper: Updated price and add to cart
Shopper->>Store: Checkout as guest or account

[9 lines collapsed]

Maker-->>Shopper: Royal Mail Special Delivery / FedEx

1. **Shopper** lands on classic collections or search, then filters by metal, cut, and diamond weight.
2. On the **PDP** they pick a ring size (and metal where the product is configurable); Magento updates price and stock.
1. **Shopper** opens a collection or search and filters by metal, cut, and diamond weight.
2. On the **product page** they pick a ring size (and metal where the product is configurable); Magento updates price and stock.
3. They add to cart as a **guest** or from a customer account; wishlist and compare stay available.
4. **Checkout** takes PayPal, card, or Apple Pay / Google Pay with 3-D Secure. Finance is a checkout flag: the order is placed, then Omni Capital sends a portal link the next working day.
5. **Admin** routes the order to a UK manufacturer when the piece is made to order (often several weeks for gold and platinum).
4. **Checkout** takes PayPal, card, or Apple Pay / Google Pay with 3-D Secure. Finance is an order flag: Magento places the order, then Omni Capital sends a portal link the next working day.
5. **Admin** sends made-to-order pieces to a UK manufacturer (often several weeks for gold and platinum).
6. Dispatch is **Royal Mail Special Delivery** (UK, next day by 1pm) or **FedEx / International Signed For**, in plain outer packaging.
---

[2 lines collapsed]

### Configurable rings without breaking full-page cache
**Challenge:** Ring size and metal change price, metal weight, and stock. Magento FPC was serving `HIT` category and CMS pages, but a fully cached PDP would show the wrong price after a swatch change.
**Challenge:** Ring size and metal change price, metal weight, and stock. Magento full-page cache was serving `HIT` category and CMS pages, but a fully cached product page would show the wrong price after a swatch change.
**Solution:** FPC stays on for collections and content. Configurable options load through Magento UI components. The price box and inventory update on swatch change over XHR, so the cached HTML shell does not have to be unique per size.
**Solution:** Full-page cache stays on for collections and content. Configurable options load through Magento UI components. The price box and inventory update on swatch change over XHR, so the cached HTML shell does not have to be unique per size.
### Jewellery filters that match how people shop

[3 lines collapsed]

### Lab-grown and natural diamonds in one catalog
**Challenge:** The same store sells lab-grown and earth-mined stones. Mixing them in one PLP, or reusing “conflict-free natural” copy on a lab-grown PDP, would break trust and IGI claims.
**Challenge:** The same store sells lab-grown and earth-mined stones. Mixing them on one listing, or reusing “conflict-free natural” copy on a lab-grown product, would break trust and IGI claims.
**Solution:** Separate categories and attributes for lab-grown vs natural. PDPs carry IGI where it applies, diamond grade (colour / clarity), and a diamond guide CMS page. Guarantee copy states no fracture-filled stones and UN-compliant natural sourcing.
**Solution:** Separate categories and attributes for lab-grown vs natural. Product pages carry IGI where it applies, diamond grade (colour / clarity), and a diamond guide CMS page. Guarantee copy states no fracture-filled stones and UN-compliant natural sourcing.
### Checkout that is PCI-ready — and finance that is not a fake loan widget

[3 lines collapsed]

### High-resolution jewellery photography on mobile
**Challenge:** Fotorama galleries of claw settings and diamond tables are heavy. The store must look close-up on a phone without stalling add-to-cart.
**Challenge:** Product galleries of claw settings and diamond tables are heavy. The store must look close-up on a phone without stalling add-to-cart.
**Solution:** Magento product image cache with versioned `/static/` and `/media/` URLs, Fotorama for the gallery, and Cloudflare in front. The Lixup theme uses Magento’s responsive image sizes so the PDP does not ship the desktop master file to a 375px viewport.
**Solution:** Magento product image cache with versioned `/static/` and `/media/` URLs, Fotorama for the gallery, and Cloudflare in front. The Lixup theme uses Magento’s responsive image sizes so the product page does not ship the desktop master file to a 375px viewport.
### Honest pricing when everything is already on special
**Challenge:** Almost every PDP shows Regular Price vs Special Price. A “sale” that never ends, plus a price-promise form, is easy to get wrong if Magento catalog rules and MSRP drift.
**Challenge:** Almost every product shows Regular Price vs Special Price. A “sale” that never ends, plus a price-promise form, is easy to get wrong if Magento catalog rules and MSRP drift.
**Solution:** Special prices live in Magento catalog price data (with `Magento_Msrp` and `Lixup_PriceDecimal` for jewellery-accurate decimals). The price-promise path is a reviewed match against the same SKU, not a coupon layer, so the special price on the PDP is the real ticket.
---
## Running this portfolio
This repository is a Next.js site that presents the Lloyds Family Jewellery case study above. Live store: [lloydsfamilyjewellery.co.uk](https://www.lloydsfamilyjewellery.co.uk/).
```bash
npm install
npm run dev

Then open http://localhost:43127. The case study is at /work/lloyds-family-jewellery. Solution: Special prices live in Magento catalog price data (with Magento_Msrp and Lixup_PriceDecimal for jewellery-accurate decimals). The price-promise path is a reviewed match against the same SKU, not a coupon layer, so the special price on the product page is the real ticket.