18 Apr 7 tecniche avanzate per personalizzare il proprio store Shopify
Per chi viene da una piattaforma e-commerce come Magento, lavorare con Shopify può in prima battuta sembrare limitante. A differenza delle piattaforme aperte dove è possibile modificare qualunque aspetto con libertà pressoché totale, Shopify ha un modello “a scatola chiusa” più complesso da estendere.
Tuttavia, questo non significa che la personalizzazione sia impossibile. Negli anni, Shopify si è evoluta per fornire specifici punti di estensione dove gli sviluppatori possono iniettare funzionalità personalizzate. Queste interfacce attentamente progettate permettono ai merchant di espandere le capacità di Shopify mantenendo la stabilità e la sicurezza della piattaforma.
Diamo un’occhiata e vediamo quali sono!
1. Theme Block per personalizzare l’esperienza del negozio
Quando installi app nel tuo negozio Shopify, queste possono esporre dei blocchi che verranno poi renderizzati all’interno del tema. Questo ti permette di aggiungere nuove funzionalità al tuo tema senza modificarne direttamente i sorgenti.
I blocchi possono essere di due tipi:
Section Block
I Section Block vengono renderizzati all’interno delle sezioni esistenti. Se una sezione supporta i blocchi delle app, puoi includere in essa tutti i blocchi esposti dalle app che hai installato. L’app definisce il template liquid che viene renderizzato, i dati utilizzati e le impostazioni disponibili.
Ad esempio, un’app di review potrebbe visualizzare un blocco di valutazione a stelle che mostra sia la valutazione media che le recensioni individuali.
Embedded Block
Questi sono elementi UI più piccoli che non sono specifici per una sezione ma possono apparire ovunque nel sito. Esempi includono tag di supporto, funzionalità di accessibilità o elementi di servizio clienti.
Questo approccio è particolarmente utile quando non hai il controllo sul tema ma devi introdurre nuovi elementi visivi. In Nebulab, per esempio, abbiamo utilizzato questo per la nostra app Sprout, creando nuovi elementi visivi nei temi dei merchant.
Per maggiori dettagli sull’implementazione dei blocchi tematici, consulta la documentazione sui Theme Block di Shopify.
2. Web Pixel per integrarsi con piattaforme di tracciamento personalizzate
Shopify sta passando a una nuova esperienza di checkout che sarà completamente controllata dalla piattaforma. Entro agosto 2025, tutti i negozi saranno tenuti a utilizzare questo nuovo sistema, che ha implicazioni significative per il tracciamento e l’analisi.
L’impatto principale? Non potrai più aggiungere JavaScript personalizzato alle pagine di checkout e stato dell’ordine. Questo limita la tua capacità di tracciare eventi utilizzando il tracciamento lato client.
Per affrontare questa limitazione, Shopify ha introdotto i web pixel, contenitori isolati che ti permettono di estendere la logica di tracciamento nativa della piattaforma.
App Pixel
Questi sono inclusi con le app che installi nel tuo negozio Shopify. Esempi includono i pixel di Instagram o TikTok. Una volta installati e connessi ai tuoi account pubblicitari, inviano dati automaticamente alle rispettive piattaforme.
Alcuni pixel, come quello di TikTok, utilizzano un approccio ibrido:
- Tracciamento lato client attraverso il pixel dell’app
- Arricchimento lato server utilizzando le credenziali API dell’app per recuperare informazioni aggiuntive sull’ordine
Custom Pixel
Se hai bisogno di inviare dati a una piattaforma che non offre un’app ufficiale Shopify, puoi creare pixel personalizzati. Questi ti permettono di:
- Iscriverti a eventi specifici (come il completamento del checkout)
- Importare il pixel di tracciamento della piattaforma
- Utilizzare l’API della piattaforma per inviare i dati forniti da Shopify
Con questo approccio, puoi creare un sistema di tracciamento unificato che sia compatibile con le nuove restrizioni del checkout di Shopify.
Scopri di più sull’implementazione dei web pixel nel nostro blog post dedicato.
3. Shopify Flow per creare automazioni user-friendly
Shopify Flow consente ai merchant di automatizzare i flussi di lavoro attraverso un’interfaccia drag-and-drop estremamente potente.
Inoltre, possiamo estendere Flow creando:
- Trigger personalizzati: Eventi che avviano i flussi di lavoro (es. “abbonamento creato” o “abbonamento rinnovato”)
- Azioni personalizzate: Operazioni che possono essere eseguite (es. “metti abbonamento in pausa”)
Esponendo questi elementi a Shopify Flow, permettiamo ai merchant di costruire la propria logica di business senza l’intervento degli sviluppatori.
Per maggiori approfondimenti, leggi il nostro post su come automatizzare Shopify.
4. UI Extension per personalizzare checkout e account portal
Nonostante Shopify stia “blindando” sempre più i punti critici dell’esperienza di acquisto come il checkout e l’account portal, la piattaforma sta anche dando ai merchant nuovi strumenti per personalizzare questi touchpoint.
Checkout UI Extension
Con la nuova esperienza di estensione del checkout di Shopify, puoi aggiungere elementi personalizzati come:
- Visualizzazioni di informazioni sui prodotti
- Opportunità di upselling
- Informazioni sulla consegna
- Campi personalizzati
In Cometeer, utilizziamo le estensioni di checkout per visualizzare informazioni sui prodotti virtuali, aiutando i clienti a capire cosa c’è nel loro carrello, e per offrire upsell pertinenti.
Customer Account UI Extension
Con l’adozione della nuova esperienza dell’account cliente di Shopify, le estensioni UI ti permettono di integrare funzionalità personalizzate. Per esempio, per i brand con un modello a subscription, le Customer Account UI Extension permettono di creare un sistema di gestione dell’abbonamento integrato nell’account portal.
Detto ciò, è doveroso notare che le UI extension devono necessariamente utilizzare le librerie di componenti e seguire i design pattern di Shopify.
Per una guida pratica, dai un’occhiata al nostro tutorial su come estendere la UI di Shopify.
5. Admin UI Extension per arricchire il pannello di amministrazione
Le estensioni UI dell’admin permettono ai merchant di mostrare elementi UI in punti specifici all’interno dell’admin Shopify.
Ad esempio, abbiamo implementato un’estensione in Cometeer che visualizza i dettagli della mappatura del caffè direttamente sulla pagina dell’ordine. Quando un cliente ordina un prodotto virtuale (come una box di caffè), l’estensione permette di vedere quali caffè specifici sono stati selezionati e visualizza la logica utilizzata dal sistema per selezionare quei caffè.
Soprattutto, gli operatori possono portare a termine l’intera operazione senza uscire dalla schermata dell’ordine, migliorando il flusso di lavoro.
Proprio come le estensioni UI per i clienti, le estensioni dell’admin devono utilizzare le librerie di componenti di Shopify, in modo da garantire un’esperienza fluida in cui la nuova funzionalità sembri un modulo nativo di Shopify.
Se vuoi maggiori informazioni, abbiamo un blog post dedicato!
6. Embedded app per creare nuove pagine nell’admin
Le embedded app sono di gran lunga lo strumento più flessibile per estendere l’interfaccia dell’admin di Shopify. Ogni embedded app compare come una voce separata nella navigazione dell’admin di Shopify. Cliccando sulla voce, l’operatore viene indirizzato a una nuova area gestita interamente dall’app.
Questo approccio fornisce un controllo pressoché completo sull’interfaccia, permettendo ai merchant di costruire interfacce complesse per gestire dati e flussi di lavoro personalizzati. Ad esempio, un’app di abbonamento potrebbe utilizzare un’app incorporata per visualizzare:
- Tutti gli abbonamenti attivi
- Informazioni dettagliate sugli abbonamenti
- Controlli di gestione (pausa, cancellazione, ecc.)
In ogni caso, è fortemente consigliato utilizzare la libreria di componenti Polaris di Shopify per creare un’esperienza che sembri nativa e si integri perfettamente con il resto dell’admin.
Le app incorporate supportano pagine multiple e navigazione, rendendole ideali per flussi di lavoro complessi che richiedono interfacce dedicate.
Per una guida dettagliata sulla costruzione di app incorporate, vedi la documentazione sulle Embedded App di Shopify.
7. Shopify Function per iniettare logica personalizzata nei flussi critici
Le Shopify Functions rappresentano l’elemento più simile all’architettura a “plugin” che si trova in piattaforme come Magento. Esse permettono di iniettare codice personalizzato direttamente nei flussi di Shopify.
Queste funzioni ricevono input da Shopify, li elaborano secondo la logica personalizzata dettata dal merchant, e restituiscono output che influenzano il comportamento di Shopify.
I punti di estensione attuali includono (ma non si limitano a):
- Discount Function, per creare tipi di sconto personalizzati oltre a quelli disponibili nativamente nell’admin di Shopify.
- Location Rule Function, per controllare quali sedi di fulfillment dell’ordine vengono rese disponibili durante il checkout.
- Cart Validation Function, per definire quando gli ordini possono o meno procedere attraverso il flusso di checkout.
Tuttavia, le Function non sono esenti da vincoli:
- Hanno limiti sull’utilizzo di risorse e sui tempi di esecuzione
- Devono essere deterministiche
- Devono essere scritte in Rust o JavaScript
Nonostante queste limitazioni, le Functions permettono potenti personalizzazioni. Ad esempio, un programma fedeltà potrebbe utilizzare una funzione di sconto personalizzata per fornire sconti specifici per i membri su determinate combinazioni di prodotti, il che non sarebbe possibile con gli sconti standard di Shopify.
Per maggiori informazioni, consulta la documentazione sulle Function di Shopify.
Come scegliere il giusto approccio per estendere Shopify?
Quando estendiamo Shopify, l’approccio giusto dipende da ciò che stiamo cercando di realizzare:
- Per personalizzazioni visive: I Theme Block ci permettono di iniettare componenti UI nel negozio senza modifiche al tema.
- Per tracciamento e analisi: I Web Pixel forniscono un modo standardizzato per catturare eventi di checkout nonostante le restrizioni di checkout di Shopify.
- Per automazioni drag-and-drop: Le estensioni di Shopify Flow permettono ai merchant di creare la propria logica di business.
- Per personalizzazioni del checkout e dell’account portal: Le UI extension mantengono la personalizzazione mentre Shopify standardizza queste esperienze.
- Per migliorare le pagine standard dell’admin: Le Admin UI extension si integrano direttamente nei flussi di lavoro esistenti.
- Per interfacce admin complesse: Le Embedded App ci danno il controllo completo sulle interfacce di gestione personalizzate.
- Per logica di business personalizzata: Le Shopify Function ci permettono di modificare il comportamento della piattaforma in punti specifici.
Spesso, i risultati migliori si ottengono combinando queste soluzioni. Ad esempio, una Embedded App potrebbe gestire la configurazione dell’esperienza nell’admin di Shopify, mentre le Function implementano la logica che poi viene esposta al cliente finale.
L’ecosistema di Shopify continua a evolversi per bilanciare le esigenze di personalizzazione dei merchant con la stabilità della piattaforma. Consigliamo di restare aggiornati tramite il changelog di Shopify e le Shopify Editions in modo da avere sempre uno spettro aggiornato di soluzioni su cui fare affidamento.
Se hai bisogno di una guida esperta per estendere il tuo store Shopify, contattaci! In Nebulab, siamo specializzati nella creazione di storefront Shopify per brand mid-market ed enterprise, e ogni giorno spingiamo la piattaforma ai suoi limiti. Insieme, possiamo creare l’esperienza e-commerce di cui il tuo brand ha bisogno per brillare.
