• Programmatic
  • Engage conference

OneDay Post-it

A cura di OneDay

Piccole news ad alto impatto raccontate da OneDay Group! Dagli approfondimenti sull'ecommerce, passando per le novità dal mondo della comunicazione, fino ai temi che riguardano le nuove generazioni. Post-it è uno spazio di condivisione perchè è grazie alla contaminazione che nascono idee innovative e non convenzionali!

01/08/2022
di Sofia Ghisellini, e-Commerce Product Manager di Glint (Gruppo OneDay)

Come customizzare il tuo online store su Shopify

Cos’è Shopify

Shopify è una piattaforma SaaS (Software As A Service), un servizio in abbonamento che permette di costruire e gestire e-commerce direttamente online. Nello specifico Shopify offre un web builder completo e una serie di strumenti aggiuntivi facilmente integrabili.

Il web builder permette di personalizzare l’e-commerce attraverso i temi che aiutano a strutturare il front-end, la parte grafica dello store. La personalizzazione dell’aspetto del tema con immagini, loghi, testo e video avviene attraverso la logica del drag-and-drop.

Shopify si distingue da altri software sul mercato per essere particolarmente facile e intuitivo e accessibile da utenti senza competenze in programmazione web. Molte delle funzionalità apparentemente non supportate possono essere facilmente integrate attraverso delle app sviluppate da terzi che estendono le logiche di base. Permette a chiunque di creare un e-commerce per vendere i propri prodotti online in modo semplice e veloce.

Modelli Low Code - No Code

Lato back-end, le piattaforme come Shopify hanno l’obiettivo di facilitare la programmazione, rendendo lo sviluppo più rapido e accessibile. Si definiscono Low Code e No Code e hanno come obiettivo la riduzione della distanza tra IT e business, attraverso la semplificazione del processo di implementazione e conseguente coinvolgimento delle figure orientate al business nella fase di sviluppo.

Se da un punto di vista del back-end i requisiti sono soddisfacenti per supportare una customer experience universalmente accettabile, lato front-end ci sono degli aspetti fondamentali da considerare.

I modelli low code e no code offrono la possibilità di costruire una UX/UI consumerizzata orientata a un’esecuzione veloce grazie all’integrazione con temi, widget, layout e stili già pronti.

Code-Shopify-ecommerce.jpg

La scelta del tema

L’aspetto dell’e-commerce dipende ed è supportato dalla scelta di un tema. I temi sono dei modelli pre-configurati che si integrano con il negozio di Shopify e possono essere stati implementati dagli sviluppatori Shopify stessi, oppure da agenzie esterne.

Salvo qualche opzione free, la maggior parte sono a pagamento e il costo si aggira, di media, intorno ai 250 dollari. In generale, ma anche a seconda del costo, i temi supportano svariate funzionalità facilmente configurabili attraverso l’utilizzo del web builder.

La scelta del tema è un processo fondamentale nella costruzione dell’e-commerce e ci sono svariati aspetti da considerare:

  • complessità e ampiezza del catalogo;
  • funzionalità aggiuntive nella gestione del catalogo prodotti (es. filtri);
  • la sitemap e il menu di navigazione;
  • qualità della UX;
  • qualità del responsive;
  • quantità, dimensioni e tipologia dei media supportati;
  • sezioni disponibili;
  • le call to action interne per definire la customer journey tra le sezioni;
  • qualità del supporto offerto;
  • qualità e ampiezza della documentazione.

Si rende dunque necessario tenere conto non solo del gusto personale, ma anche e soprattutto del disegno di una UX orientata alla conversione. Se un sito web istituzionale può essere bello e ben organizzato un sito e-commerce deve essere ottimizzato per una navigazione chiara, intuitiva e orientata alla vendita.

Mockup e Sviluppo

Una volta scelto il tema, viene concretizzato l’aspetto dell’e-commerce a livello grafico attraverso il mockup. Il processo di costruzione, nonostante il pre-confezionamento dei temi, comporta un impegno creativo e funzionale che ha come obiettivo la fusione tra l’estetica grafica e l’ottimizzazione della user experience.

Una volta che è stato finalizzato e approvato il mockup si passa alla fase dello sviluppo. Anche dal punto di vista del front-end le piattaforme low code e no code compensano le competenze grafiche che normalmente sarebbero richieste in progetti tradizionalmente basati sullo sviluppo custom.

Tuttavia arriva un momento in cui si manifesta la necessità di una personalizzazione più o meno avanzata. Un esempio banale è il background color di una sezione: se il tema non prevede la possibilità di differenziare lo sfondo della sezione da quello del layout l’unica soluzione è quella di intervenire tramite Cascading Style Sheets.

Un’altra motivazione è quella di rendere meno standardizzati gli store online. Gli e-commerce costruiti con Shopify sono facilmente riconoscibili poiché si basano su logiche strutturali molto simili.

Customizzazioni

Tendenzialmente le customizzazioni che ci si trova ad affrontare sono di carattere estetico/grafico e comportano quindi solo l’utilizzo di CSS e non compromettono le logiche:

  • aumentare/diminuire il font-size;
  • aumentare/diminuire un margin o un padding;
  • spostare un bottone o un elemento;
  • modificare un hover;
  • aggiungere uno sfondo.

Ma non solo. A volte se il processo creativo del web designer ha fatto un volo pindarico o una richiesta di chi ha commissionato il progetto va oltre le possibilità e funzionalità offerte da Shopify e/o dal tema si deve intervenire sul codice.

Le competenze richieste sono la conoscenza di CSS e HTML e del linguaggio di template Liquid.

L’implementazione delle customizzazioni su soluzioni che nativamente non sono self-hosting comporta una serie di considerazioni imprescindibili che devono essere analizzate prima di procedere:

  • in primis una delle principali insidie riguarda l’aggiornamento del tema: banalmente se viene rilasciata una versione incrementale del tema e si decide di installarla il codice verrà sovrascritto. Unica alternativa è quella di replicare lo store nella versione aggiornata.
  • Il costo richiesto per le customizzazioni da parte di agenzie esterne non è economico. A meno che non si possiedano una o più figure competenti interne al team che supportino le implementazioni, rivolgersi ad agenzie, servizi o figure esterne comporta dei prezzi piuttosto elevati. 
  • Gli script custom possono aggiungere complessità al prodotto e possono anche rallentare considerevolmente la velocità di caricamento del sito. Questo oltre ad essere un pessimo fattore per la UX è anche un ottimo deterrente per le vendite.
  • Il customer service di Shopify o quello offerto dai temi stessi non offre supporto nei casi in cui il codice è stato pesantemente modificato da terzi. Come se ci fosse una sorta di sigillo di garanzia.

Per questo motivo prima di intervenire a livello strutturale nel codice è sempre consigliabile riflettere sull'imprescindibilità della funzionalità aggiuntiva che si vuole ottenere. Innanzitutto, se si tratta di un bug la soluzione più immediata è quella di rivolgersi al customer service del tema stesso, motivo per cui è opportuno consultare le recensioni in fase di scelta.

Se si tratta invece di un cambiamento necessario il modo migliore è quello di cercare un’alternativa altrettanto funzionale utilizzando le features fornite dal tema ma rivedendo la struttura.

Conclusioni

Le soluzioni Low Code e No Code supportano egregiamente molte delle necessità del business e permettono a chiunque di ottenere un prodotto funzionale per la costruzione di un e-commerce.

Anche se il processo di selezione del tema a supporto deve coincidere al meglio con il disegno dell’architettura e con i requirements analizzati inizialmente, la fase di sviluppo può prevedere delle customizzazioni. Queste devono essere pensate in maniera sostenibile e dovrebbero non impattare sul mantenimento e l’efficienza dello store online.