ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

Vuoi che i clienti siano in grado di prenotare da qualsiasi punto del tuo negozio - non solo la pagina del prodotto? Un pulsante di azione galleggiante funziona come il widget di Calendly: un piccolo pulsante "Book Now" rimane fisso nell'angolo di ogni pagina, pronto ad aprire il modal di prenotazione con un clic.

Hoppy Appointments consente di aggiungere questo pulsante per servizio, personalizzare il testo e i colori, e scegliere dove appare sullo schermo.

Questa guida ti guida attraverso la creazione.

⚠️ Prima di iniziare

Prima di impostare il pulsante di azione galleggiante, assicurarsi di avere:

• The Hoppy Appointments app installata sulla tua Shopify negozio
• Almeno un servizio attivo già creato
• The Hoppy Appointments App embed abilitato nel tuo tema

💡 Il pulsante galleggiante appare solo sulle pagine in cui l'app incorporata è attiva. Se non hai ancora abilitato l'incorporato, vai a Shopify Admin → Online Store → Temi → Personalizza → App Embeds e accendere Hoppy Appointments Embed.

🛠️ Passo 1 — Aprire la scheda generale del Servizio

Il pulsante di azione galleggiante è configurato per servizio, all'interno Generale scheda — non la scheda Design.

1. Aprire Hoppy Appointments app
2. Vai a Servizi
3. Fare clic sul servizio che si desidera aggiungere il pulsante per
4. Fare clic su Generale scheda
5. Scroll down to the Pulsante d'azione galleggiante carta

🛠️ Passo 2 — Abilitare il pulsante di azione galleggiante

All'interno Pulsante d'azione galleggiante carta:

1. Accendere il Abilita pulsante galleggiante Toggle

Una volta abilitato, i campi di configurazione appaiono sotto il toggle.

🛠️ Passo 3 — Configurare il pulsante

Impostare il pulsante per abbinare lo stile del tuo negozio e il flusso di prenotazione.

Testo del pulsante

Immettere i clienti dell'etichetta vedrà sul pulsante. Il testo predefinito è Prenota ora, ma è possibile utilizzare tutto ciò che si adatta al vostro marchio — per esempio:

• Prenota una chiamata
• Nomina di programma
• Prenota uno Spot

Posizione

Scegliere dove appare il pulsante sullo schermo:

• In basso a destra — appare nell'angolo in basso a destra
• In basso a sinistra — appare nell'angolo inferiore sinistro
• Centro di fondo — appare incentrata sul fondo

Colore dello sfondo

Scegli il colore di sfondo pulsante. Il default è nero.

Colore del testo

Scegli il colore dell'etichetta del pulsante. Il default è bianco.

💡 Scegli colori con forte contrasto in modo che il pulsante è facile da leggere sul tuo sfondo negozio.

💾 Passo 4 — Salva e anteprima

1. Fare clic Salva in cima alla pagina del servizio
2. Attendere il messaggio di conferma
3. Visita il tuo negozio e controlla diverse pagine — casa, prodotto, collezione, carrello, ecc.

Il pulsante deve rimanere fisso nell'angolo scelto e aprire la modalità di prenotazione quando cliccato.

⚠️ Note importanti

• Impostazione per servizio — ogni servizio ha un proprio pulsante galleggiante. Configurarlo separatamente per ogni servizio che si desidera visualizzare.
• Appare su tutte le pagine — una volta abilitato, il pulsante mostra in ogni pagina dove Hoppy Appointments app embed è attiva. Non ci sono regole di visibilità specifiche della pagina.
• Servizi multipli = pulsanti multipli — se si attiva il pulsante galleggiante per diversi servizi, ognuno rendera' il proprio pulsante. Per un'esperienza più pulita, abilitarlo solo sul servizio che si desidera promuovere di più.
• Apre la modalità di prenotazione — fare clic sul pulsante apre il flusso di prenotazione per quel servizio direttamente, senza lasciare la pagina corrente.
• Le traduzioni richiedono una configurazione avanzata — se si desidera che il testo del pulsante cambi per lingua, abilitare Utilizzare la configurazione avanzata sul servizio e impostare la traduzione sotto Impostazioni → Traduzioni → Traduzioni di servizio. Vedere la guida di traduzione per i dettagli.

🐞 Risoluzione dei problemi

Il pulsante non mostra sul mio negozio

1. Assicurarsi di Abilita pulsante galleggiante è acceso per il servizio
2. Assicurarsi di aver cliccato Salva
3. Confermare Hoppy Appointments app embed è abilitato nel tuo tema
4. Cancella la tua cache del browser o prova in una finestra incognito
5. Controllare che il servizio sia attivo e collegato correttamente a un prodotto

Il testo del pulsante è sbagliato o non tradotto

• Se Utilizzare la configurazione avanzata è spento, il pulsante utilizza il testo dal Testo del pulsante campo direttamente.
• Se Utilizzare la configurazione avanzata è acceso, il testo del pulsante viene estratto da Impostazioni → Traduzioni → Traduzioni di servizio →.

Il colore del pulsante non sembra giusto

Utilizzare i raccoglitori di colore nella scheda FAB per lo styling di base. Per cambiamenti visivi più avanzati, è possibile indirizzare il .futureblink-fab classe con CSS personalizzata. Vedere la guida CSS personalizzata per i dettagli.

🎉 Risultato finale

Una volta configurato:

✅ Un pulsante "Book Now" galleggiante appare in ogni pagina del tuo negozio
✅ I clienti possono iniziare a prenotare da qualsiasi luogo senza navigare in una pagina del prodotto
✅ Il pulsante apre istantaneamente la modalità di prenotazione del tuo servizio
✅ Il testo, la posizione e i colori corrispondono al tuo marchio

📚 Articoli correlati

• Prenotazioni di nomina — Design & Styling Opzioni
• Come impostare CSS personalizzato per le prenotazioni di nomina App
• Prenotazioni di nomina — Traduzione
• Come impostare i servizi di prenotazione di nomina

Aggiornato il: 10/09/2026