Versione mobile PrestaShop: come sistemare o nascondere un elemento sui telefoni
Quando un elemento rovina la versione mobile di PrestaShop, il colpevole di solito è una larghezza fissa, un testo troppo lungo o gli stili di un modulo che non hanno previsto uno schermo stretto. La correzione la aggiungi nel custom.css del child theme, in una regola che vale solo sui telefoni. Nascondi un elemento solo quando ai clienti sul telefono davvero non serve.
Autore: Il team TellMyShop. Una guida per i titolari di negozi PrestaShop: la causa, la correzione a mano e lo stesso lavoro in una conversazione in chat.
Ultimo aggiornamento: · 6 min di lettura
Perché un elemento si vede male sul telefono?
Un negozio PrestaShop non ha una versione mobile separata. Lo stesso codice si dispone in modo diverso quando lo schermo è stretto. I problemi iniziano quando un elemento non riesce a restringersi.
| Cosa vedi sul telefono | Causa più comune | Cosa aiuta di solito |
|---|---|---|
| la pagina scorre di lato | un elemento con una larghezza fissa in pixel, una tabella larga in una descrizione | larghezza al 100%, o far scorrere solo la tabella |
| il testo esce dal suo riquadro | una parola lunga, un indirizzo o un codice che non va a capo | mandare a capo le parole lunghe in quell'elemento |
| le icone di garanzia occupano mezzo schermo | il modulo ha icone grandi e tre colonne senza una regola per il telefono | icone più piccole, una colonna, o nasconderle sui telefoni |
| un pulsante è coperto | una finestra di chat, un banner dei cookie o una barra fissa | spostare la finestra o una barra più bassa |
| il titolo del prodotto va su quattro righe | un carattere del titolo grande dalla versione desktop | una dimensione del titolo più piccola sotto una certa larghezza |
| un'immagine è tagliata o allungata | un'altezza fissa dell'immagine nel CSS | altezza automatica |
Gli elementi che si rompono più spesso sono quelli aggiunti dopo: moduli di terze parti, blocchi di testo incollati da un editor, tabelle delle taglie nelle descrizioni dei prodotti e barre dei messaggi. Il tema in sé spesso va bene.
Come controllare la versione mobile senza telefono
Il browser ti dà un'anteprima rapida. In Chrome apri gli strumenti per sviluppatori e attiva la barra dei dispositivi, come spiega la guida alla modalità dispositivo di Chrome. Scegli la larghezza di un telefono diffuso e vedi subito dove la pagina si rompe.
La modalità dispositivo è un'approssimazione. Controlla sempre anche su un telefono vero, meglio in una finestra privata, così non guardi una vecchia versione dalla cache del browser.
Controlla in ordine:
- La home page.
- Una categoria con i filtri.
- Una pagina di prodotto con un nome lungo e più varianti.
- Il carrello e il primo passo del checkout.
- Una pagina con una tabella, come una tabella delle taglie.
Annota in quale pagina e a quale larghezza compare il problema. È metà della correzione.
Correggere o nascondere l'elemento sui telefoni?
Prova prima a correggerlo. Nascondere è veloce, ma il cliente sul telefono perde un'informazione che il cliente sul computer vede.
Nascondere ha senso quando l'elemento:
- ripete un'informazione che è già più in alto nella pagina,
- è una decorazione senza contenuto,
- copre il pulsante o il prezzo e non si sposta facilmente.
Non nascondere la descrizione del prodotto, il prezzo, la disponibilità, i tempi di spedizione o le informazioni sui resi. È quello che i clienti cercano di più sul telefono.
Dove aggiungere la correzione CSS per i telefoni
Nel file custom.css del tuo child theme. Racchiudi le regole per il telefono in una media query, un blocco che vale solo sotto una certa larghezza dello schermo. La guida di MDN alle media query spiega come funziona.
Il child theme conta per un motivo: un aggiornamento del tema principale non sovrascrive il tuo file. La documentazione di PrestaShop sui child theme spiega come costruirne uno e collegare un tuo foglio di stile. Perché le modifiche spariscono dopo un aggiornamento lo spieghiamo nell'articolo su come un aggiornamento del tema ha cancellato le mie modifiche.
Quali sono le correzioni per il telefono più comuni?
La maggior parte dei problemi della versione mobile si risolve con poche correzioni ricorrenti. Ognuna la metti nel blocco per gli schermi stretti, così la versione desktop resta invariata.
- Una tabella larga nella descrizione di un prodotto. Una tabella delle taglie con molte colonne allarga la pagina. Invece di comprimerla, fai scorrere di lato solo la tabella, non tutta la pagina.
- Parole e indirizzi lunghi. Un codice sconto, un indirizzo email o il nome lungo di un materiale senza spazi esce dal suo riquadro. Basta una regola che manda a capo le parole lunghe in quel solo elemento.
- Una finestra di chat sopra il pulsante Aggiungi al carrello. I moduli di chat spesso hanno una loro impostazione per la posizione sui telefoni. Controllala prima di iniziare a scrivere CSS.
- Titoli troppo grandi. Il nome di un prodotto su quattro righe spinge il prezzo fuori dalla prima schermata. Di solito basta una dimensione del titolo più piccola sui telefoni.
- Tre colonne di icone. I blocchi di garanzia, consegna e resi sui telefoni stanno meglio in una sola colonna con icone più piccole.
Correggi una cosa alla volta e controlla la pagina dopo ogni modifica. Quando cambi più regole insieme, è difficile capire quale ha rotto qualcosa.
Cosa controllare dopo la correzione
Dopo il salvataggio svuota la cache in Parametri avanzati → Prestazioni. Se ancora non vedi la modifica, segui l'elenco del nostro articolo sulle modifiche non visibili in PrestaShop.
Come sistemare la versione mobile con la chat
Descrivi cosa non va e in quale pagina. Puoi incollare nella conversazione uno screenshot dal telefono. La tua chat (Claude o ChatGPT) legge i file del tema e il codice della pagina, capisce quale classe controlla l'elemento e mostra la regola prima del salvataggio.
Tu: Sui telefoni le icone di garanzia sotto il pulsante Aggiungi al carrello occupano mezzo schermo. Nascondile sotto i 768 px e rimpicciolisci il titolo del prodotto. Solo in custom.css.
La tua chat: Le icone arrivano dal modulo di rassicurazione, classe .blockreassurance_product. Il child theme ha un custom.css vuoto. Aggiungo:
Sul computer non cambia niente. Prima del salvataggio faccio una copia del file, poi svuoto la cache.
Tu: Sì.
La tua chat: Salvato. Nella pagina del prodotto la regola vale solo sotto i 768 px. Controllalo anche sul tuo telefono in una finestra privata.
Stato della scheda: in attesa del tuo «sì»versione precedente: (file vuoto)
nuova versione: @media (max-width: 767px) {
nuova versione: .blockreassurance_product { display: none; }
nuova versione: .product-container h1 { font-size: 1.25rem; }
nuova versione: }
Dimensioni e nomi delle classi dell'esempio sono illustrativi; nel tuo tema possono essere diversi. Una richiesta di esempio è nel caso d'uso nascondere o sistemare un elemento sui telefoni.
TellMyShop Pro fa modifiche ai file del tema quando accendi l'interruttore Tema nel pannello del modulo. L'interruttore dura 24 ore e richiede un backup del database fatto lo stesso giorno. Prima di ogni salvataggio di un file viene fatta una copia, e la modifica finisce nella cronologia delle modifiche, quindi puoi annullare ogni modifica con una sola richiesta. La versione gratuita TellMyShop Free non legge né cambia i file del tema; aiuta con i report del negozio. Le versioni sono confrontate nella pagina prezzi.
Domande e risposte
PrestaShop ha una versione mobile separata del negozio?
No. Il tema Classic e la maggior parte dei temi più recenti sono responsive: lo stesso negozio si dispone in modo diverso su uno schermo stretto. Per questo le correzioni per il telefono le fai nello stesso foglio di stile, solo dentro una regola che vale sotto una certa larghezza dello schermo.
Nascondere un elemento sui telefoni danneggia su Google?
Nascondere una piccola decorazione o un'informazione ripetuta di solito non è un problema. Fai attenzione ai contenuti che contano per i clienti e per Google, come la descrizione del prodotto o il prezzo. Google valuta un negozio soprattutto dalla sua versione per telefono, quindi i contenuti importanti devono restare lì.
Come controllo la versione mobile senza telefono?
Apri il negozio in Chrome, apri gli strumenti per sviluppatori e attiva la modalità dispositivo. Vedi la pagina alla larghezza di un telefono e puoi cambiare la dimensione dello schermo. È una buona approssimazione, ma la prova finale falla su un telefono vero.
Perché le mie correzioni per il telefono sono sparite dopo un aggiornamento del tema?
Perché erano scritte in un file del tema che l'aggiornamento ha sovrascritto, come theme.css. Tieni i tuoi stili nel custom.css del child theme. Quel file non viene sovrascritto quando si aggiorna il tema principale.
La chat può vedere com'è il mio negozio sul telefono?
Non guarda lo schermo di un telefono. Legge i file del tema e il codice della pagina, e tu descrivi il problema o incolli uno screenshot nella conversazione. Da lì la chat capisce quale regola cambiare e te la mostra prima del salvataggio.
PrestaShop è un marchio registrato di PrestaShop SA. Claude è un marchio di Anthropic PBC. ChatGPT e OpenAI sono marchi di OpenAI. TellMyShop non è affiliato a queste aziende.