Voltar para estudos de caso
Building productsbuilding productsbike racks3d viewersite furnishings
Dero: um configurador 3D de suportes para bicicletas incorporado sem código
Dero·
A Dero é uma fabricante de estacionamento para bicicletas em Minneapolis, Minnesota, e uma empresa PlayCore. Produz suportes para bicicletas comerciais e personalizados, estações públicas de reparação de bicicletas, abrigos para bicicletas, cacifos para bicicletas, mobiliário urbano e produtos para espaços públicos, e apoia os seus clientes desde 1995 — desde proprietários que compram um único suporte até arquitetos que planeiam uma sala para bicicletas para centenas de ciclistas. As suas páginas de produtos incluem o que os especificadores procuram: brochuras, fichas de submissão, guias de instalação, ficheiros CAD, Revit e SketchUp e especificações CSI.
Sete dessas páginas incluem agora também um configurador 3D de suportes para bicicletas, desenvolvido em Simplio3D e identificado simplesmente como Visualizador 3D. É intencionalmente simples. O visitante escolhe como o suporte é montado, adiciona uma barra de apoio quando o suporte a disponibiliza e experimenta os acabamentos, vendo o suporte mudar em 3D. Não há preço, carrinho nem formulário, e a sua implementação em dero.com exigiu apenas colar um snippet de incorporação, sem programação.
O projeto em resumo
| Item | Detalhes |
|---|---|
| Cliente | Dero de Minneapolis, Minnesota, uma empresa PlayCore: suportes para bicicletas, suportes personalizados, reparação pública de bicicletas, abrigos para bicicletas, cacifos para bicicletas, mobiliário urbano e paisagismo urbano, desde 1995 |
| Website | dero.com, um site WordPress com a loja própria da Dero e lista de orçamentos |
| Produtos | Sete suportes comerciais para bicicletas: Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch e Bike Bike Rack |
| O que o Visualizador 3D faz | Exibe o suporte em 3D com a fixação escolhida, a barra de apoio ativada ou desativada quando o suporte a possui e qualquer um dos 22 acabamentos, com um resumo das escolhas |
| O que fica de fora | Preços, um carrinho e um formulário. As compras e os orçamentos permanecem nas opções que as páginas de produtos da Dero já ofereciam |
| Configuração | Um configurador básico por suporte, incorporado ao colar o respetivo snippet sob o título “Visualizador 3D” na página do produto. Sem plugin, sem integração com a loja, sem código para escrever |
| Plataforma | A versão anterior do Simplio3D |
O que o cliente precisava
O acabamento do próprio suporte
Os suportes da Dero estão disponíveis galvanizados, em aço inoxidável ou numa variedade de cores com pintura a pó. Uma pequena amostra diz pouco sobre o aspeto de uma cor num suporte completo.
À superfície ou enterrado
Cada um destes suportes pode ser fixado com parafusos em placas de base ou instalado no solo, e as duas opções têm um aspeto diferente no ponto onde o suporte encontra o chão.
Uma barra inclinada onde existe uma
Quatro dos sete racks aceitam uma barra inclinada opcional, pelo que as respetivas pré-visualizações precisavam de uma forma de a adicionar e remover novamente.
Uma pré-visualização, não uma segunda loja
Cada página de produto já tinha as suas próprias opções para comprar ou pedir um orçamento. A vista 3D apenas tinha de ajudar as pessoas a escolher.
Uma forma de trabalhar em toda a gama
Sete racks precisavam das mesmas opções no mesmo lugar, para que um visitante que tenha usado um Visualizador 3D saiba utilizar todos.
Sem projeto de desenvolvimento
Os visualizadores tinham de ser integrados nas páginas de produto WordPress existentes, sem plugin, programador ou qualquer alteração à loja.
A solução: um configurador 3D de suportes para bicicletas em sete páginas de produtos
No dero.com, cada suporte tem a sua própria página de produto, com descrição, documentos e transferências, bem como as opções da Dero para comprar ou pedir um orçamento. Sete deles, desde o Hoop Rack, que a Dero chama de referência em estacionamento para bicicletas, até ao Bike Bike Rack, com formato de bicicleta, incluem agora uma secção mais abaixo na página intitulada Visualizador 3D.
Cada Visualizador 3D é um configurador básico. O suporte roda e amplia sobre um fundo cinzento-claro, e o painel ao lado inclui no máximo três opções: a montagem, a barra de apoio e o acabamento. Nada tem preço, nada é adicionado ao carrinho e nada é enviado. A sua única função é mostrar o suporte, e foi por isso que exigiu tão pouca configuração.
Montagem, barra de apoio e acabamento, apresentados no suporte em 3D
As três opções são as que alteram o aspeto de um suporte depois de instalado:
- Montagem. Um menu pendente com Superfície e Enterrada. Superfície mostra o suporte sobre as placas de base com que é aparafusado; Enterrada substitui-as por pernas mais compridas que entram no solo.
- Barra de apoio. Um interruptor no Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack e Arc Rack. Quando ativado, surge uma barra horizontal ao longo do suporte; os outros três suportes simplesmente não apresentam este interruptor.
- Acabamento. 22 amostras, iguais em todos os suportes: Galvanizado e Inoxidável, seguidos de Preto, Preto Mate, Branco, Cinzento-claro, Vermelho, Amarelo, Amarelo-vivo, Laranja, Azul, Azul-celeste, Verde, Verde-claro, Verde-caçador, Castanho-sépia, Bronze, Prata, Roxo-escuro, Vermelho-vinho, Bege e Cinzento-ferro. A amostra galvanizada apresenta a textura mosqueada do aço galvanizado em vez de uma cor lisa.
Um pequeno botão (i) sob o painel abre o Resumo da configuração, que lista as opções por extenso: no Swerve Rack, por exemplo, Selecionar montagem: Superfície e Selecionar acabamento: Vermelho-vinho. O visitante pode então avançar diretamente para as opções de compra ou orçamento na mesma página.
O que cada visualizador 3D oferece
Sete suportes, cada um com seu próprio visualizador 3D na respetiva página de produto.
| Suporte para bicicletas | Como a Dero o descreve | Opções no Visualizador 3D |
|---|---|---|
| Suporte Hoop | O padrão em estacionamento para bicicletas: tubo espesso com curvatura de raio completo; acomoda duas bicicletas | Suporte de montagem, barra de apoio, 22 acabamentos |
| Suporte Hoop para Serviço Pesado | Um tubo maior e mais espesso do que o Suporte Hoop padrão | Suporte de montagem, barra de apoio, 22 acabamentos |
| Suporte Downtown | Tubo quadrado espesso e largura ampliada para suporte total; acomoda duas bicicletas | Suporte de montagem, barra de apoio, 22 acabamentos |
| Arc Rack | Tubulação quadrada com linhas geométricas limpas; acomoda duas bicicletas | Suporte de montagem, barra de apoio, 22 acabamentos |
| Swerve Rack | Tubo espesso em um formato que acompanha o quadro da bicicleta; acomoda duas bicicletas | Montagem, 22 acabamentos |
| Bike Hitch | Um poste e anel com curvatura de raio completo e silhueta esbelta; acomoda duas bicicletas | Montagem, 22 acabamentos |
| Suporte para bicicletas em forma de bicicleta | Um suporte em forma de bicicleta, descrito como uma peça funcional de arte urbana; acomoda de duas a quatro bicicletas | Montagem, 22 acabamentos |
Como configurar um visualizador 3D como o da Dero
Cinco passos, sem necessidade de código.
Carregue o modelo 3D
Adicione o modelo do suporte a um novo projeto. Simplio3D aceita arquivos GLB, GLTF, FBX, OBJ, STL e DAE.
Adicione o tipo de fixação
Um menu suspenso com as opções Sobre a superfície e Embutido no solo, cada uma exibindo a base correspondente no modelo.
Adicione a barra de apoio
Um interruptor que mostra ou oculta a barra nos suportes que a têm.
Adicione os acabamentos
Uma amostra por acabamento: uma textura para aço galvanizado e uma cor para cada um dos restantes.
Cole o snippet de incorporação
Copie o snippet de iframe do configurador e cole-o na página do produto. As alterações feitas posteriormente em Simplio3D aparecem na página sem ser necessário editá-la novamente.
Uma pré-visualização ao lado das opções de compra e orçamento da Dero
As páginas de produto da Dero já permitem vender. Cada uma tem as opções da própria Dero para comprar ou pedir um orçamento: acabamento, montagem e, quando aplicável, a barra de apoio, seguidos da quantidade, Adicionar ao carrinho e Adicionar ao orçamento, sendo que quantidades maiores passam pela lista de orçamento. O Visualizador 3D encontra-se na mesma página e não interfere com nada disso.
Não tem preço, carrinho nem formulário próprio e não envia nada para lado nenhum. O visitante vê o suporte com a montagem e o acabamento que pretende e, depois, faz as mesmas escolhas nas opções da Dero. Mantê-lo tão simples foi o que permitiu publicá-lo rapidamente: não havia produtos para associar, preços para sincronizar nem formulários para encaminhar.
Incorporado sem escrever código
Todos os configuradores Simplio3D têm uma ligação de partilha e um snippet iframe para copiar. Em cada página de produto da Dero, esse snippet encontra-se sob o título Visualizador 3D, ocupando toda a largura. Não há plugin, script nem ligação à loja, pelo que publicar um visualizador significou apenas colar um snippet numa página.
Como a página contém apenas esse snippet, o próprio Visualizador 3D é gerido em Simplio3D. Um novo acabamento ou um modelo atualizado é alterado aí e aparece no dero.com na próxima vez que a página for carregada, sem que ninguém tenha de editar a página do produto. Saiba mais sobre visualizadores como este: o visualizador de produtos 3D.
Resultados
Todos os acabamentos, visualizados no suporte
Os visitantes podem testar todos os 22 acabamentos no suporte que estão vendo, com a montagem e a barra de apoio de que precisam, antes de comprar ou solicitar um orçamento.
A mesma ferramenta em sete páginas
Do Hoop Rack ao Bike Bike Rack, cada Visualizador 3D funciona da mesma forma, com os mesmos três tipos de opções e os mesmos acabamentos.
Nada de novo para manter no site
As páginas de produto contêm apenas um snippet de incorporação. As alterações são feitas no Simplio3D, e a loja e a lista de orçamentos continuam como antes.
O que a Dero diz
O Simplio3D facilitou a apresentação dos nossos suportes para bicicletas tal como ficarão depois de instalados. Cada Visualizador 3D inclui a fixação, a barra de apoio quando o suporte a inclui, e toda a nossa gama de acabamentos; para o colocar numa página de produto, bastou colar o código de incorporação. Sem programador, sem plugin, e as páginas continuam simples de gerir.
Colin K.Designer · Dero
Dúvidas sobre este projeto
Uma ferramenta que mostra um suporte para bicicletas em 3D e permite ao comprador alterar as suas opções, como a fixação, uma barra de apoio ou o acabamento, e ver o resultado antes de encomendar. O da Dero é propositadamente básico: três tipos de escolha e uma vista em 3D, sem preço nem formulário.
Sete suportes comerciais: o Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch e Bike Bike Rack. Cada visualizador está na página do produto do respetivo suporte em dero.com.
A montagem (à superfície ou embutida no solo), a barra de apoio nos quatro suportes que a oferecem e o acabamento, entre 22 amostras que incluem aço galvanizado, aço inoxidável e 20 cores. Um resumo apresenta as opções por extenso.
As páginas de produtos da Dero já têm as suas próprias opções para comprar ou pedir um orçamento. O Visualizador 3D apenas ajuda os visitantes a escolher, o que tornou a configuração simples e facilita a sua manutenção.
Não. Cada Visualizador 3D é um trecho de iframe copiado de Simplio3D e colado na página do produto. Não existe plugin nem ligação à loja, e as alterações feitas em Simplio3D surgem na página sem ser necessário editá-la.
Sim. Um configurador Simplio3D pode adicionar regras condicionais, preços, um formulário de orçamento ou contacto, ou realidade aumentada quando um produto precisar desses recursos. A próxima secção descreve o que um projeto como este poderia adicionar hoje.
O que um projeto como este incluiria hoje
Nada desta secção faz parte dos Visualizadores 3D da Dero descritos acima, que utilizam a versão anterior do Simplio3D. Para um fabricante de suportes para bicicletas ou mobiliário urbano que esteja a começar agora:
- O suporte no local onde será instalado. A realidade aumentada coloca o suporte configurado no passeio ou numa sala para bicicletas através de um telemóvel, sem aplicação: AR Quick Look em iOS, Scene Viewer em Android e um código QR a partir de um navegador de computador.
- Detalhes no modelo. Os hotspots adicionam marcadores com janelas de informação, por exemplo o tamanho do tubo ou quantas bicicletas o suporte acomoda, e o Scenery altera o fundo e a câmara.
- O visualizador e o formulário de encomenda sincronizados. Um configurador incorporado comunica cada alteração como um evento do navegador,
simplio3d:option.changed, para que um site que o pretenda possa pré-selecionar o mesmo acabamento e montagem no seu próprio formulário de encomenda com algumas linhas do seu próprio script. - O restante catálogo, mais rapidamente. Um primeiro configurador para outro suporte pode ser gerado a partir de uma descrição escrita, e a adição em massa por categoria transforma uma gama de acabamentos da biblioteca de materiais partilhada num conjunto de amostras sem criar cada amostra manualmente.
- Verificação de cada visualizador. O assistente de IA pode auditar a cobertura das opções e a lógica condicional, por exemplo, confirmando que cada acabamento tem um material, e propor correções. Um cliente de IA como o Claude, ligado ao espaço de trabalho através de MCP com uma ligação limitada por âmbito, pode executar as mesmas verificações, e as alterações de preços ou SKUs chegam sempre como alterações pendentes que uma pessoa aplica.
Pré-visualizações 3D para cada persiana
Como a Evergreen Shutters gera uma visualização 3D de cada persiana em cada orçamento do seu próprio sistema de orçamentação.
Cores e um formulário, nada mais
Como a Fanbedarf.de integrou um configurador 3D de casacos no seu site WordPress, com quatro modelos, cores de tecido e um formulário de pedido.
Um visualizador de produtos para qualquer catálogo
Apresente produtos em 3D em qualquer site, com rotação, zoom, animações e anotações, para vitrines e páginas de produtos.
Construa, implemente e escale o comércio 3D.
Tenha um configurador de produtos 3D para impulsionar vendas e gerar propostas diretamente do seu site.
Estudos de caso relacionados
Tentest: um configurador 3D de tendas pop-up com uma área de design em cada painel
A Tentest, fabricante estoniana de tendas pop-up do Scandipro Group, criou o seu próprio configurador 3D: seis tamanhos de tenda, uma área de design com carregamento de logótipo em cada painel, AR e um pedido de orçamento.
Fell & Frame: um configurador de janelas de madeira desenvolvido internamente para a WooCommerce
A Fell & Frame, uma marcenaria de Carlisle, criou o seu próprio configurador de janelas de madeira na Simplio3D. Os compradores dimensionam seis tipos de janelas de batente ao milímetro e adicionam-nos ao carrinho da WooCommerce.
Persianas Evergreen: pré-visualizações 3D de persianas dentro de um sistema interno de cotações
A Evergreen Shutters Ltd precisava de visuais precisos para milhares de variações de persianas dentro de sua própria plataforma de cotações. Em vez de construir um motor 3D, eles integraram o Simplio3D API e retornaram uma visualização 3D gerada com cada cotação.