Zurück zu den Fallstudien
Building productsbuilding productsbike racks3d viewersite furnishings
Dero: Ein 3D-Fahrradständer-Konfigurator ohne Programmierung eingebunden
Dero·
Dero ist ein Hersteller von Fahrradabstellanlagen aus Minneapolis, Minnesota, und ein Unternehmen von PlayCore. Das Unternehmen produziert gewerbliche und kundenspezifische Fahrradständer, öffentliche Fahrradreparaturstationen, Fahrradüberdachungen, Fahrradschließfächer, Stadtmobiliar und Produkte für den Straßenraum und unterstützt seine Kunden seit 1995 – von Hausbesitzern, die einen einzelnen Ständer kaufen, bis hin zu Architekten, die einen Fahrradraum für Hunderte von Radfahrern planen. Auf den Produktseiten finden Planer alles, was sie benötigen: Broschüren, Einreichungsunterlagen, Montageanleitungen, CAD-, Revit- und SketchUp-Dateien sowie CSI-Spezifikationen.
Sieben dieser Seiten verfügen jetzt außerdem über einen 3D-Fahrradständer-Konfigurator, der in Simplio3D erstellt wurde und schlicht mit 3D-Viewer überschrieben ist. Er ist bewusst einfach gehalten. Besucher wählen die Montageart des Ständers, fügen bei verfügbaren Modellen eine Anlehnbügel hinzu und testen Oberflächen – der Ständer passt sich in 3D an. Es gibt weder Preise noch Warenkorb oder Formular, und die Einbindung auf dero.com erfolgte durch Einfügen eines Embed-Snippets statt durch Programmierung.
Das Projekt auf einen Blick
| Element | Details |
|---|---|
| Kunde | Dero aus Minneapolis, Minnesota, ein Unternehmen von PlayCore: Fahrradständer, individuelle Ständer, öffentliche Fahrradreparaturstationen, Fahrradunterstände, Fahrradschließfächer, Stadtmobiliar und Straßenraumgestaltung – seit 1995 |
| Website | dero.com, eine WordPress-Website mit Deros eigenem Shop und Angebotsliste |
| Produkte | Sieben gewerbliche Fahrradständer: Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch und Bike Bike Rack |
| Was der 3D-Viewer ermöglicht | Zeigt den Fahrradständer in 3D mit der ausgewählten Montage, mit oder ohne Anlehnbügel, sofern vorhanden, sowie in einer von 22 Oberflächen – inklusive Zusammenfassung der Auswahl |
| Was nicht enthalten ist | Preise, Warenkorb und Formular. Kauf und Angebotsanfragen bleiben bei den Optionen, die auf Deros Produktseiten bereits verfügbar waren |
| Einrichtung | Ein einfacher Konfigurator pro Fahrradständer, eingebettet durch Einfügen seines Snippets unter einer Überschrift „3D-Viewer“ auf der Produktseite. Kein Plugin, keine Shop-Integration, kein zu schreibender Code |
| Plattform | Die frühere Version von Simplio3D |
Was der Kunde benötigte
Die Oberflächenbeschichtung des Fahrradständers selbst
Die Fahrradständer von Dero sind verzinkt, aus Edelstahl oder in einer Auswahl pulverbeschichteter Farben erhältlich. Ein kleines Farbmuster verrät nur wenig darüber, wie eine Farbe auf einem gesamten Fahrradständer wirkt.
Auf der Oberfläche oder im Boden verankert
Jeder dieser Fahrradständer kann auf Bodenplatten verschraubt oder im Boden verankert werden. Dabei unterscheiden sich die beiden Varianten an der Stelle, an der der Fahrradständer auf den Boden trifft.
Eine schlanke Querstrebe, wo eine vorhanden ist
Vier der sieben Racks bieten optional eine schlanke Querstrebe, daher mussten ihre Vorschauen eine Möglichkeit bieten, sie hinzuzufügen und wieder zu entfernen.
Eine Vorschau, kein zweiter Shop
Jede Produktseite hatte bereits eigene Optionen zum Kaufen oder Anfordern eines Angebots. Die 3D-Ansicht sollte den Menschen lediglich bei der Auswahl helfen.
Eine einheitliche Bedienung über das gesamte Sortiment
Bei sieben Racks mussten dieselben Auswahlmöglichkeiten an derselben Stelle verfügbar sein, damit Besucher, die einen 3D Viewer genutzt haben, sie alle kennen.
Kein Entwicklungsprojekt
Die Viewer mussten auf bestehenden WordPress-Produktseiten ohne Plugin, Entwickler oder Änderungen am Shop eingebunden werden.
Die Lösung: ein 3D-Fahrradständer-Konfigurator auf sieben Produktseiten
Auf dero.com hat jeder Ständer eine eigene Produktseite mit Beschreibung, Dokumenten und Downloads sowie Deros eigenen Optionen zum Kaufen oder Anfordern eines Angebots. Sieben davon – vom Hoop Rack, den Dero als Standard für Fahrradparken bezeichnet, bis zum fahrradförmigen Bike Bike Rack – enthalten jetzt weiter unten auf der Seite einen Bereich mit der Überschrift 3D-Viewer.
Jeder 3D-Viewer ist ein einfacher Konfigurator. Der Ständer lässt sich vor hellgrauem Hintergrund drehen und zoomen, während das Bedienfeld daneben maximal drei Auswahlmöglichkeiten bietet: Montage, Anlehnbügel und Oberfläche. Nichts wird bepreist, in einen Warenkorb gelegt oder übermittelt. Seine einzige Aufgabe ist es, den Ständer darzustellen – deshalb war so wenig einzurichten.
Montage, Anlehnbügel und Oberfläche direkt am Ständer in 3D dargestellt
Die drei Auswahlmöglichkeiten verändern das Erscheinungsbild eines montierten Ständers:
- Montage. Ein Dropdown-Menü mit Aufputz und zum Einbetonieren. Bei Aufputz wird der Ständer auf den Bodenplatten gezeigt, mit denen er verschraubt wird; zum Einbetonieren ersetzt diese durch längere Beine, die im Boden verankert werden.
- Anlehnbügel. Ein Schalter beim Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack und Arc Rack. Ist er aktiviert, erscheint eine horizontale Stange über den Ständer; bei den anderen drei Ständern wird der Schalter nicht angezeigt.
- Oberfläche. 22 Farbmuster, bei jedem Ständer identisch: Verzinkt und Edelstahl, danach Schwarz, Mattschwarz, Weiß, Hellgrau, Rot, Gelb, Leuchtgelb, Orange, Blau, Himmelblau, Grün, Hellgrün, Jägergrün, Sepiabraun, Bronze, Silber, Dunkelviolett, Weinrot, Beige und Eisengrau. Das verzinkte Farbmuster zeigt die gesprenkelte Struktur von verzinktem Stahl statt einer einheitlichen Farbe.
Eine kleine Schaltfläche (i) unter dem Bedienfeld öffnet die Konfigurationsübersicht, in der die Auswahl in Worten aufgeführt wird: Beim Swerve Rack beispielsweise „Montage auswählen: Aufputz“ und „Oberfläche auswählen: Weinrot“. Besucher können anschließend direkt zu den Kauf- oder Angebotsoptionen auf derselben Seite wechseln.
Was die einzelnen 3D-Viewer bieten
Sieben Ständer, jeweils mit eigenem 3D-Viewer auf der jeweiligen Produktseite.
| Ständer | So beschreibt Dero es | Optionen im 3D-Viewer |
|---|---|---|
| Hoop Rack | Der Standard für Fahrradparken: dickes Rohr mit vollradiusförmiger Biegung; bietet Platz für zwei Fahrräder | Montage, Anlehnbügel, 22 Oberflächen |
| Hoop Rack Heavy Duty | Ein größeres, dickeres Rohr als beim standardmäßigen Hoop Rack | Montage, Anlehnbügel, 22 Oberflächen |
| Downtown Rack | Dickes Vierkantrohr und eine größere Breite für vollständigen Halt; bietet Platz für zwei Fahrräder | Montage, Anlehnbügel, 22 Oberflächen |
| Arc Rack | Vierkantrohr mit klaren geometrischen Linien; bietet Platz für zwei Fahrräder | Montage, Anlehnbügel, 22 Oberflächen |
| Swerve Rack | Dickes Rohr in einer Form, die dem Rahmen eines Fahrrads folgt; bietet Platz für zwei Fahrräder | Halterung, 22 Oberflächen |
| Bike Hitch | Ein Pfosten und Ring mit einer Biegung über den gesamten Radius und einer schlanken Silhouette; bietet Platz für zwei Fahrräder | Halterung, 22 Oberflächen |
| Fahrrad-Fahrradständer | Ein ständerförmiger Fahrradständer, der als funktionales Street-Art-Objekt beschrieben wird; bietet Platz für zwei bis vier Fahrräder | Halterung, 22 Oberflächen |
So wird ein 3D-Viewer wie der von Dero eingerichtet
Fünf Schritte – ganz ohne Programmierung.
Das 3D-Modell hochladen
Fügen Sie das Modell des Fahrradständers zu einem neuen Projekt hinzu. Simplio3D unterstützt Dateien im Format GLB, GLTF, FBX, OBJ, STL und DAE.
Die Montage hinzufügen
Ein Dropdown-Menü mit den Optionen „Surface“ und „In-Ground“, die jeweils die passende Basis am Modell anzeigen.
Die Anlehnbügel hinzufügen
Ein Schalter, der den Bügel bei den Fahrradständern, die über einen verfügen, ein- oder ausblendet.
Die Oberflächen hinzufügen
Ein Farbfeld pro Oberfläche: eine Textur für verzinkten Stahl und eine Farbe für jede der anderen Oberflächen.
Den Einbettungscode einfügen
Kopieren Sie den iframe-Code des Konfigurators und fügen Sie ihn in die Produktseite ein. Spätere Änderungen in Simplio3D erscheinen auf der Seite, ohne dass sie erneut bearbeitet werden muss.
Eine Vorschau neben Deros eigenen Kauf- und Angebotsoptionen
Die Produktseiten von Dero verkaufen bereits direkt. Jede bietet Deros eigene Optionen zum Kaufen oder Anfordern eines Angebots: Oberfläche, Montage und – sofern zutreffend – Anlehnbügel, anschließend die Menge, In den Warenkorb und Zum Angebot hinzufügen; größere Mengen werden über die Angebotsliste abgewickelt. Der 3D-Viewer befindet sich auf derselben Seite und greift in all das nicht ein.
Er hat keinen Preis, keinen Warenkorb und kein eigenes Formular und übermittelt keine Daten. Besucher betrachten den Ständer in der gewünschten Montageart und Oberfläche und treffen anschließend dieselben Auswahlentscheidungen in Deros Optionen. Genau diese schlanke Umsetzung machte die schnelle Veröffentlichung möglich: Es gab kein Produkt zu verknüpfen, keinen Preis zu synchronisieren und kein Formular an jemanden weiterzuleiten.
Ohne Programmierung eingebettet
Jeder Simplio3D Konfigurator bietet einen Freigabelink und ein iframe-Snippet zum Kopieren. Auf jeder Dero-Produktseite befindet sich dieses Snippet unter der Überschrift 3D-Viewer und über die gesamte Breite. Es gibt kein Plugin, kein Skript und keine Verbindung zum Shop – einen Viewer zu veröffentlichen bedeutete daher, ein Snippet in eine Seite einzufügen.
Da die Seite nur dieses Snippet enthält, wird der 3D-Viewer selbst in Simplio3D gepflegt. Eine neue Oberfläche oder ein aktualisiertes Modell wird dort geändert und erscheint beim nächsten Laden der Seite auf dero.com, ohne dass jemand die Produktseite bearbeiten muss. Mehr zu solchen Viewern: der 3D-Produktviewer.
Ergebnisse
Jede Ausführung direkt am Fahrradständer sehen
Besucher können alle 22 Ausführungen an dem Fahrradständer ausprobieren, den sie sich gerade ansehen – mit der gewünschten Montage und dem benötigten Anlehnbügel –, bevor sie kaufen oder ein Angebot anfordern.
Dasselbe Tool auf sieben Seiten
Vom Hoop Rack bis zum Bike Bike Rack funktioniert jeder 3D-Viewer auf dieselbe Weise – mit denselben drei Auswahlarten und denselben Ausführungen.
Nichts Neues, das auf der Website gepflegt werden muss
Die Produktseiten enthalten nur einen Einbettungscode. Änderungen erfolgen in Simplio3D, und Shop sowie Angebotsliste funktionieren wie bisher weiter.
Was Dero sagt
Simplio3D hat es einfach gemacht, unsere Fahrradständer so zu zeigen, wie sie nach der Installation aussehen werden. Jeder 3D-Viewer umfasst die Halterung, die Anlehnschiene, sofern ein Fahrradständer eine hat, sowie unser vollständiges Oberflächenangebot. Die Einbindung auf einer Produktseite war lediglich eine Frage des Einfügens des Einbettungscodes. Kein Entwickler, kein Plugin – und die Seiten bleiben einfach zu pflegen.
Colin K.Designer · Dero
Fragen zu diesem Projekt
Ein Tool, das einen Fahrradständer in 3D zeigt und es Käufern ermöglicht, Optionen wie die Halterung, eine Anlehnschiene oder die Oberfläche zu ändern und das Ergebnis vor der Bestellung zu sehen. Der Konfigurator von Dero ist bewusst einfach gehalten: drei Auswahlmöglichkeiten und eine 3D-Ansicht, ohne Preisangabe oder Formular.
Sieben Fahrradständer für den gewerblichen Einsatz: der Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch und Bike Bike Rack. Der jeweilige Viewer befindet sich auf der Produktseite des entsprechenden Fahrradständers auf dero.com.
Die Montageart (auf der Oberfläche oder im Boden), den Anlehnbügel bei den vier Fahrradständern, die einen anbieten, sowie die Oberfläche aus 22 Mustern, darunter verzinkter Stahl, Edelstahl und 20 Farben. Eine Zusammenfassung führt die Auswahlmöglichkeiten in Worten auf.
Die Produktseiten von Dero bieten bereits eigene Möglichkeiten zum Kaufen oder Einholen eines Angebots. Der 3D-Viewer hilft Besuchern lediglich bei der Auswahl – so war er einfach einzurichten und bleibt leicht zu pflegen.
Nein. Jeder 3D-Viewer ist ein iframe-Snippet, das aus Simplio3D kopiert und in die Produktseite eingefügt wird. Es gibt kein Plugin und keine Verbindung zum Shop; Änderungen in Simplio3D erscheinen auf der Seite, ohne dass diese bearbeitet werden muss.
Ja. Ein Simplio3D Konfigurator kann bedingte Regeln, Preise, ein Angebots- oder Kontaktformular oder Augmented Reality hinzufügen, wenn ein Produkt dies erfordert. Im nächsten Abschnitt wird beschrieben, was ein solches Projekt heute ergänzen könnte.
Was ein solches Projekt heute zusätzlich bieten würde
Keiner der Inhalte dieses Abschnitts ist Teil der oben beschriebenen 3D-Viewer von Dero, die mit der früheren Version von Simplio3D laufen. Für Hersteller von Fahrradständern oder Stadtmobiliar, die heute starten:
- Der Ständer an seinem vorgesehenen Standort. Augmented Reality platziert den konfigurierten Ständer per Smartphone auf dem Gehweg oder in einem Fahrradraum – ganz ohne App: AR Quick Look auf iOS, Scene Viewer auf Android sowie ein QR-Code aus einem Desktop-Browser.
- Details direkt am Modell. Hotspots ergänzen Markierungen mit Informations-Pop-ups, etwa zum Rohrdurchmesser oder zur Anzahl der Fahrräder, die der Ständer aufnehmen kann. Scenery wechselt Hintergrund und Kameraperspektive.
- Viewer und Bestellformular synchron. Ein eingebetteter Konfigurator meldet jede Änderung als Browser-Ereignis,
simplio3d:option.changed, sodass eine Website bei Bedarf mit wenigen Zeilen eigenem Skript dieselbe Oberfläche und Montageart im eigenen Bestellformular vorauswählen kann. - Der Rest des Sortiments – schneller. Ein erster Konfigurator für einen weiteren Ständer kann aus einer schriftlichen Beschreibung erzeugt werden, und das Hinzufügen nach Kategorie verwandelt eine Oberflächenpalette aus der gemeinsamen Materialbibliothek in ein Farbmuster-Set, ohne jedes Muster manuell erstellen zu müssen.
- Jeden Viewer prüfen. Der KI-Assistent kann die Abdeckung von Optionen und die bedingte Logik prüfen – beispielsweise, ob jede Oberfläche über ein Material verfügt – und Korrekturen vorschlagen. Ein KI-Client wie Claude, der über MCP mit einer eingeschränkt berechtigten Verbindung an den Workspace angebunden ist, kann dieselben Prüfungen ausführen. Änderungen an Preisen oder SKUs werden dabei ausschließlich als ausstehende Änderungen bereitgestellt, die ein Mensch übernimmt.
3D-Vorschauen für jeden Rollladen
Wie Evergreen Shutters mit jedem Angebot aus dem eigenen Angebotssystem eine generierte 3D-Ansicht jedes Rollladens bereitstellt.
Farben und ein Formular – sonst nichts
Wie Fanbedarf.de einen 3D-Jackenkonfigurator mit vier Modellen, Stofffarben und einem Anfrageformular auf seiner WordPress Website integriert hat.
Ein Produktbetrachter für jeden Katalog
Präsentieren Sie Produkte in 3D auf jeder Website – mit Drehung, Zoom, Animationen und Anmerkungen für Schaufenster und Produktseiten.
3D-Commerce entwickeln, bereitstellen und skalieren.
Nutzen Sie einen 3D-Produktkonfigurator, um den Verkauf zu steigern und direkt über Ihre Website Angebote zu erstellen.
Ähnliche Fallstudien
Tentest: ein 3D-Konfigurator für Pop-up-Zelte mit Designfläche auf jeder Seite
Tentest, ein estnischer Hersteller von Pop-up-Zelten der Scandipro Group, entwickelte einen eigenen 3D-Konfigurator: sechs Zeltgrößen, eine Designfläche mit Logo-Upload auf jeder Seite, AR und eine Angebotsanfrage.
Fell & Frame: ein intern entwickelter Konfigurator für Holzfenster für WooCommerce
Fell & Frame, eine Tischlerei aus Carlisle, entwickelte in Simplio3D einen eigenen Konfigurator für Holzfenster. Käufer können sechs Flügelfenster-Typen millimetergenau dimensionieren und in den Warenkorb von WooCommerce legen.
Evergreen Shutters: 3D-Vorschauen für Fensterläden in einem internen Angebotssystem
Evergreen Shutters Ltd benötigte präzise Visualisierungen für Tausende von Fensterladenvarianten innerhalb der eigenen Angebotsplattform. Anstatt eine 3D-Engine zu entwickeln, integrierte das Unternehmen die Simplio3D API und lieferte zu jedem Angebot eine generierte 3D-Ansicht.