Volver a estudios de caso
Building productsbuilding productsbike racks3d viewersite furnishings
Dero: un configurador 3D de aparcabicis integrado sin código
Dero·
Dero es un fabricante de aparcamientos para bicicletas de Minneapolis, Minnesota, y una empresa de PlayCore. Fabrica portabicicletas comerciales y personalizados, estaciones públicas de reparación de bicicletas, refugios para bicicletas, taquillas para bicicletas, mobiliario urbano y productos para el paisaje urbano, y apoya a sus clientes desde 1995, desde propietarios que compran un solo soporte hasta arquitectos que planifican una sala para bicicletas para cientos de usuarios. Sus páginas de producto incluyen lo que buscan los especificadores: folletos, fichas de presentación, guías de instalación, archivos CAD, Revit y SketchUp, y especificaciones CSI.
Siete de esas páginas ahora también cuentan con un configurador 3D de portabicicletas, creado en Simplio3D y titulado simplemente Visor 3D. Es deliberadamente básico. El visitante elige cómo se monta el soporte, añade una barra de apoyo cuando el modelo la ofrece y prueba sus acabados, mientras el soporte cambia en 3D. No hay precio, carrito ni formulario, y añadirlo a dero.com solo requirió pegar un fragmento de inserción, sin programar.
El proyecto de un vistazo
| Elemento | Detalles |
|---|---|
| Cliente | Dero de Minneapolis, Minnesota, una empresa de PlayCore: aparcabicicletas, soportes personalizados, reparación pública de bicicletas, refugios para bicicletas, taquillas para bicicletas, mobiliario urbano y paisajismo urbano, desde 1995 |
| Sitio web | dero.com, un sitio de WordPress con la propia tienda y lista de cotizaciones de Dero |
| Productos | Siete aparcabicicletas comerciales: Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch y Bike Bike Rack |
| Qué hace el visor 3D | Muestra el soporte en 3D con el montaje elegido, la barra de apoyo activada o desactivada cuando el soporte dispone de ella, y cualquiera de los 22 acabados, junto con un resumen de las selecciones |
| Qué omite | Precios, un carrito y un formulario. Las compras y cotizaciones mantienen las opciones que ya tenían las páginas de productos de Dero |
| Configuración | Un configurador básico por soporte, integrado al pegar su fragmento bajo un encabezado de «Visor 3D» en la página del producto. Sin plugin, sin integración con la tienda, sin código que escribir |
| Plataforma | La versión anterior de Simplio3D |
Lo que necesitaba el cliente
El acabado del propio soporte
Los soportes de Dero están disponibles galvanizados, en acero inoxidable o en una gama de colores con recubrimiento en polvo. Una pequeña muestra dice poco sobre cómo se ve un color en un soporte completo.
De superficie o empotrado
Cada uno de estos soportes puede fijarse con pernos sobre placas base o instalarse en el suelo, y ambas opciones tienen un aspecto diferente en el punto donde el soporte se une al suelo.
Una barra inclinada donde corresponda
Cuatro de los siete racks incorporan una barra inclinada opcional, por lo que sus vistas previas necesitaban una forma de añadirla y quitarla de nuevo.
Una vista previa, no una segunda tienda
Cada página de producto ya contaba con sus propias opciones para comprar o solicitar un presupuesto. La vista 3D solo tenía que ayudar a las personas a elegir.
Una misma forma de trabajar en toda la gama
Los siete racks necesitaban las mismas opciones en el mismo lugar, para que quien haya utilizado un visor 3D conozca todos.
Sin proyecto de desarrollo
Los visores debían integrarse en las páginas de producto existentes de WordPress sin necesidad de un plugin, un desarrollador ni ningún cambio en la tienda.
La solución: un configurador 3D de portabicicletas en siete páginas de producto
En dero.com, cada soporte tiene su propia página de producto, con descripción, documentos y descargas, además de las opciones de Dero para comprar o solicitar un presupuesto. Siete de ellos, desde el Hoop Rack, que Dero denomina el estándar en aparcamiento para bicicletas, hasta el Bike Bike Rack, con forma de bicicleta, cuentan ahora con una sección titulada Visor 3D más abajo en la página.
Cada Visor 3D es un configurador básico. El soporte gira y se amplía sobre un fondo gris claro, y el panel lateral contiene como máximo tres opciones: el montaje, la barra de apoyo y el acabado. No se muestra ningún precio, no se añade nada al carrito ni se envía información. Su única función es mostrar el soporte, por lo que hubo muy poco que configurar.
Montaje, barra de apoyo y acabado, mostrados en el soporte en 3D
Las tres opciones son las que cambian el aspecto de un soporte una vez instalado:
- Montaje. Un menú desplegable con Superficie y Empotrado. Superficie muestra el soporte sobre las placas base con las que se fija mediante pernos; Empotrado las sustituye por patas más largas que se introducen en el suelo.
- Barra de apoyo. Un interruptor en el Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack y Arc Rack. Al activarlo, aparece una barra horizontal a lo largo del soporte; los otros tres soportes simplemente no muestran el interruptor.
- Acabado. 22 muestras, las mismas en todos los soportes: Galvanizado e Inoxidable, seguidos de Negro, Negro mate, Blanco, Gris claro, Rojo, Amarillo, Amarillo brillante, Naranja, Azul, Azul cielo, Verde, Verde claro, Verde cazador, Marrón sepia, Bronce, Plata, Morado oscuro, Rojo vino, Beige y Gris hierro. La muestra galvanizada muestra la textura moteada del acero galvanizado en lugar de un color plano.
Un pequeño botón (i) bajo el panel abre el Resumen de configuración, que enumera las opciones en palabras: en el Swerve Rack, por ejemplo, Seleccionar montaje: Superficie y Seleccionar acabado: Rojo vino. El visitante puede llevar esa información directamente a las opciones de compra o presupuesto de la misma página.
Lo que ofrece cada visor 3D
Siete soportes, cada uno con su propio visor 3D en la página de su producto.
| Soporte | Cómo lo describe Dero | Opciones en el visor 3D |
|---|---|---|
| Soporte Hoop | El estándar en estacionamiento para bicicletas: tubo grueso con curva de radio completo; permite estacionar dos bicicletas | Montaje, barra de apoyo, 22 acabados |
| Soporte Hoop de alta resistencia | Un tubo más grande y grueso que el soporte Hoop estándar | Montaje, barra de apoyo, 22 acabados |
| Soporte Downtown | Tubo cuadrado grueso y ancho ampliado para un soporte total; aparca dos bicicletas | Montaje, barra de apoyo, 22 acabados |
| Arc Rack | Tubo cuadrado de líneas geométricas limpias; aparca dos bicicletas | Montaje, barra de apoyo, 22 acabados |
| Swerve Rack | Tubo grueso con una forma que sigue el cuadro de una bicicleta; aparca dos bicicletas | Soporte, 22 acabados |
| Bike Hitch | Un poste y un aro con una curva de radio completo y una silueta estilizada; aparca dos bicicletas | Soporte, 22 acabados |
| Soporte para bicicletas Bike Bike | Un soporte con forma de bicicleta, descrito como una pieza funcional de arte urbano; permite estacionar de dos a cuatro bicicletas | Soporte, 22 acabados |
Cómo se configura un visor 3D como el de Dero
Cinco pasos, ninguno de los cuales requiere código.
Sube el modelo 3D
Añade el modelo del soporte a un proyecto nuevo. Simplio3D acepta archivos GLB, GLTF, FBX, OBJ, STL y DAE.
Añade el tipo de montaje
Un menú desplegable con las opciones de superficie y empotrado en el suelo, cada una mostrando la base correspondiente en el modelo.
Añade la barra de apoyo
Un interruptor que muestra u oculta la barra en los aparcabicicletas que la incluyen.
Añade los acabados
Una muestra por acabado: una textura para el acero galvanizado y un color para cada uno de los demás.
Pega el fragmento de inserción
Copia el fragmento iframe del configurador y pégalo en la página del producto. Los cambios posteriores realizados en Simplio3D aparecerán en la página sin necesidad de volver a editarla.
Una vista previa junto a las opciones de compra y presupuesto de Dero
Las páginas de producto de Dero ya permiten comprar. Cada una incluye las opciones propias de Dero para comprar o solicitar un presupuesto: acabado, montaje y, cuando corresponde, la barra de apoyo; después, una cantidad, Añadir al carrito y Añadir al presupuesto, mientras que las cantidades mayores se gestionan mediante la lista de presupuestos. El Visor 3D se encuentra en la misma página y no interfiere con nada de ello.
No tiene precio, carrito ni formulario propios, y no envía nada a ningún lugar. El visitante observa el soporte con el montaje y el acabado que tiene en mente, y después elige las mismas opciones en la configuración de Dero. Mantenerlo tan sencillo fue lo que permitió publicarlo rápidamente: no había ningún producto que vincular, ningún precio que mantener sincronizado ni ningún formulario que dirigir a alguien.
Integrado sin escribir código
Todos los configuradores de Simplio3D incluyen un enlace para compartir y un fragmento iframe para copiar. En cada página de producto de Dero, ese fragmento aparece bajo el título Visor 3D, a ancho completo. No hay plugin, script ni conexión con la tienda, por lo que publicar un visor solo implicó pegar un fragmento en una página.
Como la página solo contiene ese fragmento, el propio Visor 3D se gestiona en Simplio3D. Un nuevo acabado o un modelo actualizado se modifica allí y aparece en dero.com la próxima vez que se carga la página, sin que nadie tenga que editar la página de producto. Más información sobre visores como este: el visor de productos 3D.
Resultados
Cada acabado, visible en el soporte
Los visitantes pueden probar los 22 acabados en el soporte que están viendo, con el montaje y la barra de apoyo que necesitan, antes de comprar o solicitar un presupuesto.
La misma herramienta en siete páginas
Desde el Hoop Rack hasta el Bike Bike Rack, cada visor 3D funciona de la misma manera, con los mismos tres tipos de opciones y los mismos acabados.
Nada nuevo que mantener en el sitio
Las páginas de producto solo contienen un fragmento de código de inserción. Los cambios se realizan en Simplio3D, y la tienda y la lista de presupuestos continúan como antes.
Lo que dice Dero
Simplio3D facilitó mostrar nuestros aparcabicicletas tal y como se verán una vez instalados. Cada visor 3D incluye el anclaje, la barra de apoyo cuando corresponde y toda nuestra gama de acabados, y añadirlo a una página de producto fue tan sencillo como pegar el código de inserción. Sin desarrollador, sin plugin y con páginas fáciles de mantener.
Colin K.Diseñador · Dero
Preguntas sobre este proyecto
Una herramienta que muestra un aparcabicicletas en 3D y permite al comprador cambiar sus opciones, como el anclaje, una barra de apoyo o el acabado, y ver el resultado antes de realizar el pedido. El de Dero es deliberadamente básico: tres tipos de opciones y una vista 3D, sin precio ni formulario.
Siete soportes comerciales: el Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch y Bike Bike Rack. Cada visor está en la página de producto correspondiente de ese soporte en dero.com.
El montaje (en superficie o empotrado en el suelo), la barra de apoyo en los cuatro soportes que la ofrecen y el acabado, entre 22 muestras que incluyen acero galvanizado, acero inoxidable y 20 colores. Un resumen enumera las opciones en palabras.
Las páginas de producto de Dero ya cuentan con sus propias opciones para comprar o solicitar un presupuesto. El visor 3D solo ayuda a los visitantes a elegir, lo que simplificó su configuración y facilita su mantenimiento.
No. Cada visor 3D es un fragmento de iframe copiado de Simplio3D y pegado en la página de producto. No hay ningún plugin ni conexión con la tienda, y los cambios realizados en Simplio3D aparecen en la página sin necesidad de editarla.
Sí. Un configurador de Simplio3D puede incorporar reglas condicionales, precios, un formulario de presupuesto o contacto, o realidad aumentada cuando un producto lo necesite. La siguiente sección describe lo que un proyecto como este podría añadir hoy.
Qué añadiría hoy un proyecto como este
Nada de esta sección forma parte de los Visores 3D de Dero descritos anteriormente, que funcionan con una versión anterior de Simplio3D. Para un fabricante de portabicicletas o mobiliario urbano que empieza ahora:
- El soporte donde se instalará. La realidad aumentada coloca el soporte configurado sobre el pavimento o en una sala para bicicletas mediante un teléfono, sin necesidad de app: AR Quick Look en iOS, Scene Viewer en Android y un código QR desde un navegador de escritorio.
- Detalles sobre el modelo. Los hotspots añaden marcadores con ventanas emergentes de información, por ejemplo, el diámetro del tubo o cuántas bicicletas admite el soporte, y Scenery cambia el fondo y la cámara.
- El visor y el formulario de pedido sincronizados. Un configurador integrado comunica cada cambio como un evento del navegador,
simplio3d:option.changed, para que un sitio que lo desee pueda preseleccionar el mismo acabado y montaje en su propio formulario de pedido con unas pocas líneas de su propio script. - El resto de la gama, más rápido. Se puede generar un primer configurador para otro soporte a partir de una descripción escrita, y la adición masiva por categoría convierte una gama de acabados de la biblioteca compartida de materiales en un conjunto de muestras sin tener que crear cada una manualmente.
- Revisar cada visor. El asistente de IA puede auditar la cobertura de opciones y la lógica condicional, por ejemplo, comprobar que cada acabado tenga un material, y proponer correcciones. Un cliente de IA como Claude, conectado al espacio de trabajo mediante MCP con una conexión acotada, puede realizar las mismas comprobaciones, y los cambios en precios o SKU solo llegan como cambios pendientes que una persona aplica.
Vistas previas en 3D para cada persiana
Cómo Evergreen Shutters genera una vista en 3D de cada persiana con cada presupuesto desde su propio sistema de presupuestos.
Colores y un formulario, nada más
Cómo Fanbedarf.de incorporó un configurador de chaquetas en 3D en su sitio de WordPress con cuatro modelos, colores de tela y un formulario de solicitud.
Un visor de productos para cualquier catálogo
Muestra productos en 3D en cualquier sitio web, con rotación, zoom, animaciones y anotaciones, para escaparates y páginas de productos.
Crea, implementa y escala el comercio 3D.
Posee un configurador de productos 3D para impulsar ventas y generar propuestas directamente desde tu sitio web.
Estudios de caso relacionados
Tentest: un configurador de carpas plegables 3D con un lienzo de diseño en cada panel
Tentest, fabricante estonio de carpas plegables del grupo Scandipro, creó su propio configurador 3D: seis tamaños de carpa, un lienzo de diseño con carga de logotipos en cada panel, AR y una solicitud de presupuesto.
Fell & Frame: un configurador de ventanas de madera desarrollado internamente para WooCommerce
Fell & Frame, una carpintería de Carlisle, desarrolló su propio configurador de ventanas de madera en Simplio3D. Los compradores ajustan al milímetro seis tipos de ventanas practicables y las añaden a la cesta de WooCommerce.
Persianas Evergreen: vistas previas en 3D de persianas dentro de un sistema interno de cotización
Evergreen Shutters Ltd necesitaba visuales precisos para miles de variaciones de persianas dentro de su propia plataforma de cotización. En lugar de construir un motor 3D, integraron el Simplio3D API y devolvieron una vista 3D generada con cada cotización.