Layout della homepage PrestaShop e controlli per tornare in alto

Cosa faremmo

Manterremmo il tema funzionante e i blocchi nativi, daremmo alla prima schermata una destinazione chiara, poi rimuoveremmo o riordineremmo i blocchi che la mettono in secondo piano. La soluzione dipende da tema, builder, moduli, dati del catalogo, integrazioni, lingue e mercati esistenti, e da chi gestirà le campagne. Verifica cosa consentono gli strumenti attuali prima di aggiungere un altro modulo o commissionare un nuovo design.

Apporta modifiche alla struttura, al tema o al codice su una copia di staging con gli stessi moduli e prodotti rappresentativi, isolata da email, ordini ed esportazioni esterne di produzione. Prova il percorso dalla homepage all'acquisto, annota l'ordine precedente degli hook e le impostazioni e conserva copie delle risorse modificate. Concorda una finestra di pubblicazione e un passaggio reversibile con il responsabile del negozio. Se necessario, ripristina il layout o la configurazione modificati, senza sovrascrivere i nuovi ordini di produzione con un database di staging.

Per una diagnosi con priorità, il PrestaShop UX & Conversion Design Audit fornisce un piano di correzione; per configurare un tema che possiedi già, il PrestaShop Theme Installation & Setup Service copre la configurazione concordata anziché un nuovo design.

Da quale layout iniziare?

Trova i moduli e gli hook che compongono la homepage

Il controller index nativo rende i contenuti della homepage tramite template e hook del tema. Nei layout standard, displayHome fornisce la sequenza principale dei moduli; gli hook di header e footer la circondano. Un tema di terzi o un page builder possono modificare questa disposizione.

1. Identifica il tema attivo e l'eventuale builder della homepage.
2. Apri Design > Posizioni, trova displayHome e annota moduli e relativo ordine.
3. Apri la configurazione di ogni modulo per modificarne testi, contenuti multimediali o selezione dei prodotti. Annota la categoria o il feed di origine e chi li gestisce.
4. Riordina o sgancia i blocchi dove il tema lo supporta, poi esamina l'output desktop e mobile.

Le installazioni Classic usano comunemente ps_imageslider, ps_customtext, ps_featuredproducts e ps_banner. I moduli installati e il loro ordine in displayHome dipendono dal tema e dalla distribuzione; annota le versioni di PrestaShop e del tema insieme alla mappa dei blocchi. Hummingbird è diventato il tema predefinito delle nuove installazioni in PrestaShop 9.1; i negozi aggiornati possono mantenere un tema precedente.

Se una modifica salvata non compare, verifica negozio e lingua selezionati, posizione del modulo negli hook ed eventuali layout gestiti dal builder, poi svuota la cache pertinente tramite i controlli supportati. Confronta la pagina visualizzata senza aver effettuato l'accesso; la sola anteprima del back office non dimostra cosa ricevono i clienti.

La configurazione predefinita di Hummingbird aggancia slider, testo personalizzato, prodotti in vetrina, banner, nuovi prodotti e più venduti a displayHome. Verifica le posizioni effettive nel tuo negozio prima di modificarne la homepage.

Assegna alla prima schermata un compito chiaro

Spiega cosa vendi, perché l'offerta è pertinente e dove deve andare il visitatore. “Sistemi doccia walk-in” o “Borse in pelle fatte a mano a Firenze” sono più chiari di “Prodotti di qualità per la vita moderna”. Controlla nella homepage visualizzata se l'H1 manca o è vuoto e imposta un H1 significativo e visibile tramite il template della homepage del tema o un blocco di contenuto supportato. Usa un'azione descrittiva come “Acquista docce walk-in”.

La prima schermata varia con dimensioni della finestra, zoom, controlli del browser, avvisi e dimensioni dell'header. Prova schermate reali anziché presumere un'altezza fissa della parte visibile. Un breve esercizio di comprensione con qualcuno che non conosce il negozio può rivelare testi poco chiari, ma un test di tre secondi non è un parametro di conversione.

Un'immagine principale statica può mantenere visibile un messaggio e ridurre i contenuti multimediali in competizione. Un carosello può adattarsi a più campagne, ma agli utenti servono controlli chiari, contenuti leggibili e tempo per agire. La pertinente ricerca sull'usabilità dell'avanzamento automatico riguarda problemi specifici di usabilità.

Confronta una sola slide o un'immagine principale statica con lo slider esistente. Verifica quali immagini e script vengono davvero scaricati e identifica la risorsa LCP. Carica subito l'immagine principale iniziale, riservale spazio ed evita testo illeggibile incorporato nell'immagine.

Banner Revolution supporta contenuti multimediali dei banner, sovrapposizioni, inviti all'azione, pianificazione e varianti mobile di media e layout; consulta la guida di Banner Revolution.

Seleziona categorie e prodotti come ingressi al catalogo

Scegli i punti di ingresso alle categorie in base a gamma e attività dei clienti. Usa etichette chiare come “Stivali da donna” anziché codici stagionali interni. Una piccola griglia visiva può essere un punto di partenza utile; da quattro a otto categorie è una scelta editoriale, non un numero ottimale dimostrato né una garanzia che le immagini ricevano più clic.

Mantieni utilizzabili menu permanente e ricerca. La griglia delle categorie in homepage è una scorciatoia, non sostituisce la navigazione. Consulta la guida alla navigazione per alberi delle categorie, intestazioni, comportamento del menu, filtri ed elenchi.

Il blocco nativo Prodotti in vetrina attinge a una categoria configurata, comunemente Home, e consente di impostare il numero di prodotti visualizzati. Assegnare un prodotto alla categoria sorgente è diverso dall'attivare un indicatore universale “in vetrina” sul prodotto. Apri Moduli > Gestione moduli e configura ps_featuredproducts per impostare categoria sorgente e numero di prodotti, poi controlla ordinamento e output del tema.

Usa una selezione mirata di prodotti adatta alla pagina: bestseller utili, nuovi articoli o una gamma rappresentativa di prezzi. Puoi provare da otto a dodici prodotti come layout iniziale, poi adattarlo ai risultati. Mostra disponibilità veritiera e un'azione successiva sensata per gli articoli che richiedono combinazioni. I prodotti in liquidazione possono essere appropriati quando la liquidazione è la campagna effettiva.

Se una riga selezionata manualmente diventa obsoleta e ti serve una fonte automatica, Showcase Revolution offre selezioni automatizzate, con prodotti di tendenza basati sulle visualizzazioni e sulle vendite valide del negozio. Verifica la fonte scelta rispetto ai dati effettivi del catalogo e alle schede prodotto del tema prima di sostituire un blocco nativo funzionante.

Usa i filtri per restringere gamme ampie e la ricerca per trovare articoli già noti. Una homepage più lunga con tutto il catalogo non sostituisce questi strumenti.

Un esempio di homepage per un negozio di docce

Supponi che lo slider promuova piatti, scarichi e pareti doccia in slide separate, mentre il menu usa i codici delle collezioni dei fornitori. Concentra l'immagine principale sui sistemi doccia walk-in, collega l'azione a una categoria esistente adatta e assegna a piatti, scarichi e pareti percorsi distinti e chiaramente etichettati più in basso. Posiziona una campagna specifica più sotto, così non sostituisce la spiegazione della gamma.

In staging, chiedi a qualcuno che non conosce il catalogo di trovare un piatto adatto al proprio spazio. Segui il percorso dalla scheda in homepage attraverso elenco e filtri fino a un prodotto con scelte di misura. Verifica che la scheda apra la categoria prevista in ogni lingua e che un prodotto che richiede una combinazione porti a una selezione utilizzabile anziché a un'aggiunta rapida non funzionante. Se il visitatore raggiunge la gamma sbagliata, correggi etichetta o destinazione prima di aggiungere altri blocchi alla homepage.

Usa affermazioni accurate, testi utili e i campi SEO corretti

Mostra valutazioni delle recensioni, conteggi ordini, citazioni stampa, marchi di pagamento e garanzie solo quando puoi documentarli e hai il permesso di usare le risorse. Un'affermazione come “50.000 ordini” richiede registrazioni. Un badge di sicurezza non dimostra che un checkout sia sicuro.

Spiega gli elementi distintivi pertinenti: una soglia effettiva di spedizione gratuita, garanzia, orario limite di spedizione o servizio. Collega condizioni più complete dove necessario. Aggiungi una breve presentazione del marchio e consigli di acquisto quando aiutano i visitatori a scegliere.

Per i metadati nativi della homepage, apri Parametri Negozio > Traffico & SEO e modifica la voce della pagina index. Non modificare pagenotfound, che descrive la pagina di errore. Verifica titolo e meta description renderizzati dopo il salvataggio. Sono separati dall'H1 visibile, che proviene dal tema o dai contenuti.

HTML Blocks può posizionare contenuti personalizzati tramite hook, integrazione nei template o selettori; consulta la guida di HTML Blocks. Mantieni l'eventuale CSS specifico per dispositivo nel tema o nell'estensione.

Un blocco degli ultimi articoli richiede un sistema di contenuti o un modulo installato; le pagine CMS native non offrono un flusso completo di blogging. Mantieni disponibili le informazioni utili nell'HTML mobile, anche quando le organizzi in sezioni a fisarmonica. Evita di nascondere contenuti essenziali solo per imitare una pagina più snella.

Prova il layout mobile e il suo costo

Verifica le tue sessioni per categoria di dispositivo, azioni successive e acquisti. Non presumere che il mobile costituisca la maggioranza del traffico di ogni negozio. Hummingbird e Classic sono responsive, ma moduli, contenuti lunghi e CSS personalizzato possono comunque sbordare.

• Usa un ritaglio leggibile dell'immagine principale o una variante multimediale per mobile.
• Rendi le schede di categorie e prodotti abbastanza grandi da essere riconosciute e utilizzate.
• Confronta una griglia con una riga scorrevole accessibile, anziché dichiararne una universalmente migliore.
• Mantieni raggiungibili navigazione, ricerca e carrello.
• Accorpa le rassicurazioni ripetute e rimuovi gli incorporamenti di terzi superflui.
• Rendi chiudibili le finestre di dialogo ed evita che coprano subito i primi contenuti utili all'arrivo.

Video a riproduzione automatica, slider e feed social possono aggiungere richieste ed elaborazione. Esamina la sequenza delle richieste prima di decidere cosa rimuovere. Mantieni appropriate dimensioni delle immagini e file responsive; usa la guida alle immagini per dimensionamento e lazy loading.

Registra clic dalla homepage a categorie/prodotti, ricerche riuscite, uscite e acquisti successivi. Confronta fonti di acquisizione e gruppi clienti simili. Una visita lunga può indicare interesse o confusione e chi entra dalla homepage non deve necessariamente convertire come chi arriva direttamente a un prodotto.

Decidi se un controllo per tornare in alto è utile

Scorri pagine lunghe di homepage, categorie, prodotti e contenuti su desktop e telefono. Verifica prima se tema, builder o un modulo forniscano già un controllo funzionante. Cerca elementi come back-to-top o scroll-to-top e risali alla loro origine. Alcuni temi offrono un'opzione; non presumere che lo facciano tutti i temi a pagamento.

Le osservazioni specifiche di Classic non descrivono ogni nuovo negozio PrestaShop 9. Verifica il tema installato prima di aggiungere un secondo pulsante. Se un controllo esistente non funziona, esamina impostazione, errori della console e comportamento dei livelli di sovrapposizione prima di sostituirlo.

Modificare nel tema padre attivo footer.tpl, theme.js, custom.js o custom.css può portare alla sovrascrittura. Un file chiamato “custom” non è automaticamente protetto. Conferma che il tema carichi le tue risorse esterne. L'inserimento nel footer funziona solo quando il modulo supporta un hook e il tema lo rende, per esempio displayFooter o displayBeforeBodyClosingTag.

Se manca un controllo adatto e al personale servono impostazioni gestibili, Back to Top Button offre distanza di attivazione, lato, dimensioni, spaziatura e visibilità separata per desktop e telefono. Disattiva eventuali controlli concorrenti e prova il risultato con i widget flottanti effettivi.

Un header fisso può già rendere raggiungibili ricerca e carrello. Prova se un controllo per tornare in alto aiuta i clienti a navigare nelle pagine più lunghe.

Implementa e prova un controllo di scorrimento accessibile

Usa un vero pulsante con un nome accessibile. Mantieni un indicatore di focus visibile, contrasto adeguato e un'area di tocco comoda. Posiziona il markup tramite il modulo o tema child scelto e inserisci CSS e JavaScript in risorse esterne. Quello che segue è codice sorgente di esempio, non contenuto eseguibile della pagina.

<button type="button" id="back-to-top" aria-label="Back to top" hidden>↑</button>

#back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 48px;
  height: 48px;
}
#back-to-top:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

const topButton = document.getElementById('back-to-top');
if (topButton) {
  const updateTopButton = () => {
    const shouldHide = window.scrollY <= window.innerHeight;
    if (shouldHide && document.activeElement === topButton) return;
    topButton.hidden = shouldHide;
  };
  window.addEventListener('scroll', updateTopButton, { passive: true });
  updateTopButton();
  topButton.addEventListener('click', () => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    window.scrollTo({ top: 0, behavior: reduce ? 'instant' : 'smooth' });
  });
}

Carica questo codice dopo il markup o tramite l'inizializzazione supportata dal tema. La soglia di una schermata è una scelta di design: provala. Questo piccolo callback di scorrimento viene comunque eseguito sul thread principale. Un listener passivo non lo sposta altrove e requestAnimationFrame coordina il rendering senza garantire una minore frequenza degli eventi. Usa un throttling misurato se il costo effettivo del gestore lo richiede. Consulta le indicazioni di MDN sull'evento scroll.

Scegli distanze e livelli di sovrapposizione in base alla pagina reale, non a uno z-index arbitrariamente enorme. Prova con avvisi di consenso, chat, aggiunta al carrello fissa, barre di invio mobile e aree sicure del browser. Un controllo visibile può comunque non essere cliccabile sotto una sovrapposizione.

1. Verifica che non compaia un pulsante duplicato.
2. Usa Tab e Invio/Spazio per azionarlo e conferma che il focus resti visibile.
3. Prova le impostazioni di movimento ridotto e una pagina ripristinata in una posizione già scorsa.
4. Verifica che i controlli di acquisto del prodotto restino utilizzabili quando sono presenti tutti i widget flottanti.
5. Prova categorie lunghe, recensioni, pagine CMS e homepage sui telefoni supportati.
6. Se utile, registra un evento di clic nel rispetto del consenso ed esamina l'uso per pagina. I clic da soli non dimostrano una conversione più alta.

Pubblica il layout e passa le consegne

1. Approva la versione di staging con il responsabile effettivo dei contenuti. Controlla link delle campagne, etichette tradotte, condizioni delle offerte e disponibilità dei prodotti, anche dopo la fine di un'offerta programmata.
2. Segui i percorsi di menu, ricerca, categorie e prodotti come visitatore non autenticato sui telefoni e browser desktop supportati. Aggiungi un prodotto con opzioni e prosegui fino al carrello e all'ingresso nel checkout; una modifica alla homepage non deve compromettere i controlli condivisi.
3. Pubblica risorse e configurazione concordate senza sostituire i dati di clienti o ordini di produzione. Aggiorna le cache pertinenti e controlla la pagina pubblica, anche con consenso accettato e rifiutato quando i contenuti esterni ne dipendono.
4. Confronta le misurazioni della homepage descritte sopra con un periodo e un mix di traffico comparabili. Se le azioni successive diminuiscono, esamina destinazioni interrotte, prodotti non disponibili e problemi di caricamento prima di attribuire il cambiamento al design.
5. Consegna la mappa dei blocchi, le impostazioni, le posizioni delle risorse e i passaggi di ripristino. Indica chi aggiorna ogni campagna e controlla il layout dopo gli aggiornamenti di tema o moduli.

Cosa chiedere allo sviluppatore o all'agenzia

• Quali blocchi provengono da tema, builder o moduli e quali impostazioni può modificare il nostro personale?
• Quale requisito non è soddisfatto dagli strumenti esistenti e quali prove giustificano l'aggiunta proposta?
• Dove si trovano le risorse personalizzate e come le controllerete quando cambia il tema padre?
• Quali dispositivi, lingue e percorsi di acquisto hanno superato i test e chi può ripristinare il layout precedente?

Domande dei titolari

Nascondere un blocco prodotti in homepage elimina i prodotti?

Sganciare un blocco di visualizzazione rimuove quel posizionamento, non i record del catalogo. Evita di eliminare una categoria sorgente o modificare le assegnazioni dei prodotti solo per nascondere una riga. Controlla anche gli altri posizionamenti prima di disinstallare un modulo che fornisce contenuti oltre alla homepage.

Rimuovere un banner promozionale termina l'offerta?

No. La visibilità del banner e il prezzo del prodotto o la regola carrello sono controlli separati. Fai corrispondere le condizioni di inizio e fine previste, poi controlla l'offerta e la sua destinazione dopo la scomparsa del banner.

Ogni negozio in multinegozio può avere una homepage diversa?

Verifica se tema, builder e moduli interessati memorizzano i contenuti per negozio. Seleziona il contesto del negozio desiderato prima di modificare e controlla gli altri negozi dopo. Una configurazione condivisa può modificare più vetrine rispetto a quella vista in anteprima.

Serve jQuery per il pulsante di esempio?

No. L'esempio usa le API del browser e non richiede quella libreria. Se un builder genera nuovamente il controllo, verifica che l'inizializzazione non associ gestori di eventi duplicati.

Perché l'esempio non fa scorrere un pannello indipendente?

Osserva e fa scorrere la finestra. Una finestra modale o un pannello del builder con un'area di scorrimento propria richiede una logica rivolta a quell'elemento. Chiedi allo sviluppatore di identificare l'elemento che scorre realmente e di provarlo separatamente dal documento.