Come spingere oltre Shopify Plus: 3D Configuration & Made-to-Order

Fondata nel 1954 da Ernesto Colnago, Colnago rappresenta l’apice dell’artigianato italiano e dell’innovazione nel mondo delle biciclette da corsa. Con una tradizione di oltre sei decenni di successi nel ciclismo professionistico, Colnago è sinonimo di qualità, prestazioni e stile ineguagliabili. Scelto dai campioni e amato dagli appassionati, Colnago continua a ridefinire gli standard delle biciclette di alta gamma, offrendo un’esperienza di guida senza pari.

Shopify Plus è una piattaforma potente e flessibile per la creazione di esperienze di e-commerce avanzate. Non sempre tuttavia si ha la possibilità di vedere come si adatta realmente a progetti complessi con requisiti avanzati. 

Con il progetto realizzato per Colnago, l'asso del ciclismo, abbiamo ridefinito i limiti di Shopify Plus.

In questo articolo, esploreremo come abbiamo creato un’esperienza Made-To-Order con un flusso d’ordine personalizzato, integrando un configuratore 3D e utilizzando un’architettura headless con Shopify Hydrogen e Oxygen.

La sfida principale del progetto era offrire ai clienti di Colnago un'esperienza di personalizzazione avanzata per le biciclette Made-To-Order. L'obiettivo era permettere agli utenti di configurare ogni dettaglio della loro bicicletta, visualizzandolo in tempo reale attraverso un render 3D di alta qualità, e fornire un flusso d’ordine personalizzato che permettesse di pre-acquistare la bicicletta versando un anticipo.

Questo progetto ambizioso richiedeva una soluzione che garantisse flessibilità, prestazioni elevate e un'integrazione perfetta con Shopify Plus.

Abbiamo adottato un'architettura headless con Hydrogen e Oxygen che separa il frontend dal backend. Questo approccio offre numerosi vantaggi, tra cui una maggiore flessibilità nello sviluppo e un'esperienza utente più reattiva e personalizzata.

Per questo progetto del configuratore abbiamo scelto di seguire le soluzioni più semplici (nel taschino c'è sempre il rasoio di Occam): Shopify, lo storefront Hydrogen e un motore di rendering 3D (fornito da terzi), senza l'uso di custom app o 3rd party app.

Il layer frontend separato ci ha consentito di implementare le logiche applicative e di presentazione con la massima flessibilità e senza vincoli stringenti, rimanendo all'interno del perimetro delle tecnologie gestite da Shopify.

Qualche anno fa, per implementare un'architettura headless era necessario ricorrere a componenti esterni di fornitori terzi (framework, runtime, ecc.), con tutti i limiti del caso. Oggi, invece, con Shopify è possibile utilizzare le soluzioni offerte direttamente dalla piattaforma, che sono parte integrante del contratto Plus. Ma di cosa si tratta?

Hydrogen viene definito come uno storefront toolkit per la creazione di frontend e-commerce basati su React, creato e ottimizzato per Shopify. È implementato a sua volta con il framework Remix, progetto acquistato recentemente da Shopify (Approfondisci)

Oxygen è invece è l'ambiente di hosting di Hydrogen, ottimizzato per le applicazioni sviluppate con questo framework. Questo ambiente offre prestazioni elevate, scalabilità e sicurezza (Per i tech audaci: Approfondisci qui)

L’uso di questo stack tecnologico ci ha permesso di rimanere completamente all'interno dei prodotti offerti e mantenuti da Shopify, mantenendo la flessibilità necessaria per implementare storefront di nuova generazione.

Il configuratore è il fulcro dell'esperienza Made-To-Order di Colnago. Questa applicazione consente agli utenti di selezionare e personalizzare ogni componente della bicicletta, dalla scelta del telaio alla configurazione dei dettagli come colori, grafiche e accessori. Il configuratore è stato sviluppato attraverso tre componenti principali: 

L'intero flusso dell'ordine è stato progettato per gestire in modo efficiente le personalizzazioni. Una volta completata la configurazione, tutte le specifiche vengono salvate e trasferite al carrello e al processo di checkout. Questo garantisce che ogni dettaglio sia mantenuto e visualizzato correttamente fino al completamento dell'ordine, offrendo un'esperienza d'acquisto coerente e senza interruzioni.

La particolarità è che il flusso dell’ordine è stato progettato per rappresentare non l’acquisto vero e proprio del prodotto ma per prenotare il prodotto versando un anticipo sul prezzo totale, approccio molto simile a quello che viene utilizzato nel settore automotive di nuova generazione.

Per offrire una visualizzazione realistica delle biciclette personalizzate, abbiamo collaborato con un'agenzia specializzata in rendering 3D. Il motore di rendering 3D integra perfettamente i modelli delle biciclette configurate, fornendo immagini ad alta risoluzione che mostrano ogni dettaglio delle personalizzazioni in tempo reale. Questo elemento è fondamentale per permettere ai clienti di vedere esattamente come sarà la loro bicicletta, migliorando l'interazione e riducendo l'incertezza durante il processo d'acquisto.

Ogni volta che i parametri di configurazione vengono modificati a frontend, i nuovi valori vengono inviati al motore di rendering per l'aggiornamento della preview della bicicletta.

Il caso del configuratore Colnago dimostra come sia possibile ridefinire i limiti di Shopify Plus per creare esperienze di e-commerce sempre più avanzate e personalizzate. Grazie all'architettura headless con Hydrogen e Oxygen, è possibile realizzare progetti ambiziosi che soddisfano le esigenze specifiche dei clienti. Shopify Plus, con la sua flessibilità e potenza, rappresenta oggi una valida scelta per chi desidera innovare e offrire esperienze d'acquisto uniche e di alta qualità.

Prova il configuratore qui: Configuratore C68

Contattaci se vuoi maggiori info a [email protected]