ℹ️ 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.

Hoppy Appointments ti dà due modi per visualizzare il calendario di prenotazione sul tuo negozio:

1. Pulsante automatico Prenota ora — sostituisce il pulsante Aggiungi al carrello sulle pagine dei prodotti collegate ai tuoi servizi.
2. Blocco del calendario di nomina manuale — inserire una carta di prenotazione o un calendario in linea in qualsiasi pagina utilizzando Shopify’ l’editor tema.

Questa guida ti accompagna attraverso entrambi i metodi in modo che i clienti possano iniziare a prenotare direttamente dal tuo negozio.

⚠️ Prima di iniziare

Prima di incorporare il calendario, assicurarsi di avere:

• The Hoppy Appointments app installata sulla tua Shopify negozio
• Almeno un servizio creato e collegato a un Shopify prodotto
• Una chiara idea di se si desidera un calendario popup o un calendario in linea sulla pagina

Se non hai ancora creato un servizio, inizia con Come impostare i servizi di prenotazione di nomina Prima.

🛠️ Fase 1 — Abilitare l'app Prenotazione App Embed

L'app embed è l'interruttore principale che fa funzionare il widget di prenotazione. Deve essere abilitato sia per l'integrazione automatica che manuale.

Opzione A: Attiva dall'interno dell'app

1. Aprire Hoppy Appointments app
2. Nel cruscotto, Trova il Stato dell'app carta
3. Fare clic Attivare

Questo apre il Shopify editor tema direttamente alla sezione app embed.

Opzione B: Abilitare manualmente da Shopify Amministrazioni

1. Vai a Shopify Admin → Online Store → Temi
2. Fare clic Personalizzarsi sul tema live
3. Fare clic su App incorporato icona in alto
4. Trova Appuntamento Prenotazioni
5. Toggle it ON
6. Fare clic Salva

Una volta abilitato, il Stato dell'app scheda dentro Hoppy Appointments spettacoli Attivo.

🛠️ Passo 2 — Assicurarsi che il vostro servizio è attivo e salvato

Il widget di prenotazione appare solo per i servizi che vengono salvati e attivati.

1. Nell'app, vai a I miei servizi
2. Controlla il badge vicino al tuo servizio:
3. • Attivo ✅ — il servizio è vivo
   • Inattivo — aprire il Altro menu e click Accensione
   • Archivio — aprire il Altro menu e click Unarchive, poi accendere
3. Aprire il servizio e fare clic Salva

Risparmiare il vostro servizio con il negozio. Questo è importante dopo aver cambiato varianti di prodotto, prezzi o disponibilità.

🛠️ Passo 3 — Controlla il pulsante Prenota ora sulla tua pagina di prodotto

Una volta che l'app incorporata è attiva e il servizio viene salvato, la pagina del prodotto collegata al tuo servizio mostra automaticamente una Prenota ora pulsante invece di Aggiungi al carrello.

1. Apri il tuo negozio dal vivo
2. Vai al prodotto collegato al tuo servizio
3. Confermare Prenota ora pulsante appare
4. Fare clic su di esso per aprire il popup di prenotazione

Se il prodotto ha più varianti, passare tra loro. Il pulsante Book Now appare solo per le varianti che fanno parte del servizio.

💡 Il selettore di quantità è disabilitato per i prodotti prenotabili perché ogni prenotazione è per una slot alla volta.

🛠️ Passo 4 — Aggiungi il blocco del calendario di nomina manualmente (opzionale)

Utilizzare questo metodo se:

• Il tuo tema utilizza un costruttore di pagine o un modulo di prodotto personalizzato
• Vuoi il calendario su una pagina che non è una pagina di prodotto
• Vuoi una carta di prenotazione in stile con dettagli di servizio
• Si desidera che il calendario completo incorporato direttamente sulla pagina

Aggiungere il blocco

1. Vai a Shopify Admin → Online Store → Temi
2. Fare clic Personalizzarsi sul tema live
3. Navigare alla pagina in cui si desidera il calendario
4. Fare clic Aggiungi blocco o Aggiungi sezione
5. Trova Apps → Calendario di Appuntamento
6. Incolla il tuo ID servizio
7. Scegli una Modalità incorporata

Trova il tuo ID Servizio

• Aprire la pagina di modifica del servizio — l'ID del servizio è mostrato vicino all'inizio
• O vai I miei servizi → Più → Copy Service ID

Scegliere una modalità incorporata

• Modal — mostra una carta di prenotazione con l'immagine di servizio, titolo, descrizione, prezzo e Prenota ora pulsante che apre il calendario in un popup
• Direct — incorpora il calendario di prenotazione completo direttamente sulla pagina in modo che i clienti possono scegliere date e orari senza aprire un popup

Configurare lo stile di base

Il blocco ti permette di personalizzare:

• Colore dello sfondo
• Titolo colore e dimensione del carattere
• Colore del prezzo e dimensione del carattere
• Opzione etichetta colore e dimensione del carattere
• Prenota ora pulsante colore, sfondo e dimensione del carattere
• Dettagli link colore, sfondo, dimensione del carattere e visibilità

Per opzioni di styling più profonde, vedere Prenotazioni di nomina — Design & Styling Opzioni.

Salvare il tema

Fare clic Salva nell'editor tema, quindi visualizzare la pagina live.

⚠️ Il blocco Calendario di Appuntamento richiede ancora App prenotazioni embed da abilitare. Se non lo è, il blocco mostra un messaggio "App Embed Not Enabled".

👀 Cosa vedono i clienti

Pulsante automatico Prenota ora

1. Il cliente visita la pagina del prodotto
2. Vedono Prenota ora pulsante invece di Aggiungi al carrello
3. Si fa clic su di esso e si apre un calendario popup
4. Selezionano una data, un'ora e compilano il modulo di prenotazione
5. Se il pagamento è abilitato, il prodotto è aggiunto al carrello e controllano
6. Se il pagamento non è abilitato, la prenotazione viene confermata immediatamente

Blocco manuale Modal

1. Il cliente visita la pagina in cui è stato inserito il blocco
2. Vedono una carta con dettagli di servizio, prezzo e opzioni di variante o durata
3. Loro cliccano Prenota ora per aprire il calendario popup
4. Completano il flusso di prenotazione

Blocco manuale diretto

1. Il cliente visita la pagina in cui è stato inserito il blocco
2. Il calendario completo si carica in linea mentre scorre in vista
3. Selezionano una data e l'ora direttamente sulla pagina
4. Completano il modulo di prenotazione e il checkout

⚠️ Note importanti

• App incorporato è necessario per entrambi i metodi. Anche se si utilizza il blocco manuale, l'app Appointment Bookings embed deve essere attivata.
• Usa il tuo tema live, pubblicato. Il calendario non apparirà su temi redatti o inediti.
• Un servizio attivo per variante di prodotto. Se una variante è collegata a più di un servizio attivo, il comportamento può essere imprevedibile.
• Salva dopo ogni cambiamento. Varianti di prodotto, prezzi, disponibilità e impostazioni di servizio raggiungono solo il negozio dopo aver fatto clic su Salva.
• Il pulsante Book Now nasconde i pulsanti originali Add to Cart e dynamic checkout solo per varianti prenotabili. Altri prodotti rimangono invariati.
• Quantità selettori disabilitati per i prodotti prenotabili perché le prenotazioni sono acquisti single-slot.

🐞 Risoluzione dei problemi

Il pulsante Prenota ora non appare

• Confermare Stato dell'app spettacoli Attivo
• Assicurarsi che il servizio sia salvato e attivo
• Controllare che si sta visualizzando la pagina del prodotto corretta e variante
• Assicurarsi che si sta testando sul tema live, non un progetto
• Difficile aggiornare la pagina o il test in una finestra Incognito

Il blocco manuale mostra "App Embed Not Enabled"

Torna al Passo 1 e abilita l'app Prenotazione embed.

Il blocco manuale mostra "Configurazione del servizio di Appuntamento non trovata"

Controllare il ID servizio Hai incollato. Puoi copiarlo di nuovo da I miei servizi → Più → Copy Service ID.

Il calendario si apre ma non sono disponibili date

Controlla il tuo servizio Disponibilità scheda. Assicurarsi che i giorni di lavoro sono abilitati, guarda-ahead e minimo preavviso di programmazione sono ragionevoli, e le date bloccate non stanno coprendo tutto.

Per una passeggiata completa di risoluzione dei problemi, vedere Calendario di prenotazione non mostra sul mio negozio [Fixed].

🎉 Risultato finale

Una volta configurato:

✅ L'app per le prenotazioni di App embed è abilitata nel tuo tema
✅ Il servizio viene salvato, attivo e connesso al prodotto giusto
✅ The Prenota ora pulsante appare automaticamente nella pagina del prodotto
✅ Opzionalmente, un blocco Calendario di Appuntamento è posizionato su qualsiasi pagina che si sceglie
✅ I clienti possono prenotare direttamente dal tuo negozio

📚 Articoli correlati

• Come impostare i servizi di prenotazione di nomina
• Calendario di prenotazione non mostra sul mio negozio [Fixed]
• Prenotazioni di nomina — Design & Styling Opzioni
• Come impostare CSS personalizzato per le prenotazioni di nomina App
• Come impostare il pulsante di azione galleggiante come Calendly per le prenotazioni di nomina
• Prenotazioni di nomina — Tutte le opzioni di pagamento Spiegato
• Prenotazioni di nomina — Tipi di prenotazioni spiegate

Aggiornato il: 10/09/2026