Installare su Shopify

Aggiungi il widget di chat botts.ai al tuo negozio Shopify incollando una riga nel file theme.liquid del tuo tema, in sette passaggi.

Questa guida aggiunge a un negozio Shopify il widget di chat di un deployment botts.ai di tipo sito web. Usa l'editor di codice di Shopify: incolli lo script del widget nel file theme.liquid del tuo tema, subito prima del tag di chiusura </body>. Da quel momento il codice si carica in ogni pagina del negozio. Appartiene a quel tema: se in seguito pubblichi un altro tema, devi aggiungerlo di nuovo lì.

Prima di iniziare

Ti servono:

• Accesso al pannello di controllo Shopify. Gli account dello staff hanno bisogno delle autorizzazioni Temi e Modifica codice della sezione Negozio online.
• Un piano Shopify con il negozio online completo: Basic, Grow, Advanced o Plus. Con il piano Starter, Shopify offre solo il tema Spotlight, senza altre opzioni di personalizzazione.
• Un tema di cui puoi modificare il codice. I temi gratuiti dello Shopify Theme Store vanno bene. Un tema a pagamento che stai solo provando non si può modificare finché non lo acquisti.
• Il codice di incorporamento del tuo deployment sito web. In botts.ai apri Agenti, scegli il tuo agente, passa alla scheda Implementa e apri il deployment Sito Web. La sezione Installazione in fondo all'editor mostra il codice con un pulsante per copiarlo. Non hai ancora un deployment sito web? Vedi Deployment.

Il codice di incorporamento è fatto così, con la chiave del tuo deployment al posto di YOUR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=YOUR_API_KEY"></script>

Passaggio 1: Apri i temi

Accedi al pannello di controllo Shopify. Nella barra laterale a sinistra, in Canali di vendita, clicca su Negozio online. Il tema pubblicato, cioè quello che il tuo negozio usa in questo momento, compare in cima alla pagina come una grande anteprima. Il suo pulsante ⋯ si trova in basso a destra nell'anteprima, accanto al pulsante per modificare il tema.

Passaggio 2: Crea una copia di backup

Shopify consiglia di duplicare il tema prima di modificarne il codice. Accanto al tema pubblicato, clicca sul pulsante ⋯ e poi su Duplica. La copia compare nella stessa pagina e resta non pubblicata. Se qualcosa va storto, puoi tornare a quella.

Passaggio 3: Apri l'editor di codice

Clicca di nuovo su ⋯ accanto al tema pubblicato e scegli Modifica codice. Controlla che sia il tema pubblicato e non la copia. L'editor di codice si apre in una nuova scheda del browser.

Passaggio 4: Apri theme.liquid

Nell'elenco dei file a sinistra, apri la cartella layout e clicca su theme.liquid. In alternativa premi ⌘ + P (Mac) o Ctrl + P (Windows) e digita theme.liquid.

Passaggio 5: Incolla il codice prima del tag di chiusura body

Scorri fino alla fine del file, oppure premi ⌘ + F (Mac) o Ctrl + F (Windows) e cerca </body>. Clicca all'inizio di quella riga, premi Invio per creare una riga vuota sopra e incolla lì il codice di incorporamento. Incolla il codice esattamente come l'hai copiato: l'indirizzo e la chiave non devono cambiare. Lascia il resto del file com'è.

L'editor potrebbe sottolineare una parte della riga e mostrare un avviso secondo cui la risorsa dovrebbe essere servita dalla CDN di Shopify. Puoi ignorarlo: il widget deve caricarsi da botts.ai e il file si salva normalmente.

Passaggio 6: Salva il file

Clicca su Salva in alto a destra nell'editor, oppure premi ⌘ + S (Mac) o Ctrl + S (Windows). Così il codice è attivo nel tema pubblicato.

Passaggio 7: Controlla il widget nel negozio

Apri il tuo negozio in una finestra privata, ricarica la pagina e attendi un momento. Il pulsante della chat compare in basso a destra, o dove l'hai posizionato nell'editor del widget. Aprilo e invia una domanda di prova. Controlla anche una pagina prodotto e la visualizzazione sullo smartphone.

Se il negozio è ancora protetto da password, inserisci prima la password del negozio. Nella pagina della password il widget non compare. Anche le pagine del check-out non usano theme.liquid, quindi durante il check-out il widget non compare.

Se cambi o aggiorni il tema

Il codice si trova nel tema in cui l'hai incollato. Se pubblichi un altro tema, ripeti i passaggi da 3 a 6 in quel tema.

Quando è disponibile un aggiornamento del tema, Shopify mostra una notifica al posto del numero di versione del tema. Se clicchi sulla notifica e poi su Aggiungi alle bozze dei temi, l'aggiornamento compare tra le bozze come nuovo tema, con il nome Copia aggiornata di seguito dal nome del tuo tema. Shopify prova a riportare le tue modifiche al codice e mostra il risultato sulla scheda del tema:

• Tema aggiunto: modifiche al codice incluse correttamente: il codice del widget è stato ripreso. Per sicurezza controlla theme.liquid nella nuova copia.
• Tema aggiunto: impossibile includere le modifiche al codice: ripeti i passaggi da 3 a 6 nella copia aggiornata prima di pubblicarla.

Se il widget non compare

1. Controlla di aver modificato il tema pubblicato e non la copia di backup o un'altra bozza.
2. Controlla che il codice completo sia in theme.liquid, subito prima di </body>, e che tu abbia salvato. Finché ci sono modifiche non salvate, la scheda mostra un punto. Un numero accanto conta solo gli avvisi dell'editor.
3. Se di recente hai pubblicato un nuovo tema o una copia aggiornata, controlla che anche il suo theme.liquid contenga il codice.
4. Prova in una finestra privata senza ad blocker. Se il banner dei cookie o l'app di consenso blocca gli script, controllane la configurazione.
5. Controlla che la chiave appartenga al deployment giusto e che il deployment sia attivo nella scheda Implementa.

Modificare o rimuovere il widget

Colori, testi, il launcher e tutte le altre impostazioni del widget si modificano nell'editor di botts.ai. Il tuo negozio le riprende senza nessuna modifica in Shopify. Devi sostituire il codice solo se cambia la chiave del deployment.

Per rimuovere il widget, apri di nuovo theme.liquid, cancella solo la riga dello script botts.ai e salva.

Altro aiuto

• Centro assistenza Shopify: Modifica del codice del tema
• Centro assistenza Shopify: Duplicazione dei temi
• Centro assistenza Shopify: Aggiornamento dei temi
• I passaggi generali per qualsiasi sito: Codice di incorporamento

Ultimo aggiornamento: 4 ottobre 2026