Codice del pulsante WhatsApp per i temi Shopify

Perché la stessa risposta vale per Dawn, Sense, Refresh, Craft, Studio e Ride

I temi gratuiti di Shopify sono tutti costruiti sull'architettura Online Store 2.0. Condividono un unico file di layout, theme.liquid, che avvolge ogni pagina, e supportano tutti gli incorporamenti app (app embeds), il meccanismo che permette a un'app di aggiungere un elemento flottante senza toccare il tuo codice. Sense, Refresh, Craft, Studio e Ride sono varianti del codice di Dawn, quindi un pulsante che funziona su Dawn funziona anche su di loro.

Hai quindi due strade. La strada A usa un incorporamento app e non richiede codice. La strada B è uno snippet che incolli una volta in theme.liquid, oppure in una sezione Liquid personalizzato se lo vuoi solo su alcuni modelli. Entrambe aprono lo stesso link di chat wa.me; la differenza è in quello che succede intorno.

• Centro assistenza Shopify: estendere il tema con le app (incorporamenti app)
• shopify.dev: layout del tema e theme.liquid

Strada A: senza codice, con un incorporamento app

È la strada che consigliamo alla maggior parte dei negozi, ed è quella spiegata passo per passo nella nostra guida al tema Dawn. Installa WhatsApp Pilot, salva prefisso internazionale e numero in Impostazioni, poi apri Negozio online → Temi → Personalizza, clicca l'icona Incorporamenti app e attiva WhatsApp Pilot. Salva, e il pulsante è online. Il piano Free lo mostra nella home page; Pro lo mostra anche nelle pagine prodotto, collezione, carrello e nelle altre pagine, con la visibilità per dispositivo e il messaggio di saluto.

I passaggi sono identici su Sense, Refresh, Craft, Studio e Ride, perché il pannello Incorporamenti app appartiene all'editor del tema, non a un tema in particolare. Se più avanti cambi tema, riattiva l'incorporamento sul nuovo tema; le impostazioni nell'app restano come sono.

Strada B: lo snippet da copiare e incollare

Prima di iniziare, duplica il tema da Negozio online → Temi così hai una copia di backup, come consiglia la guida di Shopify alla modifica del codice del tema. Poi apri l'editor del codice (menu con i tre puntini → Modifica codice), trova layout/theme.liquid e scorri fino al tag di chiusura body in fondo. Incolla le righe qui sotto subito sopra, sostituisci il numero di esempio con il tuo in formato internazionale (prima il prefisso del paese, senza segno più, senza spazi) e salva.

Ogni riga è corta perché si incolli senza problemi. I valori degli attributi usano di proposito le virgolette singole; Liquid e HTML le accettano.

1. <a class='wa-float' href='https://wa.me/393401234567?text=Ciao%2C%20ho%20una%20domanda%20sul%20vostro%20negozio' target='_blank' rel='noopener'>Scrivi su WhatsApp</a>
2. <style>
3. .wa-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
4. .wa-float { background: #25D366; color: #fff; font: 600 15px/1 sans-serif; }
5. .wa-float { padding: 14px 18px; border-radius: 999px; text-decoration: none; }
6. .wa-float { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
7. .wa-float:hover { background: #1ebe5d; color: #fff; }
8. html[dir='rtl'] .wa-float { right: auto; left: 20px; }
9. @media (max-width: 749px) { .wa-float { bottom: 76px; right: 12px; } }
10. @media (max-width: 749px) { html[dir='rtl'] .wa-float { right: auto; left: 12px; } }
11. </style>

• Centro assistenza Shopify: modificare il codice del tema
• Centro assistenza WhatsApp: come usare la chat diretta (link wa.me)

Impostare numero, testo precompilato e posizione

• Numero: le cifre dopo wa.me/ sono il tuo numero WhatsApp in formato internazionale. Un cellulare italiano 340 123 4567 diventa 393401234567. Togli il segno più (o lo 00 iniziale) e gli spazi; nei paesi che usano uno zero iniziale nel numero nazionale, togli anche quello.
• Testo precompilato: tutto ciò che segue ?text= è il messaggio che il cliente vede prima di inviare. Deve essere codificato per URL: uno spazio diventa %20 e una virgola %2C. Il generatore di link gratuito su /it/tools/whatsapp-link-generator, in questo sito, crea l'intero URL per te, codifica compresa.
• Posizione: bottom e right controllano la distanza dai bordi su desktop. Se il carrello a scomparsa del tema o una barra Aggiungi al carrello fissa copre il pulsante, aumenta bottom oppure sposta il pulsante a sinistra sostituendo right con left.
• Mobile: la media query a 749px corrisponde al breakpoint usato dai temi della famiglia Dawn. Il valore bottom più alto tiene il pulsante sopra una barra fissa o la barra degli strumenti del browser sui telefoni. Regola il numero dopo averlo provato su un dispositivo reale.
• Negozi RTL: quando il tema viene mostrato con dir='rtl', le regole html[dir='rtl'] spostano il pulsante a sinistra. Se la tua vetrina in arabo non imposta quell'attributo, elimina le due righe rtl e imposta direttamente left al posto di right.
• Solo su alcune pagine: incolla lo stesso snippet in una sezione Liquid personalizzato sul modello che vuoi (per esempio il modello prodotto) invece che in theme.liquid. Comparirà solo dove esiste quella sezione.

Snippet o app: cosa rinunci con ciascuno

Note specifiche per tema

• Dawn e Craft: il carrello a scomparsa si apre da destra. Tieni il pulsante a sinistra, oppure alzalo in modo che non copra il pulsante di checkout.
• Sense e Refresh: entrambi hanno un'intestazione fissa ben visibile e, su mobile, una barra Aggiungi al carrello fissa nelle pagine prodotto. Prova una pagina prodotto su un telefono prima di decidere il valore bottom.
• Studio e Ride: le combinazioni di colori scure o ad alto contrasto possono rendere troppo vistoso il verde predefinito. Tieni il verde WhatsApp sul pulsante e, se proprio serve, cambia solo la tonalità al passaggio del mouse.
• Temi Online Store 2.0 a pagamento: lo stesso snippet funziona, ma il breakpoint mobile può essere diverso. Cerca nel CSS del tema la larghezza della sua media query e usa la stessa.
• Checkout: nessuna delle due strade può mettere un pulsante nelle pagine di checkout. Shopify non consente lì codice del tema né incorporamenti app.

Prova prima di andare avanti

1. Apri il negozio in un browser desktop e verifica che il pulsante sia dove te lo aspetti nella home page, in una pagina prodotto e nel carrello.
2. Toccalo da un telefono. WhatsApp deve aprirsi con il tuo numero e il testo precompilato; se non succede, controlla per prime le cifre dopo wa.me/.
3. Invia il messaggio di prova a te stesso e rispondi, così sai che il passaggio funziona in entrambe le direzioni.
4. Se hai usato l'app, apri Analisi dopo un giorno e controlla che i tocchi vengano contati. Lo snippet non registra nulla, ed è il motivo principale per cui i negozi che vogliono i numeri passano poi all'app.