In che modo lo sviluppo personalizzato di Shopify avanzato crea un'esperienza utente migliore

Pubblicato: 2020-11-14

Per Paravel, un venditore di valigie, borse e altri accessori da viaggio di alta qualità, innovativi e prodotti in modo responsabile, la funzionalità personalizzata è un must. I prodotti che producono e vendono sono unici, quindi per loro era necessario offrire un'esperienza di acquisto unica ai propri clienti.

Paravel aveva bisogno di molte funzionalità di eCommerce di base per consentire di eseguire operazioni pratiche attraverso il suo negozio online. Originariamente, erano costruiti su una piattaforma open source chiamata Spree, che ha molti aderenti e sostenitori proprio per il fatto che si tratta di una piattaforma open source.

Spree, come altre piattaforme open source come Magento, è estremamente personalizzabile. Può anche essere integrato con un numero molto elevato di plug-in e app di terze parti, è altamente scalabile e mostra un livello di intuizione dell'interfaccia utente che semplifica lo sviluppo di un'interfaccia ottimizzata per i dispositivi mobili.

Sebbene questa sia solo una rapida istantanea delle varie caratteristiche funzionali di Spree, alcune di esse hanno lo stesso costo elevato di altre piattaforme open source. Possono avere funzionalità quasi illimitate, ma richiedono molto tempo di sviluppo e ancora più esperienza per essere realizzate. Senza una vasta esperienza di codifica o un background nello sviluppo, piattaforme come Spree possono esaurire rapidamente le risorse.

Paravel aveva bisogno di quell'esperienza di acquisto unica nel suo genere, ma aveva anche bisogno di una soluzione pronta all'uso che offrisse molto ai suoi commercianti di eCommerce. Il problema per loro era come potevano portare il loro negozio di eCommerce già meticolosamente progettato e sviluppato da Spree a una piattaforma più capace?

Un accurato processo di migrazione

Dopo aver comunicato con il nostro team di vendita, Paravel ha deciso che il passaggio a Shopify Plus era la risposta, con alcune clausole. Tra le altre cose, Paravel non voleva subire effetti negativi dalla migrazione e voleva che il loro nuovo negozio offrisse tutte le funzionalità del loro negozio Spree e poi alcune. Per fare ciò, Paravel aveva bisogno di qualcosa di più di un partner Shopify Plus: aveva bisogno di un esperto Shopify Plus.

Mentre Spree offriva opzioni quasi illimitate per la personalizzazione, Shopify Plus, come piattaforma SaaS di eCommerce ospitata, potrebbe offrire loro molto di più. Con l'aiuto di un team di sviluppo come 1Digital Ⓡ , Shopify Plus potrebbe offrire loro tutte le personalizzazioni offerte da Spree e altro ancora. Shopify Plus offriva anche funzionalità di sicurezza potenziate, tempi di attività garantiti, velocità del sito elevata, compatibilità simile con app e plug-in di terze parti, accettazione di una serie di opzioni di pagamento, immensa scalabilità e molto altro. Paravel è stato, a questo punto, incaricato di spostare il loro negozio Spree esistente, e il suo design e funzionalità, su Shopify Plus.

Per alcuni, il processo di migrazione di un sito Web è straziante, ma sapevamo il contrario. Con centinaia di migrazioni riuscite nel retrovisore e un team di sviluppatori a sostegno dei nostri sforzi, sapevamo che sarebbe stato possibile farlo senza alcun problema. Ci vorrebbe solo un processo completo.

Il processo è stato intenso, ma niente 1Digital Ⓡ L' agenzia non ha potuto eseguire a pieni voti. Il progetto ha richiesto la migrazione di 32 campi di prodotti (inclusi nomi, descrizioni, immagini, prezzi e altro) oltre a più di 4.000 account cliente e ordini ciascuno. Per fare ciò, abbiamo impostato un server Linux temporaneo e scritto uno script personalizzato per disegnare e classificare queste informazioni dall'inventario Spree del loro sito originale.

Per spostarlo, abbiamo creato un altro script personalizzato per connetterci all'API di Shopify prima di importare correttamente tutti i campi pertinenti. Durante il processo e in seguito, i dati sono stati controllati al fine di garantire che atterrassero correttamente nel nuovo negozio, in modo che non solo nulla andasse perso, ma popolassero tutti dove doveva andare.

Il nostro accurato processo ha impedito la perdita di dati, ma per quanto riguarda la perdita di traffico? Se c'è una cosa che esclude i clienti di eCommerce dalla prospettiva di una ripiattaforma (anche se porterà enormi vantaggi), è la paura di perdere traffico o autorità di dominio.

Fortunatamente, il nostro processo di migrazione previene i danni alla SEO meticolosamente come previene la perdita di dati. Con Paravel, come abbiamo fatto con ogni progetto di migrazione, abbiamo raccolto tutti gli URL associati al loro sito Web e quindi impostato reindirizzamenti 301 agli URL associati sul nuovo sito Web Shopify. Non sorprende che Paravel non abbia subito perdite di traffico o fluttuazioni di classifica dopo il completamento della migrazione.

Supporto – Per ogni evenienza

La migrazione a Shopify è andata avanti senza intoppi e Paravel era sulla buona strada per un nuovo negozio Shopify Plus con funzionalità avanzate e una migliore esperienza utente, ma solo per sicurezza, abbiamo incluso un periodo di supporto gratuito di 30 giorni con il progetto di migrazione . Qualsiasi agenzia di migrazione Shopify con un processo collaudato dovrebbe farlo; è solo parte integrante di una strategia di migrazione di successo.

La durata dei periodi di supporto gratuito varia a seconda dell'ambito del progetto, ma nel caso della migrazione di Paravel, abbiamo assegnato 30 giorni. Questo ha dato loro un mese intero di tempo per indagare sul loro nuovo sito Web e risolvere eventuali bug di migrazione che potrebbero apparire, cosa che avremmo risolto gratuitamente.

Anche dopo, abbiamo permesso loro di rimanere in fermo, chiedendo loro nessun deposito; semplicemente fatturando eventuali modifiche che avrebbero registrato al termine del periodo di supporto gratuito del sito Web. Piccole cose come queste contribuiscono notevolmente a garantire un buon servizio clienti e miriamo a garantire che le migrazioni procedano senza intoppi, anche quando tutto viene controllato, ricontrollato e ricontrollato.

Un sito web di nuova concezione

Ma non era finita con una migrazione. Paravel aveva dei criteri per il trasferimento associato all'esperienza del cliente che il nuovo sito avrebbe offerto e, per garantire ciò, dovevamo sviluppare un nuovo sito Web Shopify Plus per loro.

Come parte del loro progetto, gli sviluppatori di 1Digital Ⓡ Agency hanno creato per loro una nuova homepage che fosse meglio integrata nel marchio e aiutasse a posizionare i loro prodotti in una luce più desiderabile. Presentava immagini di prodotto e di sfondo aggiornate che si allineavano meglio con gli interessi e le percezioni del mercato di riferimento. Considera l'impressione elegante e sofisticata della nuova home page, di seguito, con un'immagine della vecchia home page sotto di essa.

Per i visitatori della loro homepage, il nuovo layout colpisce immediatamente non solo per l'estetica superiore delle sue immagini, ma anche per lo sforzo più concertato che fa per mettere in primo piano il valore dei prodotti Paravel. Noterai anche che c'è un menu nella parte superiore del nuovo layout della home page che mancava nel design precedente; il modo per accedere ai loro prodotti in precedenza era scorrere la pagina in basso fino a dove c'era un pulsante con l'etichetta "acquista la collezione". La nuova pagina presenta funzionalità di navigazione del sito molto migliori, come puoi vedere sopra.

Scorrendo la home page, i visitatori possono visualizzare le recensioni tramite un banner scorrevole, saperne di più sulle categorie di prodotti popolari e persino vedere come i clienti utilizzano i prodotti tramite i social media, come puoi vedere in alcuni degli screenshot seguenti.

Oltre alla homepage, 1Digital Ⓡ ha creato un nuovo modello di pagina di categoria insieme a una pagina "La nostra storia" per Paravel, oltre a molte altre pagine di sistema. Tra le pagine sviluppate c'erano il carrello e le pagine di pagamento, le pagine di accesso, le pagine dei buoni regalo e le pagine "Grazie". Infine, abbiamo personalizzato una serie di pagine di contenuto, comprese le loro pagine "FAQ" e "Termini".

L'importanza di un design di sito Web reattivo di alta qualità è fondamentale per l'eCommerce al giorno d'oggi e gli sviluppatori di 1Digital Ⓡ sono stati attenti a preparare un sito Web reattivo aggiornato per Paravel come parte del progetto. Nell'interesse dell'esperienza utente di Paravel, il nuovo design responsive di 1Digital Ⓡ si adatta automaticamente a schermi più piccoli, ridimensionando e riformattando il testo di conseguenza.

Sviluppo avanzato – Funzionalità della pagina di categoria

Quando gli sviluppatori 1Digital Ⓡ hanno trasferito tutte le informazioni associate alle categorie di prodotti di Paravel, abbiamo anche aggiunto alcune nuove funzionalità da trasmettere ai loro clienti migliorando così l'esperienza del cliente.

Abbiamo installato un Metafield Editor nel loro modello di pagina di categoria in modo che Paravel potesse apportare modifiche rapide ad alcuni dei badge che apparivano nella visualizzazione della pagina di categoria. Ciò ha consentito loro di modificare i campi personalizzati in modo che le promozioni associate a prodotti "nuovi", "bestseller" o "in primo piano" potessero essere visualizzate in modo più evidente.

Questa funzionalità apparentemente semplice restituisce molto potere agli amministratori di Paravel per apportare modifiche rapide e facili alla visualizzazione del loro sito Web senza lavorare con uno sviluppatore. A un uomo può essere dato un pesce o insegnato l'arte e abbiamo fornito istruzioni dettagliate a Paravel su come utilizzare e gestire l'app in modo che potessero facilmente apportare modifiche anche dopo la chiusura del progetto.

Allo stesso modo, gli sviluppatori di 1Digital Ⓡ hanno creato campioni di prodotto e funzionalità di visualizzazione rapida sulle pagine delle raccolte di Paravel. Abbiamo creato uno script personalizzato per la loro pagina delle collezioni Shopify Plus che è stato in grado di recuperare e visualizzare le informazioni desiderate.

Lo script per questi campioni assicurava inoltre che quando un cliente faceva clic sul campione associato al colore di interesse, l'immagine del prodotto veniva visualizzata in quel colore. Inoltre, visualizzerebbe il prezzo applicabile associato alla modifica, nonché eventuali opzioni di "personalizzazione" o, se necessario, un messaggio "esaurito".

Sviluppo avanzato – Funzionalità della pagina del prodotto

Paravel pone una grande enfasi sull'esperienza del cliente e, in quanto tale, ha richiesto una grande quantità di funzionalità aggiuntive dal modello di pagina del prodotto, comprese capacità aggiuntive per aiutare a personalizzare l'esperienza di acquisto.

Pertanto, come parte dell'aspetto di sviluppo avanzato del progetto, 1Digital Ⓡ ha contribuito a creare un nuovo e migliore insieme di funzionalità per personalizzare l'esperienza di acquisto sul proprio sito Web, in particolare sulla pagina del prodotto.

Abbiamo configurato il loro modello di pagina del prodotto in modo che venisse visualizzato in modo simile al loro vecchio negozio Spree. Abbiamo quindi creato una barra "aggiungi al carrello" stick che sarebbe rimasta nella parte inferiore della visualizzazione della pagina del prodotto. Quella era la parte facile.

Abbiamo anche sviluppato uno strumento per il loro modello di pagina di prodotto che consentirebbe agli acquirenti di personalizzare la loro esperienza di acquisto e renderla più realistica. Oltre a offrire ai propri clienti la possibilità di vedere come sarebbe una determinata borsa (o un altro prodotto) utilizzando la funzionalità campione sopra descritta, Paravel offre ai propri clienti anche la possibilità di personalizzare i propri prodotti.

Paravel era interessato alle funzionalità di potenziamento della conversione di uno strumento realistico che consentisse ai suoi clienti di vedere effettivamente come sarebbero stati i loro prodotti una volta personalizzati, quindi abbiamo creato uno strumento che consentisse loro di farlo.

Lo strumento che abbiamo creato per Paravel mostrava un popup con le parole "Personalizza" quando un cliente visitava la pagina del prodotto. Abbiamo quindi creato uno strumento che consentisse al cliente di personalizzare il prodotto in base allo stile e al colore delle scritte che apparirebbero come un monogramma con le loro iniziali.

Questo strumento viene visualizzato come widget nella pagina del prodotto dopo che il cliente ha fatto clic su "Personalizza" ed è molto facile da manipolare e personalizzare in base alle proprie preferenze. Per garantire che il prodotto mostrasse correttamente la personalizzazione, abbiamo dovuto creare uno script personalizzato che mostrasse accuratamente le lettere che il cliente aveva inserito, nello stile che ha selezionato, sull'area giusta del prodotto, come si può vedere nell'immagine qui sotto. Come ultimo livello di funzionalità, abbiamo creato un "Modello in nylon" che avrebbe consentito ai clienti di Paravel di personalizzare i propri prodotti con lettere ricamate anziché lettere dipinte a mano o applique.

C'erano alcune altre personalizzazioni che abbiamo creato per le pagine dei prodotti di Paravel, inclusa l'implementazione di quattro schede dalle pagine dei prodotti nel loro vecchio negozio Spree tramite la codifica HTML. Abbiamo anche ricreato la funzionalità "Scegli la tua avventura" dal negozio Paravel's Spree, che consente ai clienti di personalizzare ulteriormente i prodotti Paravel con applique e disegni dipinti a mano, oltre ad alcune altre personalizzazioni per preservare l'integrità della funzionalità originale apparsa su il loro negozio Sprea.

Integrazione con app critiche

Per garantire la funzionalità del loro nuovo negozio Shopify Plus e garantire un'esperienza utente fluida e piacevole, 1Digital Ⓡ Agency ha dovuto integrare il nuovo negozio di Paravel con le sue app business-critical.

Tra le altre cose, i clienti di Paravel hanno fatto affidamento su recensioni e testimonianze che Paravel è stata in grado di disegnare e mostrare tramite YotPo, che ci siamo assicurati fosse perfettamente integrato per loro. Paravel ha anche fatto molto affidamento sull'uso di Zaius per il coinvolgimento dei clienti e il CRM, quindi abbiamo eseguito tale integrazione oltre a quanto sopra.

Inoltre, Paravel utilizza le funzionalità offerte non solo da RJ Metrics ma anche da Talkable. Queste app forniscono dati preziosi agli amministratori di Paravel e consentono programmi di marketing di riferimento sicuri.

1Digital Ⓡ L' agenzia ha integrato tutte queste app con il nuovo negozio di Paravel oltre a codificare e sviluppare il loro nuovo sito Web Shopify Plus. Abbiamo concluso questo progetto, di vasta portata, che prevede una migrazione e uno sviluppo personalizzato avanzato, senza interruzioni. Vale a dire, il cliente non ha subito interruzioni indebite negli affari, nessuna perdita di traffico e si è trasferito in un negozio di nuova concezione con funzionalità personalizzate avanzate senza nemmeno un singhiozzo. Per farlo ci vogliono esperienza e processi accurati, entrambi integrati da 1Digital Ⓡ nel nostro flusso di lavoro.

La soluzione completa

Alcuni fornitori sintonizzano i loro servizi su uno o due servizi altamente specializzati, ma sappiamo che i problemi affrontati dai commercianti di eCommerce sono diversi. Se solo potessimo offrire servizi di sviluppo, non saremmo stati in grado di migrare Paravel da Spree a Shopify Plus, che è una delle principali piattaforme di eCommerce per i commercianti online. Allo stesso modo, se ci fossimo limitati a eseguire le migrazioni, non saremmo stati in grado di personalizzare il loro nuovo negozio nel modo desiderato.

I servizi di progettazione e sviluppo di Shopify Plus, anche se abbinati ai nostri servizi di migrazione, sono solo una piccola istantanea di ciò che offre 1Digital Ⓡ Agency. Oltre ai nostri servizi di design personalizzato Shopify, offriamo anche campagne di marketing digitale complete, comprese campagne SEO e PPC altamente competitive, accuratamente studiate e mirate.

Questa storia di successo dipende dal fatto che siamo stati in grado di migrare Paravel da Spree a un negozio Shopify Plus di nuova concezione con funzionalità avanzate. Molti dei nostri altri casi di studio di eCommerce si concentrano su altre piattaforme di eCommerce come la progettazione e lo sviluppo di BigCommerce, servizi Magento simili e campagne di marketing digitale. Dai un'occhiata al nostro repertorio e, se vuoi vedere come possiamo risolvere i problemi che devono affrontare il tuo business online, chiamaci al numero 888-982-8269.

Scarica il pdf

Tags: 1 Processo digitale sviluppo di casi di studio e -commerce eCommerce Migrazione dei dati piattaforme di e -commerce Migrazione piattaforma di migrazione Piattaforme responsive design shopify plus