ℹ️ 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 include un sistema di design completo, in modo che il widget di prenotazione, le pagine di conferma, la pagina di modifica e la pagina di annullamento si integrino perfettamente nel tuo store.

Puoi controllare colori, caratteri, pulsanti, sfondi e persino caricare immagini personalizzate. Tutto è gestito in due posti:

• Settings → Design (Impostazioni → Design) → valori predefiniti dello shop che si applicano a ogni servizio
• Service → Design tab (Scheda Design del servizio) → override per servizio quando vuoi che un servizio abbia un aspetto diverso

Questa guida spiega ogni impostazione di design, quando appare e come influisce sulla vetrina.

⚠️ Before You Begin

Le impostazioni di design si gestiscono da:

• Hoppy Appointments → Settings → Default Design (Hoppy Appointments → Impostazioni → Design predefinito) per i valori predefiniti globali
• Hoppy Appointments → Services → [your service] → Design (Hoppy Appointments → Servizi → [il tuo servizio] → Design) per gli override per servizio

Prima di personalizzare lo stile del widget, assicurati che:

• L'app Hoppy Appointments sia installata
• Tu abbia creato almeno un servizio
• L'app embed Appointment Bookings sia abilitata nel tuo tema Shopify

ℹ️ Senza l'app embed abilitato, i clienti non vedranno affatto il widget di prenotazione — indipendentemente da quanto siano belle le tue impostazioni di design.

Consulta la guida di risoluzione dei problemi Calendar Not Showing (Calendario non visualizzato) se hai bisogno di aiuto per abilitare l'embed.

🌐 Global vs Per-Service Design

Global Design (Settings → Design)

Questo è il tuo design predefinito dello shop. Ogni nuovo servizio utilizza automaticamente questi colori, caratteri e stili a meno che non gli indichi diversamente.

Usalo quando vuoi un aspetto coerente in tutti i tuoi servizi prenotabili.

Per-Service Design (Service → Design tab)

Ogni servizio ha una casella di controllo con l'etichetta:

Do not Follow Default Theme Settings (Non seguire le impostazioni del tema predefinito)

• Unchecked (Deselezionata) → Il servizio utilizza il design globale. Tutti i campi colore/carattere sono nascosti per mantenere le cose semplici.
• Checked (Selezionata) → Appare l'editor di design completo e questo servizio utilizza il proprio stile anziché le impostazioni predefinite globali.

💡 Usa il design per servizio quando un servizio deve avere un aspetto diverso — ad esempio, una consulenza premium con un tema più scuro o una lezione a tema natalizio.

What Is Controlled Where

La maggior parte delle impostazioni di design esistono sia a livello globale che per servizio, ma alcune sono solo per servizio:

🎨 The Design Tabs

L'editor di design è organizzato in schede. Ogni scheda controlla una schermata diversa che i clienti vedono.

📅 Booking Page

Questa scheda controlla il widget di prenotazione principale — il calendario, gli slot orari, il modulo e i pulsanti di navigazione.

Font

Scegli la famiglia di caratteri utilizzata in tutto il widget. L'app supporta decine di Google Fonts più i caratteri di sistema più comuni.

• System fonts (Caratteri di sistema, come Arial o Helvetica) si caricano istantaneamente dal dispositivo del cliente
• Google Fonts vengono caricati automaticamente quando selezionati

Se un carattere non può essere caricato, il widget torna a un carattere predefinito sicuro.

Background Colors

• Outer background color (Colore di sfondo esterno) → L'area dietro il widget di prenotazione
• Info section background color (Colore di sfondo della sezione informazioni) → Il pannello sinistro che mostra l'immagine, il titolo e il prezzo del servizio
• Card background color (Colore di sfondo della card) → La card principale che contiene il calendario e il modulo

Questi tre livelli ti permettono di creare profondità e separazione all'interno del widget.

Text & Icons

• Text color (Colore del testo) → Il colore predefinito per la maggior parte del testo nel widget
• Icons color (Colore delle icone) → Il colore utilizzato per le piccole icone come frecce e segni di spunta

Selected Date & Time Slot

• Selected background color (Colore di sfondo selezionato) → Il colore dietro una data o uno slot orario scelti
• Selected text color (Colore del testo selezionato) → Il colore del testo sulla data o slot orario selezionati

Questi aiutano i clienti a vedere chiaramente cosa hanno scelto.

Buttons

• Confirm button (Pulsante Conferma) → Colore di sfondo e colore del testo per l'azione principale
• Back button (Pulsante Indietro) → Colore di sfondo e colore del testo per tornare indietro di un passaggio
• Continue button (Pulsante Continua) → Colore di sfondo e colore del testo per i flussi multi-passo

Ogni pulsante può essere stilizzato in modo indipendente, così puoi rispecchiare la gerarchia dei pulsanti del tuo store.

🎉 Success Page

Questa scheda controlla la schermata che i clienti vedono dopo una prenotazione gratuita o confermata.

• Heading size / color (Dimensione / colore del titolo)
• Description size / color (Dimensione / colore della descrizione)
• Details size / color (Dimensione / colore dei dettagli) → Per il testo del riepilogo della prenotazione
• Button text size / background color / text color (Dimensione del testo del pulsante / colore di sfondo / colore del testo) → Il pulsante CTA nella schermata di conferma
• Icons color (Colore delle icone)
• Custom image (Immagine personalizzata) → Sostituisce l'illustrazione predefinita di conferma con la tua immagine

💡 Caricare un'immagine di conferma personalizzata è un bel modo per rafforzare il tuo brand o celebrare la prenotazione con una grafica amichevole.

🔄 Rescheduling Page

Questa scheda ha due sezioni interne:

• Reschedule Form (Modulo di modifica) → La schermata in cui i clienti scelgono un nuovo orario
• Success Page (Pagina di conferma) → La schermata di conferma dopo che la modifica è stata completata

Ogni sezione ha gli stessi tipi di controlli della scheda Success Page principale:

• Dimensione / colore del titolo
• Dimensione / colore del testo del messaggio
• Dimensione / colore dei dettagli
• Dimensione e colori del pulsante
• Colore delle icone
• Immagine personalizzata

❌ Cancel Page

Anche questa scheda ha due sezioni interne:

• Cancel Form (Modulo di annullamento) → La schermata in cui i clienti confermano di voler annullare
• Success Page (Pagina di conferma) → La schermata di conferma dopo che un annullamento è stato completato

Include gli stessi controlli di stile della scheda Rescheduling Page.

🖼️ Custom Logo

ℹ️ Questa impostazione è disponibile solo nella scheda Design per servizio.

Abilita Custom logo (Logo personalizzato) per sostituire l'immagine del prodotto nel widget di prenotazione con il tuo logo o immagine caricato.

• Consigliato per la coerenza del brand
• I caricamenti delle immagini sono limitati a 1 MB
• I formati accettati includono GIF, JPEG, PNG e WebP

🧑‍💻 Custom CSS

Per i merchant che vogliono un controllo preciso al pixel, sia le pagine di design globale che per servizio includono un editor Custom CSS.

• Incolla il tuo CSS nell'editor
• Clicca Apply (Applica) per attivarlo sulla vetrina
• Clicca Reset (Reimposta) per ripristinare il modello CSS predefinito e disattivare le tue modifiche

L'editor include un modello predefinito che mostra i selettori comuni che puoi targetizzare, come:

• Il contenitore esterno del widget
• La card della finestra di dialogo
• La sezione informazioni
• Date e slot orari selezionati nel calendario
• I pulsanti Confirm, Back e Continue
• Varianti specifiche per dispositivi mobili

⚠️ Importante:

• Il CSS personalizzato viene applicato solo quando clicchi Apply
• Se un servizio segue il tema predefinito, utilizza il global custom CSS
• Se un servizio utilizza il proprio design, utilizza il proprio per-service custom CSS
• L'app aggiunge automaticamente !important alle dichiarazioni CSS per aiutarle a sovrascrivere gli stili del tema

💡 Il Custom CSS è ottimo per modifiche avanzate, ma la maggior parte dei merchant può ottenere esattamente l'aspetto desiderato utilizzando solo i selettori di colore e carattere.

🔘 Floating Action Button

ℹ️ Il Floating Action Button è configurato nella scheda General (Generale) di un servizio, non nella scheda Design. È incluso qui perché ha le proprie opzioni di stile.

Abilita il Floating Action Button per mostrare un pulsante fisso Book Now che segue i clienti mentre scorrono nel tuo store.

Quando è abilitato, puoi personalizzare:

• Button text (Testo del pulsante) → Il valore predefinito è Book Now
• Position (Posizione) → In basso a destra, in basso a sinistra o in basso al centro
• Background color (Colore di sfondo)
• Text color (Colore del testo)

È utile quando vuoi che i clienti possano prenotare da qualsiasi pagina, non solo dalla pagina prodotto.

Consulta la documentazione Service Setup (Configurazione del servizio) per i dettagli completi su come abilitare e posizionare il pulsante fluttuante.

🧩 Theme Editor App Block Styling

Se aggiungi il blocco Appointment Calendar tramite l'editor del tema Shopify, ottieni ulteriori opzioni di stile indipendenti dall'amministrazione dell'app.

Queste impostazioni controllano la card o il pulsante che apre la modale di prenotazione:

• Colore / dimensione carattere del titolo
• Colore / dimensione carattere del prezzo
• Colore / dimensione carattere dell'opzione
• View details button (Pulsante Visualizza dettagli) → Mostra/nascondi, testo, colori, dimensione carattere
• Book Now button (Pulsante Book Now) → Sfondo, colore del testo, dimensione carattere
• Block background color (Colore di sfondo del blocco)

⚠️ Importante:

Queste impostazioni stilizzano solo il blocco nella pagina. La modale che si apre utilizza ancora le impostazioni di design di Settings → Design o della scheda Design del servizio.

Alcune impostazioni del blocco appaiono solo quando il blocco è impostato su Modal.

🖥️ How Styling Appears on the Storefront

Il widget di prenotazione si carica all'interno di un iframe nella vetrina. L'iframe recupera le impostazioni di design configurate e le applica a:

• Lo sfondo esterno del widget
• Gli sfondi del pannello informazioni e della card
• Tutto il testo e le icone
• Date e slot orari selezionati nel calendario
• I pulsanti Confirm, Back e Continue
• Le pagine Success, Rescheduling e Cancel
• Il posizionamento del Custom logo
• Le sovrascritture del Custom CSS

I caratteri vengono caricati dinamicamente. I Google Fonts vengono recuperati dai server di Google, mentre i caratteri di sistema vengono caricati dal dispositivo del cliente.

Se un carattere non si carica o manca un colore, il widget torna a valori predefiniti sicuri, così l'esperienza di prenotazione rimane utilizzabile.

⚠️ Important Notes & Limitations

• Il design globale è quello predefinito. I nuovi servizi seguono automaticamente il tema globale a meno che non selezioni Do not Follow Default Theme Settings.
• Il Custom CSS deve essere applicato. Scrivere CSS nell'editor non ha alcun effetto finché non clicchi Apply.
• Il CSS per servizio si applica solo quando il servizio utilizza il proprio design. Se un servizio segue il tema globale, ignora il proprio campo Custom CSS.
• Il Custom logo è solo per servizio. Non esiste un'impostazione globale di Custom logo.
• I caricamenti delle immagini sono limitati a 1 MB. Le immagini più grandi dovranno essere compresse prima del caricamento.
• Le impostazioni del blocco nell'editor del tema sono separate. Stilizzare il blocco Appointment Calendar in Shopify non modifica l'interno della modale.
• Lo sfondo del wrapper della modale è controllato dal tema. L'area dietro la modale popup è stilizzata dal CSS dell'estensione del tema, non dalle impostazioni di design dell'amministrazione dell'app.
• L'app embed deve essere abilitato. Le impostazioni di design appaiono sulla vetrina solo se l'app embed Appointment Bookings è attivata nel tuo tema.

💡 Common Use Cases

Abbina il widget al brand del tuo store

• Vai su Settings → Design (Impostazioni → Design)
• Imposta Outer background color (Colore di sfondo esterno), Card background color (Colore di sfondo della card) e Text color (Colore del testo) in modo che corrispondano al tuo store
• Scegli un carattere che corrisponda al tuo tema
• Stilizza il pulsante Confirm (Conferma) in modo che corrisponda alla tua CTA principale

Risultato: ogni servizio sembra una parte naturale del tuo store.

Un servizio con un aspetto diverso

• Apri il servizio → scheda Design
• Seleziona Do not Follow Default Theme Settings
• Modifica i colori e carica un Custom logo (Logo personalizzato)

Risultato: solo quel servizio utilizza lo stile personalizzato. Tutti gli altri servizi mantengono il design globale.

Immagine di conferma personalizzata

• Apri Settings → Design → Success Page (Impostazioni → Design → Pagina di conferma)
• Carica un'immagine personalizzata in Custom image (Immagine personalizzata)

Risultato: i clienti vedono la tua illustrazione brandizzata dopo la prenotazione invece di quella predefinita.

Modifica avanzata del layout

• Apri Settings → Design
• Espandi l'editor Custom CSS
• Aggiungi il tuo CSS e clicca Apply (Applica)

Risultato: puoi targetizzare elementi specifici del widget non coperti dai selettori di colore.

🎉 Final Result

Una volta configurate le impostazioni di design:

✅ Il widget di prenotazione corrisponde ai colori e ai caratteri del tuo store
✅ Le pagine di conferma, modifica e annullamento sono coerenti con il tuo brand
✅ Gli override per servizio permettono ai singoli servizi di distinguersi quando necessario
✅ Custom logo e immagini aggiungono un tocco personale
✅ Il Custom CSS ti dà il pieno controllo sullo stile avanzato
✅ I clienti ottengono un'esperienza di prenotazione curata e professionale 🎨

Con la giusta configurazione di design, prenotare un appuntamento sembra una parte integrante e fluida del tuo store Shopify ✨

Aggiornato il: 10/09/2026