Terug naar casestudies
Building productsbuilding productsbike racks3d viewersite furnishings
Dero: een 3D-configurator voor fietsenrekken, zonder code ingebed
Dero·
Dero is een fabrikant van fietsenstallingen in Minneapolis, Minnesota, en een PlayCore-bedrijf. Het produceert commerciële en maatwerk fietsenrekken, openbare fietsenreparatiestations, fietsenstallingen, fietskluizen, straatmeubilair en producten voor de openbare ruimte, en ondersteunt klanten sinds 1995: van huiseigenaren die één rek kopen tot architecten die een fietsenruimte voor honderden fietsers ontwerpen. Op de productpagina’s staat wat voorschrijvers zoeken: brochures, indieningsbladen, installatiehandleidingen, CAD-, Revit- en SketchUp-bestanden en CSI-specificaties.
Zeven van die pagina’s hebben nu ook een 3D-configurator voor fietsenrekken, gebouwd in Simplio3D en eenvoudigweg getiteld 3D-weergave. De configurator is bewust eenvoudig gehouden. Een bezoeker kiest hoe het rek wordt gemonteerd, voegt een aanleunbeugel toe waar die beschikbaar is en probeert verschillende afwerkingen uit, waarna het rek in 3D verandert. Er zijn geen prijs, winkelwagen of formulier, en plaatsing op dero.com vereiste een geplakt insluitfragment in plaats van code.
Het project in één oogopslag
| Onderdeel | Details |
|---|---|
| Klant | Dero uit Minneapolis, Minnesota, een PlayCore-bedrijf: fietsenrekken, maatwerkrekken, openbare fietsreparatievoorzieningen, fietsenstallingen, fietskluizen, straatmeubilair en straatinrichting, sinds 1995 |
| Website | dero.com, een WordPress-site met Dero’s eigen winkel en offerteoverzicht |
| Producten | Zeven commerciële fietsenrekken: Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch en Bike Bike Rack |
| Wat de 3D-viewer doet | Toont het rek in 3D met de gekozen montage, de leunbalk aan of uit waar het rek er een heeft, en een van de 22 afwerkingen, met een overzicht van de keuzes |
| Wat niet wordt weergegeven | Prijzen, een winkelwagen en een formulier. Aankopen en offertes blijven bij de opties die Dero’s productpagina’s al boden |
| Instellingen | Eén basisconfigurator per fietsenrek, ingesloten door het fragment onder een kop “3D-viewer” op de productpagina te plakken. Geen plugin, geen shopintegratie, geen code om te schrijven |
| Platform | De eerdere versie van Simplio3D |
Wat de klant nodig had
De afwerking van het fietsenrek zelf
De fietsenrekken van Dero zijn verkrijgbaar in gegalvaniseerd of roestvrij staal, of in diverse poedercoatingkleuren. Een klein kleurstaal zegt weinig over hoe een kleur eruitziet op een volledig fietsenrek.
Opbouw of in de grond
Elk van deze fietsenrekken kan op voetplaten worden vastgebout of in de grond worden geplaatst. De twee opties zien er verschillend uit op de plek waar het fietsenrek de vloer raakt.
Een ligstang waar er één is
Vier van de zeven rekken kunnen optioneel worden voorzien van een ligstang, dus in de previews moest je deze kunnen toevoegen en weer verwijderen.
Een preview, geen tweede webshop
Elke productpagina had al eigen opties om te kopen of een offerte aan te vragen. De 3D-weergave hoefde mensen alleen te helpen kiezen.
Eén werkwijze voor het hele assortiment
Voor zeven rekken waren dezelfde keuzes op dezelfde plek nodig, zodat een bezoeker die één 3D Viewer heeft gebruikt, ze allemaal kent.
Geen ontwikkelproject
De viewers moesten op bestaande productpagina's van WordPress worden geplaatst, zonder plugin, ontwikkelaar of wijziging aan de webshop.
De oplossing: een 3D-configurator voor fietsenrekken op zeven productpagina’s
Op dero.com heeft elk rek een eigen productpagina, met een beschrijving, documenten en downloads, plus Dero’s eigen opties om te kopen of een offerte aan te vragen. Zeven daarvan, van het Hoop Rack, dat Dero de standaard voor fietsenstallingen noemt, tot het Bike Bike Rack in de vorm van een fiets, hebben nu verderop op de pagina een sectie met de titel 3D-weergave.
Elke 3D-weergave is een eenvoudige configurator. Het rek draait en zoomt in op een lichtgrijze achtergrond, en het paneel ernaast bevat maximaal drie keuzes: de montage, de aanleunbeugel en de afwerking. Er worden geen prijzen getoond, niets wordt aan een winkelwagen toegevoegd en er wordt niets verzonden. De enige taak is het rek te tonen, en daarom was er zo weinig configuratie nodig.
Montage, aanleunbeugel en afwerking, in 3D op het rek getoond
De drie keuzes bepalen hoe een rek eruitziet nadat het is geïnstalleerd:
- Montage. Een keuzelijst met Oppervlak en In de grond. Oppervlak toont het rek op de grondplaten waarmee het wordt vastgebout; In de grond vervangt die door langere poten die de grond in gaan.
- Aanleunbeugel. Een schakelaar op het Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack en Arc Rack. Wanneer deze is ingeschakeld, verschijnt er een horizontale beugel over het rek; bij de andere drie rekken wordt de schakelaar eenvoudigweg niet getoond.
- Afwerking. 22 stalen, identiek voor elk rek: Gegalvaniseerd en Roestvrij staal, gevolgd door Zwart, Mat zwart, Wit, Lichtgrijs, Rood, Geel, Heldergeel, Oranje, Blauw, Hemelsblauw, Groen, Lichtgroen, Jachtgroen, Sepiabruiin, Brons, Zilver, Donkerpaars, Wijnrood, Beige en IJzergrijs. Het gegalvaniseerde staal toont de gevlekte textuur van gegalvaniseerd staal in plaats van een effen kleur.
Een kleine knop (i) onder het paneel opent de Configuratieoverzicht, waarin de keuzes in woorden worden vermeld: bij het Swerve Rack bijvoorbeeld Select Mount: Surface en Select Finish: Wine Red. Een bezoeker kan vervolgens rechtstreeks doorgaan naar de koop- of offerteopties op dezelfde pagina.
Wat elke 3D Viewer biedt
Zeven rekken, elk met een eigen 3D Viewer op de productpagina.
| Rek | Hoe Dero het beschrijft | Keuzes in de 3D-viewer |
|---|---|---|
| Hoepelrek | De standaard voor fietsenstallingen: dikke buis met een bocht over de volledige straal; biedt plaats aan twee fietsen | Montage, leunbeugel, 22 afwerkingen |
| Hoepelrek voor zwaar gebruik | Een grotere, dikkere buis dan het standaard Hoepelrek | Montage, leunbeugel, 22 afwerkingen |
| Stadscentrumrek | Dikke vierkante buis en een extra brede uitvoering voor volledige ondersteuning; biedt plaats aan twee fietsen | Montage, leunbeugel, 22 afwerkingen |
| Arc-fietsenrek | Vierkante buizen met strakke geometrische lijnen; biedt plaats aan twee fietsen | Montage, leunbeugel, 22 afwerkingen |
| Swerve-fietsenrek | Dikke buis in een vorm die het frame van een fiets volgt; biedt plaats aan twee fietsen | Montage, 22 afwerkingen |
| Bike Hitch | Een paal en ring met een bocht over de volledige straal en een slank silhouet; biedt plaats aan twee fietsen | Montage, 22 afwerkingen |
| Fietsenrek in de vorm van een fiets | Een rek in de vorm van een fiets, omschreven als een functioneel straatkunstwerk; biedt plaats aan twee tot vier fietsen | Montage, 22 afwerkingen |
Hoe een 3D-viewer zoals die van Dero wordt ingesteld
Vijf stappen, zonder dat er ook maar één code vereist.
Upload het 3D-model
Voeg het model van het rek toe aan een nieuw project. Simplio3D ondersteunt GLB-, GLTF-, FBX-, OBJ-, STL- en DAE-bestanden.
Voeg de bevestiging toe
Een keuzelijst met Surface en In-Ground, waarbij elk de bijpassende basis op het model toont.
Voeg de leunbeugel toe
Een schakelaar die de beugel toont of verbergt, op de rekken die er een hebben.
Voeg de afwerkingen toe
Eén staal per afwerking: een textuur voor gegalvaniseerd staal en een kleur voor elk van de andere afwerkingen.
Plak het embedfragment
Kopieer het iframe-fragment van de configurator en plak het in de productpagina. Latere wijzigingen in Simplio3D verschijnen op de pagina zonder dat je deze opnieuw hoeft te bewerken.
Een preview naast Dero’s eigen koop- en offerteopties
Dero’s productpagina’s verkopen al. Elke pagina heeft Dero’s eigen opties om te kopen of een offerte aan te vragen: afwerking, montage en, waar van toepassing, de aanleunbeugel, gevolgd door een aantal, Toevoegen aan winkelwagen en Toevoegen aan offerte. Grotere aantallen verlopen via de offertelijst. De 3D-weergave staat op dezelfde pagina en laat dat allemaal ongemoeid.
De weergave heeft geen eigen prijs, winkelwagen of formulier en verzendt niets. Een bezoeker bekijkt het rek in de gewenste montage en afwerking en maakt vervolgens dezelfde keuzes in Dero’s opties. Juist door het zo compact te houden kon het snel live: er was geen product om te koppelen, geen prijs om synchroon te houden en geen formulier om naar iemand door te sturen.
Ingesloten zonder code te schrijven
Elke configurator van Simplio3D heeft een deellink en een iframe-fragment om te kopiëren. Op elke Dero-productpagina staat dat fragment onder de kop 3D-weergave, over de volledige breedte. Er is geen plug-in, script of koppeling met de winkel nodig, dus een viewer live zetten betekende één fragment in één pagina plakken.
Omdat de pagina alleen dat fragment bevat, wordt de 3D-weergave zelf beheerd in Simplio3D. Een nieuwe afwerking of een bijgewerkt model wordt daar aangepast en verschijnt op dero.com zodra de pagina opnieuw wordt geladen, zonder dat iemand de productpagina hoeft te bewerken. Meer over dit soort viewers: de 3D-productviewer.
Resultaten
Elke afwerking, zichtbaar op het rek
Bezoekers kunnen alle 22 afwerkingen uitproberen op het rek dat ze bekijken, met de montage en leunbeugel die ze nodig hebben, voordat ze kopen of een offerte aanvragen.
Dezelfde tool op zeven pagina's
Van de Hoop Rack tot de Bike Bike Rack werkt elke 3D-viewer op dezelfde manier, met dezelfde drie soorten keuzes en dezelfde afwerkingen.
Geen extra onderhoud aan de website
De productpagina's bevatten alleen een embedcode. Wijzigingen gebeuren in Simplio3D, terwijl de webshop en offerteaanvragen gewoon blijven werken zoals voorheen.
Wat Dero zegt
Simplio3D maakte het eenvoudig om onze fietsenrekken te tonen zoals ze er na installatie uitzien. Elke 3D Viewer bevat de bevestiging, de leunbeugel wanneer een rek die heeft, en ons volledige assortiment afwerkingen. Het toevoegen aan een productpagina was slechts een kwestie van de embedcode plakken. Geen ontwikkelaar, geen plugin, en de pagina's blijven eenvoudig te onderhouden.
Colin K.Ontwerper · Dero
Vragen over dit project
Een tool die een fietsenrek in 3D toont en een koper de opties laat aanpassen, zoals de bevestiging, een leunbeugel of de afwerking, zodat die het resultaat vóór het bestellen kan zien. Die van Dero is bewust eenvoudig: drie soorten keuzes en een 3D-weergave, zonder prijs of formulier.
Zeven commerciële rekken: de Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch en Bike Bike Rack. Elke viewer staat op de productpagina van het betreffende rek op dero.com.
De montage (op het oppervlak of in de grond), de leunbeugel bij de vier rekken die deze optie bieden, en de afwerking, uit 22 stalen waaronder verzinkt staal, roestvrij staal en 20 kleuren. Een overzicht vermeldt de keuzes in woorden.
De productpagina's van Dero hebben al eigen opties om te kopen of een offerte aan te vragen. De 3D Viewer helpt bezoekers alleen bij hun keuze, waardoor deze eenvoudig in te stellen en gemakkelijk te beheren blijft.
Nee. Elke 3D Viewer is een iframe-fragment dat uit Simplio3D wordt gekopieerd en in de productpagina wordt geplakt. Er is geen plugin en geen koppeling met de webshop, en wijzigingen die in Simplio3D worden aangebracht, verschijnen op de pagina zonder deze te bewerken.
Ja. Een Simplio3D-configurator kan voorwaardelijke regels, prijsberekening, een offerte- of contactformulier of augmented reality toevoegen wanneer een product dat nodig heeft. In het volgende gedeelte wordt beschreven wat een project als dit vandaag nog zou kunnen toevoegen.
Wat een project als dit vandaag zou toevoegen
Niets in deze sectie maakt deel uit van de hierboven beschreven 3D-weergaven van Dero, die draaien op de eerdere versie van Simplio3D. Voor een fabrikant van fietsenrekken of straatmeubilair die nu begint:
- Het rek op de plek waar het komt te staan. Augmented reality plaatst het geconfigureerde rek via een telefoon op de stoep of in een fietsenruimte, zonder app: AR Quick Look op iOS, Scene Viewer op Android, en een QR-code vanuit een desktopbrowser.
- Details op het model. Hotspots voegen markeringen met informatieve pop-ups toe, bijvoorbeeld over de buismaat of het aantal fietsen dat in het rek past, en Scenery wijzigt de achtergrond en camera.
- De viewer en het bestelformulier synchroon. Een ingesloten configurator meldt elke wijziging als browsergebeurtenis,
simplio3d:option.changed, zodat een site die dat wil met enkele regels eigen script dezelfde afwerking en montage vooraf kan selecteren in het eigen bestelformulier. - De rest van het assortiment, sneller. Een eerste configurator voor een ander rek kan worden gegenereerd op basis van een geschreven beschrijving, en bulksgewijs toevoegen per categorie verandert een assortiment afwerkingen uit de gedeelde materiaalbibliotheek in een set stalen zonder elke staal handmatig te maken.
- Elke viewer controleren. De AI-assistent kan de dekking van opties en voorwaardelijke logica controleren, bijvoorbeeld of elke afwerking een materiaal heeft, en herstelvoorstellen doen. Een AI-client zoals Claude, verbonden met de werkruimte via MCP met een afgebakende verbinding, kan dezelfde controles uitvoeren, en wijzigingen in prijzen of SKU’s komen uitsluitend binnen als openstaande wijzigingen die een persoon toepast.
3D-voorbeelden voor elke luik
Hoe Evergreen Shutters bij elke offerte uit het eigen offertesysteem een gegenereerde 3D-weergave van elk luik levert.
Kleuren en een formulier, verder niets
Hoe Fanbedarf.de een 3D-configurator voor jassen op zijn WordPress-site plaatste, met vier modellen, stofkleuren en een aanvraagformulier.
Een productviewer voor elke catalogus
Toon producten in 3D op elke website, met rotatie, zoom, animaties en annotaties, voor presentaties en productpagina's.
Bouw, implementeer en schaal 3D-commerce.
Bezit een 3D-productconfigurator om verkopen te stimuleren en direct vanuit uw website offertes te genereren
Gerelateerde casestudy's
Tentest: een 3D-configurator voor pop-uptenten met een ontwerpcanvas op elk paneel
Tentest, een Estse fabrikant van pop-uptenten binnen Scandipro Group, bouwde zijn eigen 3D-configurator: zes tentformaten, een ontwerpcanvas met logo-upload op elk paneel, AR en een offerteaanvraag.
Fell & Frame: een intern ontwikkelde configurator voor houten ramen voor WooCommerce
Fell & Frame, een schrijnwerkerij uit Carlisle, bouwde in Simplio3D zijn eigen configurator voor houten ramen. Kopers bepalen de afmetingen van zes typen draairamen tot op de millimeter nauwkeurig en voegen deze toe aan de winkelmand van WooCommerce.
Evergreen Shutters: 3D luikvoorbeelden binnen een intern offertesysteem
Evergreen Shutters Ltd had nauwkeurige visuals nodig voor duizenden luikvariaties binnen hun eigen offertesysteem. In plaats van een 3D-engine te bouwen, integreerden ze de Simplio3D API en gaven een gegenereerd 3D-overzicht bij elke offerte terug.