Een productpagina voor ringen die je niet eerst kunt passen

Philip Wallage · E-commerce design · 2025–2026

Productpagina van een Gibeon-meteorietring in titanium op een laptop en een telefoon: de foto van de ring, 4,9 sterren uit 57 reviews, een regel over de echte meteorietinleg, vier productkenmerken, de ringmaatkeuze op Send me a Ring Sizer en een gratis add-on voor lasergravure aan de binnenkant — Productpagina, versie 2. Maat, gravure en het verhaal over het materiaal op één pagina.

Redesign van een Shopify-productpagina op een design subscription. Ringmaat, gravure, materialen en prijs, met een eigen template per producttype.

Jewelry By Johan maakt sinds 2008 ringen met de hand, in Oakdale, Minnesota. Meteoriet, hout, dinosaurusbot en andere ongewone materialen, met lasergravure op maat. De winkel draait op Shopify.

per week, op woensdag: 1 call
live: 5 feb 2026
vragen die de productpagina zelf beantwoordt: ringmaat, materialen, gravure, prijs: 4
templates met de tekst over Muonionalusta-meteoriet: 7

De case in 28 seconden. Het geluid staat uit tot je het aanzet.

Online past niemand de ring voordat hij betaalt. De productpagina moet dus zelf vier vragen beantwoorden: past hij, waar is hij van gemaakt, kan er iets in gegraveerd worden en wat kost hij.

De brief

Het begon eind 2025 met een QuickScan. Daarna nam Jewelry By Johan een BTNG Design Subscription.

De productpagina was lang en rommelig, opgebouwd uit templates. Over de ringmaat kreeg je geen duidelijk antwoord. De add-ons zaten diep weggestopt en het verhaal over de materialen was zwak.

De oude productpagina van dezelfde meteorietring: een menu in twee rijen, de foto, prijs, beschrijving en opsommingstekens, met de ringmaatkeuze laag op de pagina en de knop voor de winkelwagen er zwevend overheen — Voor. Eén lange pagina, met de add-ons ver naar beneden.

De nieuwe productpagina voor dezelfde ring: beoordeling, titel, de regel over het meteoriet, vier productkenmerken met iconen, de ringmaatkeuze met de ringmaatmeter, de gravure-add-on, de prijs en een brede knop voor de winkelwagen — Na. Hetzelfde product op de nieuwe pagina.

Ringmaat en de ringmaatmeter

Bij een dure ring is een slechte pasvorm een grote reden om niet te kopen. De pagina kreeg een keuzelijst voor de ringmaat met “Send me a ring sizer” er direct naast.

Detail van de productpagina: de keuzelijst Ring size op Send me a Ring Sizer, een regel over je maat vinden met de ringmaatmeter, de gratis add-on Add Inside Laser Engraving en de knop voor de winkelwagen — Ringmaat. De ringmaatmeter in de maatkeuze, de gravure-add-on eronder.

Bij bruidssets en his-and-hers-sets gaat er automatisch een ringmaatmeter in de winkelwagen. De winkelwagen kan ook een meter op maat aan. Operations dacht mee over de logica van de meetsets.

Gravure

De eigenaar bouwde de lasergravure-functie van de winkel zelf. Op 1 en 2 februari testte het team de functie, met feedback van de klantenservice, de operations manager en mij.

Materialen en disclaimers

Muonionalusta-meteoriet, troiliet en hout hebben elk hun eigen kanttekeningen. Elk materiaal kreeg een disclaimer uit metafields, die op de productpagina in een lade opent naast de FAQ. Eind januari ging de tekst over Muonionalusta-meteoriet in 7 templates.

De materiaalpagina’s, onder “We care about you and our materials”, draaien ook op metafields. Een thema-update brak in januari de pagina’s over hout en die werden dezelfde maand gerepareerd.

We care about you and our materials: een kaart voor metalen en een kaart voor meteoriet, elk met een foto, een korte tekst en een link om meer te lezen — “We care about you and our materials”. Een kaart per materiaal, met een link naar de pagina.

Twee telefoons met de productpagina: links de foto van de ring, beoordeling, titel en beschrijving, rechts de productkenmerken, de ringmaatkeuze met de ringmaatmeter, de gravure-add-on, de prijs, de knop voor de winkelwagen en een knop om maatwerk aan te vragen — Productpagina op een telefoon, ontworpen naast de desktopversie.

Prijs

Eén pagina, veel producten

Jewelry By Johan verkoopt meer dan één soort product. Elk producttype kreeg een eigen template, met inhoud die verandert per producttag. De knop om te bestellen blijft in beeld terwijl je scrolt.

Het werk is gebouwd in een werkkopie van het live thema, Ultra 2.2.1, zodat de winkel tot de lancering niet veranderde. De productlead was het actiefst in de bouwthreads: templates, metafields en Shopify Functions.

Rond de productpagina

In Figma ontwierp ik ook een nieuw hoofdmenu met een onderdeel voor materialen, de homepage en de categoriepagina. Het meteorietblok op de homepage bouwden de productlead en de fotograaf.

De oude categoriepagina, Meteorite Rings for Men: het menu over een foto van een ring op hout, een rij filterknoppen en de eerste productfoto’s — Categoriepagina, voor.

De nieuwe categoriepagina, Meteorite Rings for Men: de nieuwe header met zoeken en menu, een foto van twee ringen op een steen achter de titel, de filterrij en de eerste productfoto’s — Categoriepagina, na.

Hoe het werk liep

Eén call per week, op woensdagmiddag, van 14 januari tot 10 februari en daartussen veel mail. De productlead deed het meeste dagelijkse testwerk met mij. De operations manager hield de notulen bij en haalde de klantenservice en operations erbij. De eigenaar werkte zelf in het thema. Op de call van 28 januari stonden de productpagina, de automatische ringmaatmeter, de gravurefuncties en de bezorgregels op de agenda.

Voor de lancering op 5 februari schreef ik een checklist, die het team en ik samen doorliepen. Shopify nam niet elke wijziging uit de werkkopie mee naar het live thema, dus een aantal fixes moest opnieuw op de live winkel.

De laatste fix waar ik aan werkte kwam op 10 februari. Een snippet voor de ringmaatgarantie verborg de maatkeuze bij producten met maar één variant.

Wat er veranderde

Ik heb geen cijfers over verkoop of conversie voor dit werk. De nieuwe productpagina ging op 5 februari 2026 live. Mijn deel stopte die maand.

Verkoop je online iets dat moet passen?

Maak een afspraak

Terug naar cases