Cos'è l'headless commerce e perché rappresenta il futuro dell'ecommerce

L'headless commerce è una delle tendenze in più rapida crescita nell'ecommerce. I suoi maggiori sostenitori citano diversi motivi per implementare un'architettura headless, come miglioramenti drastici nelle prestazioni del sito e un'agilità senza pari per apportare modifiche al volo.

L'headless commerce può dare ai brand piena libertà creativa permettendo anche agli sviluppatori di costruire esperienze ecommerce su misura con le tecnologie che preferiscono. Ma implementare un'architettura headless non è così facile come spesso viene pubblicizzato, e ci sono molte ragioni per cui passare all'headless non è giusto per ogni commerciante.

In questo articolo scoprirai di cosa si tratta nel dettaglio, quali sono i vantaggi che porta e come Shopify ha aiutato migliaia di brand a implementarlo con successo.

Cos'è l'headless commerce

L'headless commerce è un modello di ecommerce in cui il livello di presentazione front-end è separato dalla funzionalità back-end. Questo permette flessibilità nella distribuzione dei contenuti attraverso varie piattaforme come siti web, app, chioschi e dispositivi IoT.

I brand amano questa architettura perché sblocca la libertà creativa di costruire esperienze di storefront uniche che generalmente non sono possibili su piattaforme monolitiche. Gli sviluppatori sono desiderosi di passare all'headless perché offre un livello unico di controllo dello sviluppo e dà loro la libertà di sfruttare stack tecnologici componibili con la loro scelta di strumenti ecommerce best-of-breed.

Passare all'headless ti permette di creare multiple esperienze front-end per diversi punti di contatto con i clienti. I tuoi front-end web, mobile, vocali e point of sale (POS) possono comunicare con un singolo sistema backend tramite il livello API, il che permette ai brand emergenti di essere veramente omnichannel e di espandersi rapidamente a livello internazionale.

Cosa vuol dire headless commerce

Head vuol dire testa, e less vuol dire senza. In questo senso, "testa" si riferisce al front end dell'ecommerce tradizionale.

In parole semplici, quindi, l'headless commerce consiste nella separazione tra front end e back end di un'applicazione ecommerce.

Per fare un po' di chiarezza, con "front end" ci si riferisce alla presentazione dell'ecommerce al pubblico, quindi schede, pagine dei prodotti, ecc. Al contrario, "back end" indica la gestione dei prodotti.

Sul back end, puoi utilizzare servizi indipendenti gli uni dagli altri e fine-grained per soddisfare le complesse esigenze operative del tuo brand. Poiché il tuo stack tecnologico è componibile, potrai implementare il tuo CMS, CRM o DXP preferito a livello plug-and-play. Non c'è nemmeno vendor lock-in, il che ti permette di sostituire questi servizi best-of-breed ogni volta che le esigenze del tuo business cambiano, scegliendo il miglior prodotto o software specializzato per ogni singola funzione, invece che affidarsi a una singola suite integrata che copre più aree

Come funziona l'headless commerce

Per capire come funziona l'headless commerce, pensa alla struttura di un ecommerce tradizionale: da un lato avrai la piattaforma di gestione, il back end, all'interno della quale vengono definite tutte le caratteristiche dei prodotti, dal prezzo alle modalità di vendita. Dall'altro c'è il front end, ovvero tutto ciò a cui hanno accesso i clienti.

In questo senso si potrebbero immaginare back end e front end di un ecommerce tradizionale come due facce della stessa medaglia, che lavorano assieme per offrire un'esperienza unica.

Nell'ecommerce tradizionale tutti i canali dove compaiono i prodotti rimandano i clienti al sito dell'azienda, dove potranno completare l'acquisto.

Per l'azienda questo si traduce in un aumento della complessità del lavoro, perché la pagina del prodotto presente sull'ecommerce dovrà essere collegata a tutti i canali esterni al sito su cui l'azienda fa promozione.

Ad esempio, potresti promuovere i tuoi prodotti su Instagram grazie alle funzionalità di Instagram Shopping, ma i clienti dovranno comunque arrivare sul tuo sito per completare l'acquisto.

Per il cliente, questo "doppio passaggio" potrebbe rallentare l'esperienza d'acquisto, e una volta arrivato sul tuo sito potrebbe dilungarsi nella lettura della pagina prodotto e, nella peggiore delle ipotesi, decidere di non continuare con l'acquisto.

L'headless commerce permette invece di gestire in modo separato i contenuti e le funzionalità d'acquisto dei singoli prodotti rispetto ai canali in cui vengono esposti ai tuoi clienti.

Cosa fa l'headless commerce?

In pratica, il cliente avrà la possibilità di effettuare l'acquisto direttamente nel canale in cui ha visto il prodotto, senza dover necessariamente visitare o essere reindirizzato all'ecommerce dell'azienda.

Come? Creando delle schede informative dei prodotti in vendita che siano completamente scollegate dal resto dell'ecommerce. Queste schede potranno poi essere pubblicate direttamente sui canali all'interno dei quali avvengono i punti di contatto tra azienda e cliente.

In questo modo il processo d'acquisto è decisamente più fluido ed efficiente, e riduce drasticamente il tasso di abbandono del carrello.

La differenza principale tra ecommerce tradizionale e headless commerce è quindi nella gestione del business.

Con l'headless commerce non ci si concentra più sulla configurazione dei canali a cui assegnare i prodotti ma l'attenzione è tutta sui prodotti stessi e sulla customer experience.

Utilizzando l'headless commerce potrai quindi mostrare il tuo prodotto al cliente in tutti i punti di contatto in modo automatico e con una gestione centralizzata, senza quindi la necessità di una scheda prodotto specifica che rimandi al tuo ecommerce principale.

Che aspetto ha l'interfaccia di un headless commerce?

Ogni ecommerce è gestito da un API (Application Program Interface), ovvero l'interfaccia dell'applicazione.

Questa interfaccia rappresenta la connessione tra front end e back end di un ecommerce, e la linea attraverso cui le due parti scambiano informazioni e dati.

Un ecommerce tradizionale è gestito da una piattaforma di back end, come un CMS.

Al contrario, un headless commerce può avere diversi sistemi di back end in base alle esigenze del business.

Alcuni di questi sistemi possono essere:

• CMS: Content Management System
• PWA: Progressive Web App
• CRM: Customer Relationship Management
• DXP: Digital Experience Platform

Questi sistemi creano dei punti di contatto tra l'ecommerce e il cliente finale, e i clienti che si interfacciano con il front end dell'ecommerce vedono esclusivamente l'interfaccia utente che avrai scelto per offrire l'esperienza d'acquisto in quel punto di contatto.

3 vantaggi dell'headless commerce

Il più grande vantaggio dell'headless commerce è che è flessibile e presuppone che il commercio evolverà rapidamente, posizionandoti per essere ovunque il commercio e le nuove tecnologie ti porteranno. Ma ci sono diverse altre ragioni per cui le aziende emergenti cercano di passare all'headless.

Ecco tre vantaggi chiave dell'headless commerce:

1. Controllo creativo completo
2. Prestazioni del sito migliorate
3. Integrazione con i tuoi strumenti e servizi preferiti

1. Controllo creativo completo

Passare all'headless permette di creare esattamente l'aspetto e la sensazione che il tuo brand immagina, senza limitazioni. Ma tipicamente non è da dove la maggior parte dei brand inizia il proprio percorso ecommerce.

Un sistema monolitico dove il livello di presentazione (i cosiddetti temi o template) è strettamente definito e connesso al back-office, lo rende un luogo ideale per costruire rapidamente un negozio online e portare i tuoi prodotti sul mercato. Man mano che il tuo brand sviluppa la sua identità digitale, il tuo storefront richiede sempre più personalizzazioni per ottenere esperienze più dinamiche e personalizzate. Soluzioni avanzate di temi o template possono raggiungere alti livelli di personalizzazione. Ad esempio, Online Store 2.0 di Shopify offre un set di strumenti per sviluppatori che aprono enormi opportunità per rompere lo stampo del template e creare un'esperienza su misura e unica.

L'headless commerce trionfa quando un'architettura strettamente accoppiata inizia a presentare compromessi nella scelta di strumenti best-of-breed per realizzare esperienze su misura di qualsiasi livello di complessità. Utilizzare l'headless commerce significa che non ci sono più sacrifici di design: i brand possono personalizzare tutto e qualsiasi cosa possano immaginare, con gli strumenti di loro scelta.

L'headless ti permette anche di testare istantaneamente quello che costruisci così puoi ottimizzare la customer experience e il tuo tasso di conversione.

Poiché l'esperienza front-end è separata dal back end, è più semplice e meno rischioso apportare modifiche al front end sapendo che non impatterai sull'architettura back-end sottostante del sito.

Ad esempio, il commerciante Shopify Offlimits Cereal ha utilizzato una soluzione headless per creare un'esperienza d'acquisto simile a un distributore automatico che ha portato gli acquirenti a un checkout gamificato per rendere divertente l'acquisto di cereali.

2. Prestazioni del sito migliorate

Quando un cliente arriva sul tuo sito, hai solo un paio di secondi per assicurarti che la tua pagina si carichi per mantenere la loro attenzione.

WebsiteBuilderExpert ha scoperto che le velocità di caricamento possono fare o distruggere un sito web.

• Il 64% degli utenti smartphone si aspetta che le pagine si carichino in meno di quattro secondi
• Il 40% dei consumatori non aspetterà più di tre secondi prima di abbandonare un sito
• L'82% dei consumatori dice che le velocità di pagina lente impattano le loro decisioni d'acquisto

Utilizzare un'architettura headless rende possibile creare pagine che si caricano più velocemente su dispositivi desktop e mobile. Migliorare la velocità del tuo sito può anche impattare i tuoi profitti. Il punto di svolta di due-tre secondi è dove i tassi di rimbalzo schizzano alle stelle.

Questo significa che se un sito guadagna 100.000€ al giorno, un miglioramento di un secondo genera altri 7.000€ giornalieri. E vale anche il contrario.

I clienti non impareranno ad essere pazienti con pagine che si caricano lentamente, semplicemente lasceranno la pagina e controlleranno invece un concorrente. Utilizzando un'architettura headless, i brand possono migliorare l'esperienza del cliente e ridurre la probabilità che i clienti perdano interesse a causa dei tempi di caricamento lenti delle pagine.

3. Integrazione con i tuoi strumenti e servizi preferiti

I sistemi esistenti codificati in linguaggi diversi possono impedire integrazioni critiche, anche quelle che impattano negativamente l'esperienza del cliente. L'headless va d'accordo con tutti.

Con API potenti, l'headless ti permette di integrare tutti i tuoi sistemi esistenti (ERP, PIM, IMS, ecc.) per costruire un'esperienza di shopping utilizzando il linguaggio di programmazione di tua scelta. Non solo può proteggerti dai cambiamenti nella tecnologia, l'headless ti dà anche il potere di muoverti al tuoritmo e adattarti rapidamente quanto il commercio stesso.

L'headless commerce permette anche agli sviluppatori di utilizzare stack tecnologici componibili, che fornisce un livello di flessibilità senza pari. Puoi sostituire o eliminare componenti ogni volta che realizzi che non soddisfano più le tueesigenze. Integrazioni modulari e applicazioni best-of-breed permettono agli sviluppatori di aggiungere o cambiare funzionalità senza impattare l'intera piattaforma.

L'headless commerce è adatto al tuo business?

Se il tuo business sta prosperando con un'architettura tradizionale, potrebbe non valere la pena investire risorse finanziarie e temporali nell'headless. Tutto dipende da quello che stai cercando di ottenere.

Ma se vuoi un'esperienza cliente più personalizzata e unica insieme a uno sviluppo più flessibile, e hai le risorse di sviluppo per supportare una trasformazione headless, allora l'headless potrebbe essere giusto per te.

I brand che iniziano a esplorare un'architettura headless spesso si rivedono in alcuni di questi scenari:

• Ho già un'infrastruttura consolidata, e non è sempre facile integrare un altro strumento nella nostra tecnologia esistente
• Sento che ci stiamo muovendo più lentamente dei concorrenti perché non posso fare simultaneamente aggiustamenti front-end e back-end
• Voglio che la mia esperienza di shopping sia veloce per tutti gli acquirenti, e avere più controllo sugli elementi che influenzano le prestazioni e la velocità del sito
• Voglio reimmaginare un'esperienza unica con una visione creativa che va oltre le personalizzazioni che il mio tema o template attuale permette
• Non ho un'app mobile nativa per iOS o Android, o la mia app di shopping mobile non è user-friendly come vorrei che fosse
• Voglio costruire un'esperienza ecommerce storefront unica che non è possibile con la mia piattaforma attuale (ad esempio, specchi intelligenti, tecnologia indossabile, distributori automatici, ecc.)

Considera i tuoi costi

Mentre decidi come passare all'headless, considera costi e tempi. Il prezzo per un progetto headless enterprise potrebbe costare da centinaia di migliaia a milioni di euro inizialmente, più costi di manutenzione annuali, a seconda della funzionalità, degli strumenti di supporto e del livello di personalizzazione.

Altri canali costruiti su una piattaforma headless (come un'app mobile, stream audio, o integrazione di videogiochi) potrebbero costare anche solo 99€ al mese se utilizzi un'app per costruire il tuo storefront personalizzato.

Alla fine della giornata, il costo dell'headless varia a seconda della complessità della tua struttura. Costruzione e implementazione sono solo un set di costi. Non dimenticare di valutare le commissioni pagate ad agenzie esterne, o costi mensili come abbonamenti a una piattaforma CMS headless o commissioni di hosting a un provider cloud.

Come iniziare a fare headless commerce

Se hai considerato tutti i costi e le variabili dell'headless commerce e sei deciso a intraprendere questa strada, ecco a grandi linee quali saranno i passaggi che dovrai affrontare per iniziare:

1. Decidi se mantenere o cambiare la tua piattaforma commerce: nel caso di business di piccole dimensioni, la scelta migliore potrebbe essere quella di aggiungere API all'attuale piattaforma ecommerce. Aziende di medie e grandi dimensioni potrebbero invece decidere di passare a una soluzione SaaS (Software as a Service).
2. Scegli un CMS headless: puoi scegliere un CMS open-source o selezionarne uno da un fornitore SaaS. Potrai quindi utilizzare un CMS headless per creare i contenuti per tutti i canali che intendi utilizzare.
3. Sincronizza il CMS e le API: le API e il CMS dovranno comunicare per inviare il giusto contenuto ai giusti touchpoint. Se stai muovendo i primi passi nell'headless commerce e stai passando da un approccio tradizionale a quello headless, affronta la sincronizzazione con i giusti tempi. Parti da piccole sezioni del CMS, come un articolo del blog o una landing page. Effettua tutti i test e inizia a scalare solo quando ti senti sicuro di aver capito bene come affrontare tutti i passaggi.
4. Considera costi e tempi: come menzionato sopra, assicurati di aver valutato completamente tutti i costi associati e le tempistiche realistiche per l'implementazione.

Headless commerce con Shopify

Shopify ha supportato migliaia di aziende che cercavano di ripiattaformare verso un'architettura headless. Sviluppatori e commercianti sfruttano la suite completa di strumenti di sviluppo headless di Shopify per costruire esperienze personalizzate best-in-class in meno tempo e con costi inferiori. Le soluzioni headless di Shopify offrono a commercianti e sviluppatori la libertà di scegliere gli strumenti giusti per il lavoro e estendere le capacità del negozio con uno stack componibile di tecnologie.

Le soluzioni headless di Shopify consistono in:

• Storefront API, il livello API headless di Shopify
• Hydrogen e Oxygen, lo stack di sviluppo ufficiale di Shopify per l'headless commerce

Diamo un'occhiata più da vicino a come ognuno permette alle aziende emergenti di tutte le dimensioni di muoversi verso un'architettura headless.

Storefront API

Storefront API è la fondazione della nostra piattaforma headless. Fornisce accesso all'intera gamma di capacità commerce di Shopify che sono critiche per qualsiasi esperienza rivolta agli acquirenti, incluse:

• Carrello ottimizzato
• Pagine prodotto e collezione
• Ricerca e raccomandazioni
• Prezzi contestuali (ad esempio carrello ottimizzato)
• Abbonamenti e altre funzionalità B2B

Storefront API è agnostico a qualsiasi framework, dispositivo e piattaforma di servizio. Questo dà agli sviluppatori la libertà di utilizzare gli strumenti che già usano e amano, mentre sperimentano simultaneamente con nuove tecnologie. Gli sviluppatori possono costruire con qualsiasi framework di sviluppo come Next.js, Gatsby, e Astro, fare deploy sul loro servizio di hosting preferito, e collegarsi a qualsiasi sistema di terze parti che abbia un API.

Il rivenditore di abbigliamento online Kotn ha utilizzato Storefront API di Shopify e Next.js per consolidare due negozi in uno, con un nuovo CMS, pagine prodotto personalizzate e checkout.

“Shopify copre l'80% delle nostre esigenze, e penso che questo sia comune a tutti i commercianti. È quel prossimo 20% dove entra in gioco l'headless e dove davvero investiamo il nostro tempo. Quello che stiamo cercando di fare è lasciare che Shopify gestisca le cose che fa così bene, e noi possiamo concentrarci su quello che ci rende unici. È lì che siamo davvero andati con il nostro pensiero riguardo all'essere headless.” dice Benjamin Sehl, Co-fondatore di Kotn

Storefront API offre esperienze di acquisto fulminee su dispositivi, canali, località, e potenzia i più grandi eventi di vendita, servendo tutte le richieste legittime da client sia privati che pubblici senza limite di rate.

In molti casi, gli sviluppatori vogliono uno stack tecnologico più strutturato per accelerare lo sviluppo e arrivare sul mercato più velocemente, ed è qui che entrano in gioco Hydrogen e Oxygen.

Hydrogen e Oxygen

Lo stack di sviluppo ufficiale di Shopify consiste in Hydrogen e Oxygen, una combinazione di strumenti che fornisce un percorso chiaro per costruire siti headless commerce dinamici e performanti su Shopify che possono scalare infinitamente.

Hydrogen è costruito sopra il framework Remix basato su React e sfrutta la sua facilità d'uso, standard di sviluppo web di alta qualità, e avanzamenti di performance come Optimistic UI, Nested Routes, e Progressive Enhancement. Anche se lo stack di sviluppo di Hydrogen è strutturato, è anche modulare e fornisce componenti, hook e utilità ottimizzati per il commerce pre-configurati per le API di Shopify. Ogni pezzo dello stack è ottimizzato per funzionare al meglio insieme così potete costruire velocemente senza compromessi su performance e manutenzione, fornendo al contempo la libertà di integrare con gli strumenti e servizi che già utilizzate.

Mentre i negozi Hydrogen possono essere ospitati da qualsiasi provider di hosting cloud, il modo più facile e veloce per deployare negozi Hydrogen è Oxygen, la soluzione di hosting distribuita globalmente di Shopify. Oxygen è renderizzato all'edge con 285+ punti di presenza in tutto il mondo, offrendo ai team di sviluppo controllo completo del deployment. È anche incluso in qualsiasi piano Shopify senza costi extra e garantisce prestazioni di picco e uptime in tutto il globo, mantenendo bassi i costi per le aziende.

Recentemente, Patta e Tommy Hilfiger hanno sfruttato Hydrogen e Oxygen per costruire uno storefront immersivo che promuoveva la loro nuova collaborazione. Presentava un'esperienza ecommerce memorabile infusa di cultura hip-hop degli anni '90, tutto lanciato in soli 14 giorni.

Questo è solo un esempio di come brand iconici in tutto il mondo stanno passando all'headless con Hydrogen e Oxygen.

Se hai creato il tuo ecommerce con Shopify, c'è un'ottima notizia per te: Shopify ha tantissime API che possono aiutarvi a seguire un approccio headless senza perdere la possibilità di utilizzare tutte le tue attuali funzionalità di ecommerce.

Pronti per passare all'headless?

Che tu sia un'azienda consolidata con infrastruttura stabilita o stia ancora costruendo la tua architettura enterprise, se stai giàspuntando diverse delle caselle sopra, un approccio headless commerce potrebbe essere giusto per te.

Allo stesso modo, se le tue operazioni aziendali stanno diventando più complesse e vuoi differenziarti nella competizione sull'esperienza piuttosto che sul prezzo, potresti davvero avere un futuro headless.

Conclusione

L'headless commerce non è solo importante per l'ecommerce del presente: potrebbe infatti rappresentare un'ottima risorsa in futuro proprio grazie alla sua adattabilità.

Il mondo dell'ecommerce continuerà ad evolvere, questo è certo, e l'approccio headless potrebbe permettere di adattare più facilmente l'architettura del tuo business a nuove eventuali tendenze e necessità.

Ciononostante, ricorda che non è detto che l'headless commerce sia la scelta migliore per il tuo business.

Ad esempio, se stai già ottenendo ottimi risultati con un approccio tradizionale, potrebbe non valere la pena investire tempo, risorse ed energie nell'headless.

Considera tempi e costi necessari per un progetto di questo tipo, e analizza bene la tua situazione prima di prendere una decisione così radicale.