Mobile commerce: il tuo negozio su smartphone è ormai più importante del desktop

Apri il back office di PrestaShop, vai su Stats → Browsers and operating systems per controllare il traffico per dispositivo, poi confronta nei tuoi strumenti di analisi i ricavi per dispositivo e osserva un solo rapporto: la quota di sessioni che arriva da smartphone rispetto alla quota di ricavi generata da quegli stessi smartphone. Per la maggior parte dei negozi, il primo numero è la maggioranza e il secondo è la minoranza. Questo singolo divario — più traffico mobile che fatturato mobile — è tutto il tema di questo articolo. Il mobile non è più una versione ridotta del tuo negozio desktop: è il luogo in cui la maggior parte dei clienti ti incontra per la prima volta, e trattarlo come esperienza secondaria impone un costo silenzioso a ogni ordine.

Ultimo aggiornamento: giugno 2026.

Questo è l'articolo strategico del cluster: perché il mobile è ormai la superficie principale, e che cosa cambia concretamente nel modo in cui gestisci un negozio PrestaShop. Il lavoro tattico più approfondito — mega menu, filtri faccettati, ricerca, layout delle categorie, popup, checkout — vive ciascuno nella propria guida, e noi rimandiamo a quella giusta in ogni punto decisionale invece di liquidarli tutti in fretta qui.

Mobile-first non è uno slogan — è il modo in cui Google legge ormai il tuo negozio

Due elementi hanno reso il "mobile-first" un dato strutturale, non una semplice preferenza di design. Primo: il traffico. Da diversi anni gli osservatori del settore collocano la quota mobile delle sessioni e-commerce sopra la metà e, in molte categorie B2C, ancora più in alto — considera il dato preciso come indicativo e leggilo nel tuo pannello Stats, invece che in un titolo di giornale. Secondo, e molto meno negoziabile: Google è passato al mobile-first indexing per tutto il web. La versione del tuo negozio che Googlebot scansiona, valuta e posiziona è la versione mobile. Se le pagine mobile nascondono contenuti dietro schede che non vengono renderizzate nel DOM, sono più lente o perdono dati strutturati presenti nel layout desktop, sarà quella la versione giudicata — la cura del desktop non ti salva più.

Che cosa significa, quindi, nella pratica? Il tuo negozio mobile è oggi sia la vetrina con più traffico sia il sistema di riferimento per la SEO. Una scelta che sembra "solo una modifica per smartphone" — comprimere una descrizione in un accordion, caricare un blocco in lazy loading, sostituire un menu con un hamburger — è allo stesso tempo una scelta di posizionamento. Questo cambia l'intero approccio: non stai "supportando anche il mobile", stai ottimizzando la versione canonica del negozio e lasciando che il desktop ne erediti i benefici.

Un tema responsive è il punto di partenza, non il traguardo

I temi predefiniti moderni di PrestaShop — Classic su 1.7/8 e Hummingbird su PrestaShop 9 — sono responsive: la griglia si riadatta, le immagini scalano, il menu si richiude in un hamburger sotto il breakpoint mobile. È davvero utile ed è il punto di partenza corretto. Ma "sta nello schermo" e "funziona sotto il pollice" sono due affermazioni diverse. Un tema responsive garantisce che nulla finisca fuori schermo; non garantisce che le aree toccabili siano abbastanza grandi, che compaia la tastiera giusta o che il blocco più importante sia above the fold su un viewport largo 390px.

Due leve specifiche di PrestaShop che la maggior parte dei proprietari non tocca mai:

• Dimensioni immagine reali per gli schermi piccoli. In Design → Image Settings, PrestaShop definisce tipi di immagine con nome (home_default, large_default, cart_default…) e rigenera le miniature per ciascuno. Un tema può quindi usare queste dimensioni generate nel markup srcset/picture, così uno smartphone scarica un'immagine adatta al telefono invece di un hero desktop ridimensionato dal browser — verifica che il tuo tema produca davvero immagini responsive. Se hai ereditato un tema con dimensioni dei tipi immagine gonfiate, stai inviando agli smartphone immagini pesanti come sul desktop: correggi le dimensioni e clicca su Regenerate thumbnails invece di dare la colpa a un "hosting lento".
• Lazy loading e asset differiti. Molti temi moderni per PrestaShop 8/9 usano loading="lazy" nativo per le immagini sotto la piega (verifica il tuo tema e i template dei moduli); combinato con Advanced Parameters → Performance (Smart cache per CSS/JS, combinazione/minificazione tramite "Apply"), mantiene leggero il payload mobile iniziale. Il "quindi?": uno smartphone su una connessione cellulare instabile mostra qualcosa di utilizzabile nei primi due secondi, invece di una schermata vuota che il visitatore abbandona.

Il test che intercetta ciò che il ridimensionamento del browser nasconde: carica il negozio su uno smartphone reale con dati mobili, poi passa l'URL pubblico negli strumenti Google per mobile-friendly e PageSpeed. Tocchi, tocchi mancati e attese su hardware reale fanno emergere problemi che la "vista mobile" degli strumenti di sviluppo desktop non mostrerà mai.

I pattern desktop che si rompono in silenzio su smartphone

Alcuni pattern di interazione non diventano semplicemente "più piccoli" su mobile: smettono di funzionare. Sapere quali sono ti permette di sostituirli in modo intenzionale, invece di pubblicare un layout desktop che fallisce in silenzio sotto il pollice.

Ognuna di queste sostituzioni ha una guida completa in questo cluster — questo articolo è la mappa, non il paragrafo frettoloso:

• Il menu. Un mega menu basato sull'hover deve diventare comodo da toccare senza seppellire le categorie. Come crearne uno che converte su entrambi: navigazione mega menu PrestaShop che converte, con l'angolo dell'esperienza di navigazione in mega menu per PrestaShop.
• I filtri. Su smartphone, un catalogo ampio vive o muore con un pannello filtri richiudibile. La trattazione completa su come aiutare i clienti a restringere la scelta: rivoluzione dei filtri per grandi cataloghi.
• La ricerca. Quando digitare costa fatica (su una tastiera mobile succede sempre), la ricerca deve essere veloce e tollerante. Perché quella predefinita non basta e cosa fare: ricerca intelligente per PrestaShop.
• Le pagine categoria. Layout, ordinamento e quanti prodotti per riga prima che uno smartphone faccia rinunciare l'utente: pagine categoria che convertono.
• I popup. Il pattern mobile che si rompe più spesso. Configurali nel modo giusto (e rendili chiudibili) qui: popup PrestaShop che convertono e popup di benvenuto fatti bene.

La homepage su smartphone ha circa tre secondi e una schermata

Su desktop la homepage può contenere, già nel primo scroll, un hero, una griglia di categorie, prodotti in evidenza, un blocco newsletter e una riga di elementi rassicuranti. Su smartphone, il visitatore vede più o meno una schermata e decide in pochi secondi se il negozio merita lo sforzo. Il compito della homepage mobile è una selezione brutale: aprire con l'unico elemento che fa capire a uno sconosciuto di essere nel posto giusto, offrire un percorso chiaro verso il catalogo in un tocco e rimandare tutto il resto. Il principio più ampio — cosa deve stare above the fold e cosa si guadagna il posto più in basso — è spiegato in design della homepage per PrestaShop.

Una nota specifica per il mobile sui titoli: lo schermo di uno smartphone rende un H1 di categoria vago particolarmente costoso, perché spesso è l'unico contesto visibile above the fold. Un titolo che comunica meglio del semplice nome della categoria ha un peso reale sugli schermi piccoli — il ragionamento è in H1 personalizzato per categorie.

Dove muoiono davvero le sessioni mobile: attrito nella navigazione e checkout

Due fasi causano la maggior parte del divario tra traffico mobile e ricavi, ed entrambe sono abbastanza specifiche di PrestaShop da meritare attenzione.

Trovare il prodotto. Un acquirente desktop tollera tre livelli di categorie; un acquirente mobile sull'autobus no. La combinazione che funziona su smartphone è un albero categorie pulito, una casella di ricerca veloce e tollerante e un pannello filtri apribile con un tocco: il livello di scoperta, non quello di acquisto. Se il problema è l'architettura informativa in sé, parti dalla struttura: struttura delle categorie PrestaShop e navigazione ottimizzata per la SEO.

Pagare. Il checkout predefinito di PrestaShop (il controller order e la sua sequenza a passaggi CheckoutPersonalInformationStep → CheckoutAddressesStep → CheckoutDeliveryStep → CheckoutPaymentStep) non è stato progettato partendo dal pollice. Su mobile, tre elementi spostano di più l'ago della bilancia: il tipo di input corretto per ogni campo (così lo smartphone mostra un tastierino numerico per CAP e telefono, una tastiera email per l'indirizzo email — tutto guidato dall'attributo type del campo), il checkout come ospite impostato come scelta predefinita invece dell'account obbligatorio e i pagamenti wallet (Apple Pay / Google Pay), così un cliente di ritorno autorizza con l'impronta invece di digitare una carta a 16 cifre sul vetro. Il checkout è un tema profondo a sé e qui non lo scorciamo: le tattiche specifiche per il mobile vivono nel nostro cluster dedicato al checkout, non in questa panoramica UX.

Il punto sul tipo di input merita un esempio concreto perché è gratis e la maggior parte dei temi lo sbaglia. La tastiera che compare sullo smartphone è guidata dagli attributi type e inputmode del campo — abbinali correttamente e il cliente inserirà CAP o numero di telefono senza cercare la riga dei numeri:

<!-- email keyboard: shows @ and . keys -->
<input type="email" name="email" autocomplete="email">

<!-- numeric pad for phone -->
<input type="tel" name="phone" autocomplete="tel">

<!-- digits for postcode without forcing type=number's spinners -->
<input type="text" name="postcode"
       inputmode="numeric" autocomplete="postal-code">

Usa inputmode="numeric" invece di type="number" per i CAP: type="number" aggiunge frecce spinner e rifiuta gli zeri iniziali e i codici non numerici usati in alcuni Paesi. I token autocomplete permettono allo smartphone di proporre valori salvati, togliendo altri tocchi dal modulo.

Funzionalità mobile da aggiungere (e quelle da eliminare)

Alcune cose hanno senso solo quando accetti che lo smartphone sia il canale principale:

• Click-to-call. Un link tel: nell'header trasforma un acquirente mobile indeciso in una telefonata — un canale ad alta intenzione che il desktop semplicemente non può offrire.
• Prodotti visualizzati di recente. Le sessioni mobile vengono interrotte: una notifica, una fermata, una chiamata. PrestaShop include il blocco ps_viewedproduct; mostrarlo in homepage e nelle pagine prodotto permette a un visitatore di ritorno di riprendere senza navigare di nuovo un menu che lo aveva già irritato una volta.
• Aggiungi al carrello sticky. In una lunga pagina prodotto mobile, una barra che mantiene il pulsante aggiungi al carrello nella zona del pollice mentre il visitatore scorre elimina del tutto l'attrito del "devo tornare in alto per comprare".
• Elimina: tooltip dipendenti dall'hover, media in autoplay che consumano dati mobili e qualunque popup il cui unico controllo di chiusura sia una "x" da 16px nell'angolo.

Se pubblichi contenuti per attirare visitatori mobile dalla ricerca, fallo dentro PrestaShop invece di aggiungere un'installazione WordPress separata che frammenta la tua esperienza mobile e il tuo dominio — il perché è spiegato in modulo blog per PrestaShop.

Come capire se l'ottimizzazione mobile ha funzionato davvero

Non fidarti di un redesign che "sembra più veloce". Prima di cambiare qualsiasi cosa, registra quattro numeri dal tuo pannello Stats e dagli analytics, segmentati per dispositivo: tasso di conversione mobile, frequenza di rimbalzo/uscita mobile su pagine categoria e prodotto, tasso di completamento checkout da mobile e tempo di caricamento delle pagine da mobile. Dopo il lavoro, confronta gli stessi quattro dati su almeno 30 giorni e qualche centinaio di sessioni mobile: abbastanza volume da distinguere una tendenza reale dal rumore settimana per settimana. L'obiettivo onesto non è "il mobile batte il desktop nelle conversioni" (succede raramente, per la natura del mezzo); è ridurre il divario tra la quota di traffico mobile e la quota di ricavi mobile. Quel delta è il denaro che l'approccio desktop-first ha lasciato sul tavolo.

Domande frequenti

Il mio tema è già responsive — non basta per il mobile? Responsive è il punto di partenza, non il traguardo. Garantisce che nulla finisca fuori schermo, ma non che le aree toccabili siano abbastanza grandi, che compaia la tastiera giusta o che il blocco più importante sia above the fold su un viewport da 390px. Testa su uno smartphone reale con dati mobili, non nella "vista mobile" di un browser desktop: tocchi e attese su hardware reale fanno emergere problemi che il ridimensionamento nasconde.

Che cosa significa "mobile-first indexing" per il mio negozio? Google scansiona, valuta e posiziona la versione mobile del tuo negozio. Se le pagine mobile nascondono contenuti dietro schede che non vengono renderizzate nel DOM, sono più lente o perdono dati strutturati inclusi nel layout desktop, sarà quella la versione giudicata — la cura del desktop non ti salva più. Una "modifica per smartphone" come comprimere una descrizione in un accordion è anche una decisione di posizionamento.

Come smetto di inviare agli smartphone immagini pesanti come sul desktop? In Design → Image Settings, controlla che i tipi di immagine con nome (home_default, large_default, cart_default) non siano gonfiati e assicurati che il tema li produca nel markup srcset/picture, così uno smartphone scarica un'immagine adatta al telefono. Se correggi le dimensioni, clicca su Regenerate thumbnails: non dare la colpa a un "hosting lento" per immagini che stai inviando sovradimensionate.

Quali pattern desktop si rompono davvero su smartphone? Mega menu che si aprono al passaggio del mouse (i touchscreen non hanno hover — il primo tocco attiva il link), barre laterali filtri ampie (occupano il viewport), pagine prodotto con tutto insieme (scroll infinito, tabelle specifiche che traboccano), popup minuscoli da chiudere (pulsanti di chiusura più piccoli del pollice) e navigazione in alto a sinistra (fuori portata del pollice). Ognuno richiede un'alternativa nativa mobile, non un semplice rimpicciolimento.

Come capisco se il lavoro sul mobile ha davvero ripagato? Prima di cambiare qualsiasi cosa, registra quattro numeri segmentati per dispositivo: tasso di conversione mobile, rimbalzi/uscite mobile su pagine categoria e prodotto, tasso di completamento checkout da mobile e tempo di caricamento mobile. Confronta gli stessi quattro dati su almeno 30 giorni e qualche centinaio di sessioni mobile. L'obiettivo onesto non è battere la conversione desktop: è ridurre il divario tra quota di traffico mobile e quota di ricavi mobile.

Il filo conduttore dell'intero cluster: lo smartphone non è più uno schermo da accomodare, è il negozio canonico che Google indicizza e su cui la maggior parte dei clienti acquista. Sistema bene il livello di scoperta sotto il pollice — menu, ricerca, filtri, pagine categoria — rendi il checkout comodo da usare con il pollice e lascia che l'esperienza desktop erediti la cura, non il contrario. Ogni guida linkata sopra è un pezzo di questa superficie; questa è la mappa che ti dice quale pezzo sta perdendo.