Blog di Shopify

Come creare la pagina di errore 404 perfetta per il vostro sito ecommerce

Pagina errore 404

È inevitabile che ogni tanto i visitatori di un negozio online finiscano su una pagina di errore 404 (o not found in inglese), per via di un banale errore di digitazione o di un link non funzionante. Anche se la visualizzazione di una pagina 404 rappresenta un imprevisto, non è necessariamente dannosa per gli utenti; anzi, può essere l'occasione per offrire loro assistenza con un messaggio personalizzato. In effetti, alcune delle migliori pagine 404 combinano umorismo e UX di qualità creando esperienze memorabili.

Se siete sviluppatori di siti web, dovreste sfruttare questa opportunità quando realizzate temi personalizzati per i vostri clienti. Includere pagine di errore 404 semplici, utili e ben congegnate è importante per ridurre le difficoltà dei visitatori. Call-to-action chiare, box di ricerca e menu di navigazione — uniti a immagini creative e divertenti — consentono di creare landing page personalizzate, trasformando un possibile evento negativo in qualcosa di positivo.

In questo articolo, esamineremo alcuni esempi di pagine 404 a cui ispirarvi. Vedremo anche come creare una pagina di errore 404 personalizzata su Shopify, il che vi aiuterà a perfezionare e arricchire i temi dei vostri clienti.

Download gratuito: checklist per la SEO

Vuoi apparire più in alto nei risultati di ricerca? Chiedi l'accesso alla nostra checklist per l'ottimizzazione sui motori di ricerca.

Definizione: errore 404

Ma che cos'è esattamente una pagina o un errore 404? È quello che appare quando il server non riesce a trovare un documento o una pagina richiesti da un utente. Fondamentalmente, è una pagina che non esiste.

Best practice per le pagine 404

Idealmente una pagina 404 dovrebbe indicare che si è verificato un errore e indirizzare con chiarezza l'utente a una pagina più adatta; il tutto, restando in linea con lo stile del brand.

Una pagina di errore 404 può avere un impatto sulla SEO perché se ben strutturata e provvista di link utili, riduce il bounce rate (tasso di visitatori che lasciano il sito dopo aver visto una sola pagina). Inoltre, se dotata contenuti coinvolgenti o divertenti, incoraggia gli utenti a restare.

Anche Google dedica alcuni preziosi consigli alla creazione delle pagine 404:

“Se avete accesso al vostro server, vi consigliamo di creare una pagina 404 personalizzata. Una pagina 404 personalizzata ottimale consente agli utenti di trovare le informazioni che stanno cercando e fornisce loro altri contenuti utili che li incoraggiano a continuare la navigazione nel vostro sito”.

Anche con un template 404 personalizzato, è comunque importante verificare l'assenza di broken link nel sito, per evitare che gli utenti vengano portati fuori strada. Semplici strumenti come Link Checker di W3 o l'app Transportr consentono agli sviluppatori di identificare e correggere rapidamente qualsiasi evento 404 nei negozi dei loro clienti.

Esempi di pagine 404 ben congegnate

Ormai creare pagine di errore 404 personalizzate è la prassi. Consente ai clienti di presentare il loro brand nella migliore luce possibile, indirizzando i visitatori verso le pagine più importanti del sito. Ecco alcuni esempi di pagine di errore 404 che potranno ispirarvi.

1. Velasca

Pagina 404 Velasca

Utilizzando l'umorismo con il riferimento al Monopoli, Velasca trasmette un messaggio divertente che neutralizza il senso di disagio quando si atterra su questa pagina di errore. Le opzioni di navigazione sono semplici, per evitare qualsiasi confusione. È presente un messaggio con le indicazioni per “riprendere la strada giusta” e un floating link sulla sinistra per entrare in contatto con l'azienda.

Scorrendo verso il basso, compare l'invito a iscriversi alla newsletter per ottenere il 10% di sconto sul primo ordine. Questo è un buon incentivo per i visitatori e un modo per trasformare l'errore 404 in un acquisto.

2. Depuravita

Depuravita pagina 404

Depuravita adotta un approccio semplice, per non confondere gli utenti: il messaggio di errore, un pulsante ben evidente per tornare alla homepage, il menu di navigazione e un floating link per contattare l'assistenza.

I più curiosi, scorrendo la pagina, saranno in grado di visualizzare un'anteprima dei prodotti e il feed di Instagram. Indubbiamente l'aggiunta di contenuti below the fold è una buona idea per diminuire il bounce rate e coinvolgere gli utenti.

3. Classic Boats Venice

Classic Boats Venice pagina 404

Ecco un esempio di pagina di errore 404 minimal, che fornisce all'utente un percorso chiaro e senza distrazioni verso l'homepage.

Minimal, ma solo in apparenza... Perché a sorpresa scorrendo la pagina verso il basso appare una landing page completa di tutto.

Classic Boats Venice pagina errore 404 below the fold

Contatti, unique selling proposition e modulo di iscrizione alla newsletter. Ci sono anche i link agli ultimi blog post, completi di anteprima delle immagini. Con una soluzione di questo tipo, è possibile coinvolgere gli utenti senza rinunciare alla chiarezza.

4. Wear Me

Wear Me pagina errore 404

Wear Me sa che l'utente potrebbe cliccare sul link di un prodotto non più disponibile e atterrare sulla pagina 404. Quindi spiega l'errore in termini semplici, incoraggiando alla scelta di un nuovo prodotto.

È molto utile mostrare sulla pagina alcuni prodotti consigliati in modo da offrire ai visitatori delle alternative, come fa questo brand.

Possibili personalizzazioni delle pagine di errore 404 con Shopify

State personalizzando un tema per un vostro cliente? L'utilizzo di una pagina 404 predefinita di Shopify è una soluzione praticabile, a condizione che stiate lavorando su un tema approvato del nostro Theme Store.

Tuttavia considerate che le pagine 404 personalizzate sono più vantaggiose per i clienti. Una pagina di errore 404 progettata con cura e in linea con il brand offre la possibilità di incrementare le vendite.

Ad esempio, un pulsante di call-to-action può indirizzare i visitatori verso una collezione specifica; o un box di ricerca può consentire agli utenti di trovare facilmente ciò di cui hanno bisogno. La pagina  di errore 404 è anche un'occasione unica per il cliente di comunicare con il proprio pubblico; l'aggiunta di un po' di umorismo con immagini adatte può aumentare la notorietà del brand. Come abbiamo visto con gli esempi di cui sopra, una pagina 404 divertente e informativa può neutralizzare un possibile problema e reindirizzare i visitatori a contenuti di valore.

Tenendo presenti questi aspetti, vi indichiamo alcuni metodi adatti a personalizzare le pagine di errore 404 per i vostri clienti.

1. Layout template alternativo per le pagine 404

Spesso nei siti web la pagina 404 ha uno stile e un aspetto diverso rispetto alle altre pagine. Per ottenere questo risultato dovete creare un file di layout alternativo per le pagine di errore 404. Ad esempio, potreste voler rimuovere il footer o creare uno speciale menu di navigazione.

Il file di layout theme.liquid è applicato al template file 404.liquid di default, ma questa impostazione predefinita può essere facilmente modificata. Innanzitutto create una copia del file theme.liquid all'interno della cartella del layout del tema e rinominatela come 404-layout.liquid.

Ora potete tranquillamente rimuovere dal file di layout gli elementi superflui (header, footer, ecc.), modificare l'H1 e personalizzare tutto ciò che volete (come i title tag). Una volta che sarete soddisfatti di questo file di layout alternativo, potrete utilizzare i logic tag di Liquid per collegare il file di layout con il file template.

Per renderizzare la pagina 404 con questo particolare file di layout, dovrete aggiungere il tag Liquid {% layout "404-layout" %} in cima al file template 404.liquid. Quindi ad esempio il vostro template 404.liquid potrebbe avere questo aspetto:

Ora, ogni cambiamento che apportate al file 404-layout.liquid verrà applicato alla pagina 404. Consultate il nostro Centro Assistenza per maggiori informazioni sui template 404.

2. Immagine di sfondo personalizzata sulle pagine di errore 404

Uno dei metodi più efficaci per identificare online il marchio del cliente è la grafica semplice; e l'immagine di sfondo è diventata una caratteristica standard delle pagine 404. Per ottenere l'effetto di un'immagine a tutto schermo potete usare il CSS, assegnando un'immagine di sfondo specifica alla pagina 404.

La proprietà background-image vi permette di collocare un'immagine sotto il resto degli elementi della pagina. Potreste anche impiegare il CSS per collocare più immagini sullo sfondo, il che può risultare utile quando si tratta di inserire un logo sopra lo sfondo.

La prima cosa da fare è caricare l'immagine desiderata su Shopify, da Impostazioni > File. In questo modo verrà generato un URL univoco dove è memorizzata l'immagine.

Pagine di errore 404: file

Poi passate al foglio di stile del tema e usate:

  • "class" o "ID" dell'opening container della vostra pagina 404.liquid come selettore
  • e proprietà CSS background-image e URL come valore

Il risultato potrebbe avere questo aspetto:

3. Barra di ricerca sulla pagina di errore 404

La barra di ricerca per trovare subito dove andare è una delle funzionalità più comuni ed efficaci delle pagine di errore 404. Per includere una barra di ricerca nella pagina 404 del vostro cliente, potete creare un modulo HTML con l'attributo action impostato su /search. In questo modulo, deve essere incluso un inserimento di testo con l'attributo name impostato come q. Ecco un semplice esempio:

Per definire l'aspetto della vostra pagina potete modificare il CSS definendo i valori del margine, dello spazio intorno ai contenuti, ecc. Ecco ad esempio come appare il box di ricerca nella pagina di errore 404 del mio negozio di prova:

Pagine 404: barra di ricerca

4. Sezione dedicata alla call-to-action

Il cliente può voler indirizzare gli utenti a una pagina o collezione specifica quando arrivano sulla pagina 404. Un pulsante di call-to-action personalizzabile è il modo ideale per ottenere questo risultato. Aggiungendo una sezione statica che offre questa possibilità, garantirete ai vostri clienti un maggiore controllo sul negozio.

Per prima cosa, dovete creare un nuovo file Liquid vuoto nella cartella delle sezioni del tema, con il nome 404-call-to-action.liquid. Quindi aggiungete questo codice al file:

Successivamente, dovrete includere questa nuova sezione nel vostro file template 404.liquid nel punto dove desiderate che appaia il pulsante di call-to-action. Utilizzate il tag del tema Liquid {% section "404-call-to-action" %} per includere questa sezione. Nel mio caso il file template 404.liquid ha questo aspetto:

Ora, quando aprite l'editor del tema e caricate una pagina inesistente, vedrete un'opzione per modificare il pulsante di call-to-action. Le modifiche apportate con l'editor del tema da questo momento si applicheranno a qualsiasi pagina di errore 404.

Pagine 404: pulsante

Quale errore?

Questi sono solo alcuni dei modi per perfezionare la pagina standard di errore 404 di Shopify. E vi incoraggio a creare le pagine 404 tenendo conto delle caratteristiche uniche dei vostri clienti.

Pensando fuori dagli schemi, potrete offrire ai vostri clienti l'opportunità di trasformare una potenziale perdita in un risultato positivo. Con le pagine di errore 404 potrete addirittura aiutarli a incrementare le vendite. Sicuramente i vostri clienti vogliono che il loro brand si distingua in ogni punto del percorso di acquisto. Quindi, non trascurate le pagine di errore.

Speriamo davvero che, con l'aiuto di questo articolo, sarete in grado di dare un valore aggiunto ai vostri progetti!

Avete sperimentato diversi stili per sviluppare delle pagine di errore 404 funzionali e divertenti? Condividete le vostre esperienze nei commenti.


Articolo originale di Liam Griffin, tradotto e adattato da Maria Teresa Cantafora.
Argomenti: