Skip til indhold
Tilbage til casestudier
Building productsbuilding productsbike racks3d viewersite furnishings

Dero: en 3D-konfigurator til cykelstativer indlejret uden kode

Dero·
Dero: en 3D-konfigurator til cykelstativer indlejret uden kode

Dero er en producent af cykelparkering i Minneapolis, Minnesota, og en PlayCore-virksomhed. Virksomheden fremstiller kommercielle og specialtilpassede cykelstativer, offentlige cykelreparationsstationer, cykelskure, cykelskabe, byrumsinventar og produkter til gademiljøer og har hjulpet sine kunder siden 1995 – fra boligejere, der køber ét enkelt stativ, til arkitekter, der planlægger et cykelrum til hundredvis af cyklister. Produktsiderne indeholder det, som projekterende søger: brochurer, indsendelsesark, installationsvejledninger, CAD-, Revit- og SketchUp-filer samt CSI-specifikationer.

Syv af disse sider har nu også en 3D-konfigurator til cykelstativer, bygget i Simplio3D og med den enkle overskrift 3D-fremviser. Den er bevidst enkel. Den besøgende vælger, hvordan stativet monteres, tilføjer en støttebøjle, hvor stativet tilbyder det, og afprøver overfladerne, mens stativet ændrer sig i 3D. Der er ingen pris, kurv eller formular, og implementeringen på dero.com krævede blot indsættelse af en embed-kode frem for programmering.

Projektet kort fortalt

Projektfakta, hentet fra dero.com og de live 3D-fremvisere i oktober 2026.
PunktDetaljer
KundeDero fra Minneapolis, Minnesota, en PlayCore-virksomhed: cykelstativer, specialfremstillede stativer, offentlige cykelreparationsstationer, cykelskure, cykelskabe, byrumsinventar og gadeinventar siden 1995
Websitedero.com, et WordPress-site med Deros egen butik og tilbudsliste
ProdukterSyv kommercielle cykelstativer: Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch og Bike Bike Rack
Hvad 3D Viewer gørViser stativet i 3D med det valgte beslag, med eller uden støttebøjle, hvor stativet har en, samt en af 22 overfladebehandlinger, med en oversigt over valgene
Hvad den ikke omfatterPriser, indkøbskurv og formular. Køb og tilbudsforespørgsler forbliver blandt de muligheder, Deros produktsider allerede havde
OpsætningÉn grundlæggende konfigurator pr. stativ, indlejret ved at indsætte dens snippet under overskriften “3D Viewer” på produktsiden. Intet plugin, ingen webshopintegration, ingen kode at skrive
PlatformDen tidligere version af Simplio3D

Hvad kunden havde brug for

Finishen på selve stativet

Dero's stativer fås galvaniserede, i rustfrit stål eller i et udvalg af pulverlakerede farver. En lille farveprøve siger ikke meget om, hvordan en farve ser ud på et helt stativ.

Overflademontering eller nedstøbning

Hvert af disse stativer kan boltes fast på bundplader eller monteres i jorden, og de to løsninger ser forskellige ud dér, hvor stativet møder gulvet.

En lean-bar, hvor der er en

Fire af de syv racks understøtter en valgfri lean-bar, så deres forhåndsvisninger skulle gøre det muligt at tilføje og fjerne den igen.

En forhåndsvisning, ikke en ekstra butik

Hver produktside havde allerede sine egne muligheder for at købe eller indhente et tilbud. 3D-visningen skulle blot hjælpe folk med at vælge.

Én arbejdsgang på tværs af sortimentet

Syv racks havde brug for de samme valgmuligheder samme sted, så en besøgende, der har brugt én 3D Viewer, kender dem alle.

Intet udviklingsprojekt

Viewerne skulle placeres på eksisterende WordPress-produktsider uden et plugin, en udvikler eller ændringer i butikken.

Løsningen: en 3D-konfigurator til cykelstativer på syv produktsider

På dero.com har hvert stativ sin egen produktside med beskrivelse, dokumenter og downloads samt Deros egne muligheder for at købe eller indhente et tilbud. Syv af dem – fra Hoop Rack, som Dero kalder standarden for cykelparkering, til Bike Bike Rack, der er formet som en cykel – har nu en sektion længere nede på siden med overskriften 3D-fremviser.

Hver 3D-fremviser er en enkel konfigurator. Stativet kan drejes og zoomes på en lysegrå baggrund, og panelet ved siden af rummer højst tre valg: montering, støttebøjle og overflade. Intet er prissat, intet lægges i en kurv, og intet sendes. Dens eneste opgave er at vise stativet, og derfor var der så lidt at opsætte.

Produktsiden for Bike Hitch på dero.com: Dero-headeren med Produkter, Ressourcer, Kontakt os og Indhent tilbud, brødkrummen Hjem, Alle produkter, Kommercielle cykelstativer, Bike Hitch, overskriften Bike Hitch og to billeder af stativet i brug: en sort stolpe og ring med en cremefarvet cykel fastlåst til den uden for en butik samt en orange variant med en blå cykel ved siden af et blomsterbed
Produktsiden for Bike Hitch på dero.com.
3D-fremviseren på samme side: en galvaniseret Bike Hitch, en stolpe på en firkantet bundplade med en ring igennem den, ved siden af rullemenuen Vælg montering, der er åbnet på Overflademontering og Nedstøbning, samt farveprøverne under Finishmuligheder
Længere nede på samme side vises dens 3D-fremviser med rullemenuen for montering åben.

Montering, støttebøjle og overflade vist på stativet i 3D

De tre valg er dem, der ændrer stativets udseende, når det er installeret:

  • Montering. En rullemenu med Overflademontering og Nedstøbning. Overflademontering viser stativet på de bundplader, det boltes fast med; Nedstøbning erstatter dem med længere ben, der går ned i jorden.
  • Støttebøjle. En kontakt på Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack og Arc Rack. Når den er slået til, vises en vandret stang på tværs af stativet; de øvrige tre stativer viser slet ikke kontakten.
  • Overflade. 22 farveprøver, de samme på alle stativer: Galvaniseret og Rustfrit stål, derefter Sort, Mat sort, Hvid, Lysegrå, Rød, Gul, Klar gul, Orange, Blå, Himmelblå, Grøn, Lysegrøn, Jægergrøn, Sepiabrunt, Bronze, Sølv, Mørkelilla, Vinrød, Beige og Jerngrå. Den galvaniserede farveprøve viser den spættede tekstur fra galvaniseret stål frem for en ensfarvet overflade.

En lille (i)-knap under panelet åbner Konfigurationsoversigt, som angiver valgene med ord: På Swerve Rack står der eksempelvis Vælg montering: Overflademontering og Vælg overflade: Vinrød. Den besøgende kan derefter gå direkte til købe- eller tilbudsmulighederne på samme side.

Downtown Rack i 3D-fremviseren: et sort stativ af firkantrør med afrundede øverste hjørner på bundplader til overflademontering og med en vandret støttebøjle på tværs, ved siden af rullemenuen Vælg montering indstillet til Overflademontering, kontakten for støttebøjle slået til og farveprøverne under Vælg finish, hvor Sort er valgt
Downtown Rack i sort med støttebøjlen slået til.
Arc Rack i 3D-fremviseren: et næsten cirkulært stativ af firkantrør i galvaniseret stål med en plettet grå struktur, på to bundplader til overflademontering, ved siden af rullemenuen Montering indstillet til Overflademontering, kontakten for støttebøjle slået fra og farveprøverne under Finishmuligheder, hvor Galvaniseret er valgt
Arc Rack i galvaniseret stål med sin strukturerede overflade.
Hoop Rack Heavy Duty i 3D Viewer: et højt, smalt omvendt U af kraftigt rør i lysegrøn på to overflademonterede bundplader ved siden af rullemenuen Select Mount indstillet til Surface, kontakten Lean Bar slået fra og farveprøverne Select Finish med Light Green valgt
Hoop Rack Heavy Duty i Light Green.
Swerve Rack i 3D Viewer: et mørkt vinrødt rørstativ med ét lige ben og ét vinklet ben på overflademonterede bundplader ved siden af rullemenuen Select Mount og farveprøverne Select Finish med Wine Red valgt samt en åben Configuration Summary, der viser Select Mount: Surface og Select Finish: Wine Red
Swerve Rack i Wine Red med Configuration Summary åben.

Hvad hver 3D Viewer tilbyder

Syv stativer, hver med sin egen 3D Viewer på produktsiden.

Oplysninger fra dero.com og de aktive 3D Viewers i oktober 2026.
StativSådan beskriver Dero detValgmuligheder i 3D-fremviseren
BøjlestativStandarden for cykelparkering: kraftigt rør med en fuldradiusbøjning; plads til to cyklerMontering, lænebøjle, 22 overflader
Bøjlestativ til krævende brugEt større og tykkere rør end det almindelige BøjlestativMontering, lænebøjle, 22 overflader
BystativKraftigt firkantrør og ekstra bredde for fuld støtte; plads til to cyklerMontering, lænebøjle, 22 overflader
Arc-stativFirkantrør med rene geometriske linjer; plads til to cyklerMontering, lænebøjle, 22 overflader
Swerve-stativKraftigt rør i en form, der følger cyklens stel; plads til to cyklerMontering, 22 overflader
CykelholderEn stolpe og ring med en bøjning i fuld radius og en slank silhuet; plads til to cyklerMontering, 22 overflader
Cykel-cykelstativEt stativ formet som en cykel, beskrevet som funktionel gadekunst; med plads til to til fire cyklerMontering, 22 overflader

Sådan opsættes en 3D-fremviser som Deros

Fem trin – og ingen af dem kræver kode.

  1. Upload 3D-modellen

    Tilføj stativets model til et nyt projekt. Simplio3D understøtter filer i formaterne GLB, GLTF, FBX, OBJ, STL og DAE.

  2. Tilføj monteringen

    En rullemenu med Surface og In-Ground, der hver viser den tilhørende base på modellen.

  3. Tilføj støttebøjlen

    En kontakt, der viser eller skjuler bøjlen på de stativer, der har en.

  4. Tilføj overfladebehandlingerne

    Én farveprøve pr. overfladebehandling: en tekstur til galvaniseret stål og en farve til hver af de øvrige.

  5. Indsæt indlejringskoden

    Kopiér konfiguratorens iframe-kodestykke, og indsæt det på produktsiden. Senere ændringer foretaget i Simplio3D vises på siden uden, at du behøver at redigere den igen.

En forhåndsvisning ved siden af Deros egne købe- og tilbudsmuligheder

Deros produktsider sælger allerede. Hver side har Deros egne muligheder for at købe eller indhente et tilbud: overflade, montering og, hvor relevant, støttebøjle, derefter antal, Tilføj til kurv og Tilføj til tilbud, mens større mængder håndteres via tilbudslisten. 3D-fremviseren ligger på samme side og ændrer ikke på noget af dette.

Den har hverken pris, kurv eller egen formular og sender intet nogen steder hen. Den besøgende ser stativet med den ønskede montering og overflade og træffer derefter de samme valg i Deros indstillinger. Netop denne enkelhed gjorde den hurtig at lancere: Der var intet produkt at forbinde, ingen pris at holde synkroniseret og ingen formular at sende videre til nogen.

Diagram: En produktside for et stativ på dero.com med beskrivelse, dokumenter og CAD-downloads indeholder Simplio3D 3D Viewer, som tilbyder montering på overflade eller i jorden, en støttebøjle på fire stativer, 22 overfladebehandlinger og en konfigurationsoversigt. Den besøgende ser stativet med den valgte montering, bøjle og overfladebehandling rotere i 3D og køber derefter eller anmoder om et tilbud via Deros egne valgmuligheder, indkøbskurv og tilbudsliste på samme side. Nedenfor ses opsætningen uden plugin, uden butiksintegration og uden kode: Upload stativets 3D-model, tilføj en rullemenu til montering, der skifter basen, tilføj en kontakt til støttebøjlen, der tilføjer bøjlen, tilføj 22 farveprøver for overfladebehandlinger, og indsæt indlejringskoden på siden.
Hvor 3D Viewer er placeret på en Dero-produktside, og de fem trin til opsætning.

Indlejret uden at skrive kode

Hver Simplio3D-konfigurator har et delingslink og et iframe-kodestykke, der kan kopieres. På hver Dero-produktside ligger dette kodestykke under overskriften 3D-fremviser i fuld bredde. Der er intet plugin, intet script og ingen forbindelse til webshoppen, så det krævede blot at indsætte ét kodestykke på én side at gøre en fremviser live.

Fordi siden kun indeholder dette kodestykke, vedligeholdes selve 3D-fremviseren i Simplio3D. En ny overflade eller en opdateret model ændres dér og vises på dero.com, næste gang siden indlæses, uden at nogen behøver redigere produktsiden. Læs mere om fremvisere som denne: 3D-produktfremviseren.

Hoop Rack’s 3D Viewer på dero.com under overskriften 3D Viewer: et bredt, omvendt U af rundt rør i gyldengul finish på to overflademonterede bundplader, ved siden af rullemenuen Select Mount indstillet til Surface, kontakten Lean Bar slået fra og farveprøverne i Select Finish med Bright Yellow valgt
Hoop Rack’s 3D Viewer, som den vises på dero.com, i Bright Yellow.

Resultater

Alle finishmuligheder, set på stativet

Besøgende kan afprøve alle 22 finishmuligheder på det stativ, de ser på, med det beslag og den lænestang, de har brug for, før de køber eller anmoder om et tilbud.

Det samme værktøj på syv sider

Fra Hoop Rack til Bike Bike Rack fungerer hver 3D Viewer på samme måde med de samme tre typer valgmuligheder og de samme finishmuligheder.

Intet nyt at vedligeholde på websitet

Produktsiderne indeholder kun et indlejringsudsnit. Ændringer foretages i Simplio3D, og butikken og tilbudslisten fortsætter som før.

Hvad Dero siger

Simplio3D gjorde det nemt at vise vores cykelstativer, som de kommer til at se ud, når de er monteret. Hver 3D Viewer har monteringen, støttebøjlen, hvor et stativ har en, samt hele vores udvalg af overfladebehandlinger, og at få den ind på en produktside var blot et spørgsmål om at indsætte indlejringskoden. Ingen udvikler, intet plugin, og siderne er stadig nemme at vedligeholde.

Colin K.Designer · Dero

Spørgsmål om dette projekt

Et værktøj, der viser et cykelstativ i 3D og lader en køber ændre dets muligheder, såsom monteringen, en støttebøjle eller overfladebehandlingen, og se resultatet før bestilling. Deros løsning er bevidst enkel: tre typer valgmuligheder og en 3D-visning uden pris eller formular.

Hvad et projekt som dette ville tilføre i dag

Intet i dette afsnit er en del af Deros 3D-fremvisere, der er beskrevet ovenfor, og som kører på den tidligere version af Simplio3D. For en producent af cykelstativer eller byrumsinventar, der starter nu:

  • Stativet dér, hvor det skal stå. Augmented reality placerer det konfigurerede stativ på fortovet eller i et cykelrum via en telefon uden app: AR Quick Look på iOS, Scene Viewer på Android og en QR-kode fra en desktopbrowser.
  • Detaljer på modellen. Hotspots tilføjer markører med informationspop op-vinduer, eksempelvis rørdimensionen eller hvor mange cykler stativet har plads til, og Scenery ændrer baggrund og kamera.
  • Fremviseren og bestillingsformularen synkroniseret. En indlejret konfigurator annoncerer hver ændring som en browserhændelse, simplio3d:option.changed, så et website, der ønsker det, kan forudvælge samme overflade og montering i sin egen bestillingsformular med få linjer af sit eget script.
  • Resten af sortimentet hurtigere. En første konfigurator til et andet stativ kan genereres ud fra en skriftlig beskrivelse, og massetilføjelse efter kategori omdanner en serie overflader fra det delte materialebibliotek til et sæt farveprøver uden at oprette hver prøve manuelt.
  • Kontrol af hver fremviser. AI-assistenten kan gennemgå dækningen af valgmuligheder og betinget logik, for eksempel at hver overflade har et materiale, og foreslå rettelser. En AI-klient som Claude, der er forbundet til arbejdsområdet via MCP med en afgrænset forbindelse, kan udføre de samme kontroller, og ændringer i priser eller SKU'er kommer altid kun som afventende ændringer, som et menneske godkender.

3D-forhåndsvisninger af hver skodde

Sådan leverer Evergreen Shutters en genereret 3D-visning af hver skodde sammen med hvert tilbud fra sit eget tilbudssystem.

Farver og en formular – intet andet

Sådan lagde Fanbedarf.de en 3D-jakkekonfigurator på sit WordPress-website med fire modeller, stofarver og en forespørgselsformular.

En produktfremviser til ethvert katalog

Vis produkter i 3D på enhver hjemmeside med rotation, zoom, animationer og annoteringer til udstillingsvinduer og produktsider.

Byg, implementer og skaler 3D-handel.

Ejer en 3D-produktkonfigurator for at øge salget og generere tilbud direkte fra dit websted

Relaterede casestudier