Costruire e integrare Shopify: la guida completa

Shopify è ben noto come piattaforma per mettere online uno store rapidamente. Meno conosciuto è quanto il sistema si estenda quando lo si costruisce correttamente: logica di checkout personalizzata, storefront headless, canali B2B enterprise e un'API GraphQL capace di gestire un backend commerce completo. Questa guida copre l'intero spettro, dalle basi di Liquid fino alla topologia di integrazione di un brand mid-market che fa girare Shopify Plus insieme a un ERP e tre strumenti marketing. Leggetela dall'inizio alla fine e capirete il nostro approccio prima ancora di parlarci.

L'architettura di Shopify

Shopify è una piattaforma SaaS multi-tenant. Non gestite server, database o infrastruttura. Lavorate invece all'interno di tre livelli: il storefront (ciò che vedono i clienti), l'admin (dove i merchant gestiscono prodotti, ordini e impostazioni) e il livello API (come i sistemi esterni leggono e scrivono i dati dello store). Capire a quale livello appartiene un problema determina come risolverlo.

Architettura storefront Shopify: dal browser al backend

Il storefront e l'admin sono strettamente accoppiati su Shopify standard: i template Liquid leggono direttamente dal modello dati di Shopify e si rendono sulla CDN di Shopify. In una configurazione headless, il storefront è disaccoppiato e comunica con Shopify tramite la Storefront API, il che permette di usare qualsiasi framework frontend ma aggiunge complessità e rimuove alcune funzionalità native come il flusso di checkout ospitato. La maggior parte degli store non ha bisogno del headless, e lo diremo chiaramente.

Sviluppo temi Liquid

Liquid è il linguaggio di template di Shopify. Somiglia all'HTML con tag aggiuntivi per emettere dati dinamici, iterare sulle collezioni e rendere blocchi in modo condizionale. Ogni tema Shopify standard è costruito in Liquid, e la maggior parte dello sviluppo personalizzato su Shopify prevede la scrittura, l'estensione o il debug di questo linguaggio.

L'architettura di tema attuale è Online Store 2.0, che ha introdotto i template JSON e il sistema di sezioni e blocchi che rende i temi personalizzabili nell'editor visivo senza toccare il codice. Costruiamo sempre agli standard OS 2.0:

• Template JSON. Ogni tipo di pagina (prodotto, collezione, pagina, blog) è definito da un file JSON che elenca le sezioni che può contenere. Questo separa struttura da contenuto e permette ai merchant di aggiungere sezioni senza uno sviluppatore.
• Sezioni e blocchi. Le sezioni sono componenti di layout riutilizzabili. I blocchi sono gli elementi personalizzabili al loro interno. Un tema ben costruito ha una libreria ridotta di sezioni che i merchant possono comporre in qualsiasi layout di pagina senza toccare Liquid.
• Metafield e metaobject. Dati strutturati allegati a prodotti, varianti, collezioni o pagine. Utilizziamo i metafield per tutto ciò che non rientra nello schema prodotto predefinito: specifiche tecniche, istruzioni di cura, prodotti correlati o qualsiasi dato personalizzato di cui il business ha bisogno sul storefront.
• App block. Il modo OS 2.0 per le app di iniettare contenuto in un tema senza modificare direttamente i file template. Preferiamo gli app block all'iniezione manuale dei template perché sopravvivono agli aggiornamenti del tema senza problemi.

Shopify Plus

Shopify Plus è il livello enterprise. Le funzionalità che contano davvero sono specifiche, e vale la pena essere chiari su cosa sono, perché il pitch del team vendite di Shopify non è sempre calibrato su ciò di cui il vostro store ha effettivamente bisogno.

Le funzionalità che giustificano il costo di Plus:

• Checkout extension. L'unico modo per modificare il checkout su Shopify è tramite il framework di checkout extension, disponibile solo su Plus. Se avete bisogno di upsell personalizzati all'interno del checkout, acquisizione di campi personalizzati, validazione dell'indirizzo che parla con la vostra API o visualizzazione dei punti fedeltà, questo è il percorso.
• Shopify Flow. Un builder di automazione no-code che gira sul backend. Utile per taggare clienti ad alto valore, attivare workflow di fulfillment, inviare alert interni su condizioni specifiche degli ordini e dozzine di altre cose che altrimenti richiederebbero un'app personalizzata.
• B2B su Shopify. Account aziendali, listini prezzi personalizzati per account, termini di pagamento netti, supporto ordini di acquisto e uno storefront wholesale separato. Disponibile solo su Plus. Se gestite un business B2B o ibrido DTC/wholesale, questa è la fondazione giusta.
• Limiti API più alti. Il bucket REST Admin API è più grande su Plus, il che conta quando sincronizzate migliaia di ordini al giorno con un ERP o eseguite aggiornamenti prodotto in batch.
• Launchpad. Programmate flash sale, variazioni di prezzo e pubblicazioni di tema in anticipo con rollback automatico. Utile per campagne stagionali e lanci di prodotto.

Ciò che Plus non cambia: il modello catalogo prodotti sottostante, la GraphQL Storefront API, l'infrastruttura CDN per la consegna del storefront o i fondamentali SEO. Se l'unico motivo per cui state valutando Plus è la performance o la SEO, la risposta è probabilmente no.

Headless e Hydrogen

Una configurazione headless Shopify disaccoppia il storefront dal livello di rendering di Shopify. Il storefront è costruito in un framework separato, tipicamente React o Next.js, e comunica con Shopify esclusivamente tramite la Storefront API o la GraphQL Admin API. Hydrogen è il framework React proprietario di Shopify per questo pattern, costruito su Remix.

Quando ha senso andare headless: avete bisogno di un'esperienza storefront che Liquid non può genuinamente offrire, come un configuratore di prodotto altamente interattivo, un modello di navigazione stile app nativa o un storefront che fa parte di una web application più ampia con la propria autenticazione e il proprio livello dati. Avete anche bisogno di un team con la capacità frontend per mantenerlo, perché un Shopify headless è un sistema significativamente più complesso da gestire rispetto a un tema Liquid.

Quando headless non ha senso: quasi in ogni altra situazione. Perdete il checkout ospitato (e il suo track record di conversione), l'editor di temi visivo e gran parte dell'ecosistema app di Shopify. Vi assumete infrastruttura server, pipeline di deployment e complessità di caching che la CDN di Shopify gestisce per voi su uno store Liquid. La maggior parte degli store che è andata headless tra il 2020 e il 2022 perché era di moda ha poi trascorso gli anni successivi a manutenere infrastruttura che un tema Liquid ben costruito non avrebbe richiesto.

Migrazioni da WooCommerce o Magento

Le migrazioni di piattaforma sono dove si accumula più rischio perché ci sono molte cose da fare correttamente in sequenza, e un errore su qualsiasi di esse, che si tratti della mappa dei redirect, dell'export dei dati clienti o dei metadati SEO, si manifesta in ricavi o posizionamenti settimane dopo la data di go-live quando è più difficile risalire alla causa.

Pipeline di migrazione: dalla piattaforma legacy a Shopify

Gli elementi che causano il fallimento delle migrazioni:

• Copertura dei redirect. Ogni URL della vecchia piattaforma che Google ha indicizzato necessita di un 301 verso il suo equivalente su Shopify. Perdete un URL e l'autorità di posizionamento di quella pagina scompare. Esportiamo l'intero set di URL da Search Console e dalla sitemap della piattaforma e li mappiamo tutti prima di scrivere un singolo redirect.
• Portabilità delle password dei clienti. WooCommerce memorizza le password in un formato hash che Shopify non comprende. I clienti non possono accedere dopo la migrazione e devono reimpostare la password. Non è un bug ma richiede un piano di comunicazione, e deve avvenire in una tempistica che non lasci i clienti bloccati fuori durante un weekend.
• Accesso allo storico ordini. Shopify non importa gli ordini storici nel suo sistema di gestione ordini nativo. Gestiamo ciò come struttura di metafield personalizzata nel record del cliente così che il team di supporto possa accedere alla cronologia senza uscire dall'admin, mantenendo il sistema ordini nativo pulito.
• Plugin WooCommerce personalizzati. Qualsiasi funzionalità di plugin personalizzato che gira lato server su WooCommerce, che si tratti di una regola di pricing personalizzata, di un modello di abbonamento o di un calcolatore di spedizione su misura, deve essere ricostruita su Shopify. Mappiamo ogni plugin verso un equivalente Shopify, un'app di terze parti o un'app Shopify personalizzata che replica la logica.
• Set di attributi e prodotti configurabili di Magento. Il modello prodotto di Magento è significativamente più complesso di quello di Shopify. I prodotti configurabili si mappano alle varianti Shopify, ma Magento supporta più di tre assi di varianti e Shopify no. Normalizziamo il catalogo prima della migrazione, non dopo, perché correggere un catalogo di 20.000 SKU post-migrazione è costoso.

App personalizzate e l'API

La Shopify Admin API è disponibile sia in REST che in GraphQL. La versione GraphQL è lo standard attuale: supporta operazioni bulk, ha limiti più alti misurati in costo della query piuttosto che in conteggio di richieste, ed è richiesta per diverse funzionalità più recenti. Scriviamo nuove app personalizzate contro GraphQL e migriamo il codice esistente basato solo su REST quando i limiti di velocità o l'accesso alle funzionalità lo rendono necessario.

Le app personalizzate sono lo strumento giusto quando un workflow richiesto non può essere servito da un'app esistente sull'App Store di Shopify, quando il modello dati deve andare oltre ciò che le impostazioni admin espongono, o quando un'integrazione esistente è inaffidabile e deve essere sostituita con qualcosa di costruito appositamente per quello store specifico.

Casi comuni che gestiamo:

• Tooling per aggiornamenti prodotto bulk che gira su cron e sincronizza un catalogo fornitore con Shopify su larga scala, con logica di mapping dei campi e risoluzione dei conflitti
• Routing di fulfillment personalizzato che legge gli attributi dell'ordine e invia a diversi endpoint 3PL in base al tipo di prodotto, alla destinazione o alla sede di stock
• App di reporting che estraggono dati di ordini, clienti e inventario e li inviano a un data warehouse o strumento BI su una schedulazione definita
• Gestione abbonamenti per store su Shopify che necessitano di logica di fatturazione personalizzata al di là delle capacità standard delle app di abbonamento

Checkout extension e conversione

Il checkout di Shopify è la parte più convertente della maggior parte degli store e la più difficile da modificare. Per buone ragioni: Shopify lo controlla per mantenere la conformità PCI e la baseline di performance che rende i suoi tassi di conversione aggregati quello che sono. Su Shopify Plus, le checkout extension sono il modo supportato per aggiungere funzionalità senza rompere né l'una né l'altra.

Cosa possono fare le checkout extension:

• Mostrare upsell o cross-sell di prodotto tra il carrello e la conferma dell'ordine, con l'aggiunta al carrello gestita inline senza ricaricare il checkout
• Acquisire campi personalizzati, come messaggi regalo, istruzioni di consegna o numeri di registrazione aziendale, che si inviano a metafield dell'ordine per il fulfillment a valle
• Eseguire la validazione dell'indirizzo contro un'API esterna durante il checkout per individuare indirizzi di spedizione non validi prima che l'ordine venga effettuato
• Mostrare il saldo punti fedeltà e permetterne il riscatto durante il checkout senza abbandonare il flusso
• Applicare logica di sconto personalizzata basata su tag cliente, contenuto del carrello o risposte di API esterne

Funnel di conversione al checkout: dove gli store DTC perdono tipicamente gli ordini

Il lavoro di conversione che sposta davvero l'ago: mostrare il costo di spedizione e la data di consegna stimata prima dell'avvio del checkout (elimina la sorpresa di prezzo che guida il primo drop), ridurre i campi obbligatori nel form indirizzo, assicurarsi che la selezione dei metodi di pagamento copra quelli che il vostro pubblico usa davvero (Klarna o Afterpay per la moda, PayPal per le demografiche più adulte, Apple Pay per il mobile) e aggiungere segnali di fiducia nel momento in cui viene inserito il pagamento, non solo sulla pagina prodotto.

Integrazioni ERP, CRM e marketing

La domanda non è se integrare Shopify con il resto del business. È quando e come. La sincronizzazione manuale tramite export CSV smette di essere praticabile intorno ai 50 a 100 ordini al giorno, e il costo del tasso di errore da un export obsoleto si accumula più velocemente di quanto la maggior parte degli operatori realizzi.

Topologia di integrazione Shopify: un brand mid-market

Le integrazioni che realizziamo più spesso:

• Sync ERP. Ordini da Shopify scritti nell'ERP all'effettuazione, con livelli di stock e stato del fulfillment riscritti indietro. Il sync gira su webhook Shopify (quasi in tempo reale) con un job di riconciliazione che cattura eventuali eventi mancati. Usiamo la GraphQL Admin API di Shopify sul lato Shopify e la REST o SOAP API dell'ERP di destinazione sull'altro.
• Sync CRM. Record clienti creati o aggiornati al primo acquisto, con lo storico ordini allegato come attività CRM. Supporta HubSpot, Salesforce, Zoho CRM e qualsiasi sistema con un'API REST. Decidiamo la strategia di merge prima di scrivere una riga di codice, perché unire record clienti duplicati dopo il fatto è costoso.
• Fulfillment e 3PL. Ordini di acquisto e liste di prelievo inviati al 3PL all'effettuazione dell'ordine, con numeri di tracking riscritti su Shopify e email di notifica cliente attivate. Mappiamo il formato dell'URL di tracking di ogni corriere affinché il cliente riceva un link funzionante, non un numero di tracking grezzo.
• Sync piattaforma marketing. Segmenti clienti ed eventi di acquisto inviati a Klaviyo, Mailchimp o un ESP personalizzato per flussi di carrello abbandonato, sequenze post-acquisto e campagne di win-back. Inviamo gli eventi di cui la piattaforma ha bisogno senza inviare PII di cui la piattaforma non ha bisogno.
• Finance e reportistica ricavi. Riepiloghi ricavi giornalieri, record di rimborso e dati di passivo fiscale inviati a Xero, QuickBooks o un data warehouse. Riconciliamo con i payout di Shopify Payments così che i numeri corrispondano al conto bancario.

Performance e Core Web Vitals

Uno store Shopify con un Largest Contentful Paint sopra i 4 secondi su mobile sta perdendo ricavi reali. Il numero più citato nel settore è che un miglioramento di un secondo nel tempo di caricamento su mobile correla con un incremento dell'8 al 10 percento nel tasso di conversione. La direzione è affidabile anche se la cifra esatta varia per store e categoria.

I problemi più comuni sui temi Shopify:

• Immagini hero non ottimizzate. Un JPEG da 4 MB come prima immagine above-the-fold è il problema LCP più comune che vediamo. Soluzione: convertire in WebP o AVIF, aggiungere attributi width e height, e usare fetchpriority="high" sull'elemento LCP. La CDN di Shopify gestisce la consegna; il formato e gli attributi sono compito dello sviluppatore.
• Script di terze parti caricati in modo sincrono. Widget di chat, strumenti di personalizzazione e app di recensioni che si iniettano nel blocco head bloccano il main thread. Ogni script di terze parti dovrebbe caricare con async o defer. Gli script non usati attivamente su ogni pagina non dovrebbero caricare su ogni pagina.
• Caricamento font che blocca il rendering. Caricare un font personalizzato con un elemento link standard blocca il rendering finché il font non viene scaricato. Usate font-display: swap e preconnect all'host del font. Per Google Fonts in particolare, ospitate i font localmente tramite un build step per evitare il lookup DNS aggiuntivo.
• Sovraccarico da app. Ogni app Shopify installata che inietta JavaScript aggiunge al peso della pagina. Auditiamo lo stack di app durante ogni ingaggio e identifichiamo le app la cui funzionalità è duplicata altrove o non utilizzata in produzione. Ogni app ridondante rimossa è un miglioramento di performance misurabile.

B2B e wholesale su Shopify Plus

Il set di funzionalità B2B su Shopify, disponibile su Plus, è abbastanza maturo per la maggior parte dei casi d'uso wholesale mid-market. L'architettura si basa su record aziendali, che contengono uno o più contatti e una o più sedi, ognuna con il proprio indirizzo di spedizione e listino prezzi assegnato. Gli ordini effettuati tramite il canale B2B portano l'associazione aziendale e i termini di pagamento netti fino al fulfillment senza codice personalizzato.

Ciò che il canale B2B nativo gestisce bene: listini prezzi personalizzati per azienda (prezzi fissi o sconti percentuali sul default), numeri di ordine d'acquisto sugli ordini, termini di pagamento netti con tracciamento delle date di scadenza nell'admin e un URL storefront separato con protezione tramite password per azienda o accesso aperto con pricing bloccato per account.

Ciò che richiede ancora sviluppo personalizzato: regole di pricing a livelli complesse che dipendono dal totale del carrello o dal mix SKU, integrazione degli ordini B2B di Shopify con un ERP che gestisce il credito commerciale in modo diverso dal credito retail e workflow di approvazione avanzati dove l'ordine di un acquirente richiede la firma di un manager prima di entrare nel fulfillment. Questi sono risolvibili con app personalizzate e automazioni Flow ma non sono nativi.

Cosa non funziona

Un breve elenco di cose che non raccomanderemo, perché tendono a sprecare denaro:

• Andare headless solo per la performance. Un tema Liquid ben ottimizzato sulla CDN di Shopify è più veloce della maggior parte delle applicazioni React in produzione. Se il caso per il headless è la performance, quasi certamente non è giustificato. Costruite prima bene il tema Liquid.
• Installare ogni app disponibile. Ogni app installata che gira JavaScript sul storefront aggiunge overhead. Uno stack di app che sembra ragionevole durante la configurazione può accumularsi fino a 800 a 900 kilobyte di JavaScript quando lo store è maturo. Rivedete lo stack di app ogni sei mesi e rimuovete tutto ciò che non è utilizzato.
• Integrazioni basate su CSV a qualsiasi volume di ordini significativo. Un export CSV più import manuale è un singolo punto di fallimento che scala con il volume degli ordini. Dovrebbe essere sostituito da un'integrazione API prima che diventi un rischio operativo quotidiano, non dopo il primo incidente di perdita dati.
• Migrare a Shopify Plus prima di averne bisogno. Plus costa circa quattro volte di più di Advanced Shopify su base mensile. Le checkout extension, Flow e le funzionalità B2B che giustificano il costo sono specifiche. Se non ne state usando nessuna, state pagando per infrastruttura di cui non avete bisogno. Ve lo diremo se siete in questa situazione.
• Temi personalizzati costruiti senza OS 2.0. Un tema personalizzato costruito prima del 2022 senza l'architettura di sezioni e blocchi dovrà essere ricostruito la prossima volta che farete un aggiornamento significativo dello store. La ricostruzione è meno costosa quando pianificata che quando forzata da una scadenza.

Domande frequenti

---

Questo è il quadro completo. Quando volete che venga applicato al vostro store, il passo successivo è un audit gratuito: risultati specifici sulla vostra configurazione reale, in circa 48 ore, senza impegno.

Richiedi un audit Shopify gratuito