ℹ️ 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 il tuo widget di prenotazione corrisponda esattamente alla marca del tuo negozio? Hoppy Appointments consente di aggiungere il proprio CSS in cima alle impostazioni di design integrate, in modo da poter definire font, colori, spaziature, pulsanti e altro ancora.

Questa guida ti accompagna attraverso l'aggiunta e l'applicazione di CSS personalizzato al widget di prenotazione.

⚠️ Prima di iniziare

Prima di utilizzare CSS personalizzato, assicurarsi di avere:

• The Hoppy Appointments app installata sulla tua Shopify negozio
• Almeno un servizio attivo
• familiarità di base con selettori CSS e dichiarazioni

💡 Per la maggior parte dei cambiamenti di progettazione — colori, font, loghi e stili di pulsante — utilizzare il built-in Design Prima le impostazioni. CSS personalizzato è meglio quando è necessario modificare le opzioni integrate non coprire.

Per una panoramica completa delle opzioni di progettazione integrate, vedere Prenotazioni di nomina — Design & Styling Opzioni.

🛠️ Passo 1 — Aprire l'Editor CSS personalizzato

CSS personalizzato può essere gestito in due luoghi.

Global CSS (applica a tutti i servizi per impostazione predefinita)

1. Aprire Hoppy Appointments app
2. Fare clic Impostazioni impostazioni nel menu app
3. Fare clic Design
4. Scroll down to the CSS personalizzato scheda in fondo alla pagina

Per-service CSS (override CSS globale per un servizio)

1. Aprire Hoppy Appointments app
2. Vai a Servizi
3. Fare clic sul servizio desiderato
4. Fare clic su Design scheda
5. Assicurarsi che Non seguire le impostazioni del tema predefinito dovrebbe essere controllato
6. Scroll down to the CSS personalizzato carta

🛠️ Passo 2 — Scegliere CSS globale o Service-Level

Quando si modifica CSS su un servizio Design scheda, vedrete un gioco:

Non seguire le impostazioni del tema predefinito

• Fuori → il servizio utilizza il CSS globale da Impostazioni → Design
• Su → il servizio utilizza il proprio CSS dal livello di servizio Design scheda

Questo consente di mantenere uno stile coerente in tutti i servizi, o dare servizi specifici un aspetto unico.

🛠️ Passo 3 — Scrivi il tuo CSS

L'editor CSS inizia con un modello predefinito che include i selettori dei widget più comuni. È possibile sostituire o estendere il modello con le proprie regole.

Classi di fasciatura principali

Selezionatore

Cosa mira

.futureblink-appointment

L'intero widget di prenotazione

.futureblink-appointment .dialog

La finestra di dialogo principale di prenotazione (desktop)

.futureblink-appointment.mobile .dialog

La finestra di dialogo principale di prenotazione (mobile)

.futureblink-appointment .userInfoSection

Il pannello dei dettagli del servizio

Selettori comuni è possibile

Selezionatore

Cosa mira

.futureblink-appointment .confirm-btn

Conferma / Prenota pulsante

.futureblink-appointment .continue-btn

Continua a pulsante

.futureblink-appointment .back-btn

Pulsante posteriore

.futureblink-appointment .time-slot.selected

slot di tempo selezionato

.futureblink-appointment .highlighted_date.react-calendar__tile--active

Data del calendario selezionata

.futureblink-appointment .schedule-form

Modulo prenotazione clienti

.futureblink-appointment .meeting-booked

Successo / pagina di conferma

Esempio

.futureblink-appointing .confirm-btn {
sfondo-colore: #2563eb;
colore: #ffffffff;
confine-radio: 8px;

.futureblink-appointment.mobile .confirm-btn {
sfondo-colore: #1d4ed8;

ℹ️ Tu lo sai non bisogno di aggiungere !important alle vostre dichiarazioni. Hoppy Appointments Appends automaticamente !important quando il CSS viene iniettato nel widget, che aiuta le regole a superare gli stili di default.

🛠️ Passo 4 — Applicare il CSS

Dopo aver inserito il CSS, fare clic su Applicare pulsante sotto l'editor.

• Applicare → consente il CSS personalizzato e lo inietta nel widget di prenotazione
• Ripristino → disabilita il CSS personalizzato e reindirizza l'editor al modello predefinito

⚠️ CSS personalizzato prende effetto solo dopo aver cliccato Applicare. incollare CSS nel campo da solo non cambia l'aspetto widget.

💾 Passo 5 — Salva e anteprima

1. Fare clic Salva nella barra superiore
2. Attendere il messaggio di conferma
3. Anteprima il widget di prenotazione sul tuo negozio o nel pannello di anteprima dell'amministratore

Se hai modificato per servizio CSS, assicurati che il Non seguire le impostazioni del tema predefinito toggle è acceso, altrimenti il CSS globale sarà ancora utilizzato.

💡 Consigli & Migliori Pratiche

• Iniziare piccolo — cambiare un elemento alla volta in modo da poter vedere cosa influisce ogni regola
• Utilizzare selettrici specifiche — obiettivo .futureblink-appointment .your-class invece di grossi selettori che potrebbero influenzare altre parti del tuo negozio
• Prova su mobile — utilizzare .futureblink-appointment.mobile prefisso per regolare il layout mobile separatamente
• Mantenere un backup — copiare il CSS in un file di note prima di fare clic Ripristino
• Utilizzare prima le impostazioni di progettazione integrate — colori, font e loghi sono più facili da gestire e non richiedono conoscenze CSS

🐞 Risoluzione dei problemi

Il mio CSS non mostra sul negozio

1. Assicurarsi di aver cliccato Applicare nell'editor CSS personalizzato
2. Assicurarsi di aver cliccato Salva in cima alla pagina
3. Per CSS per servizio, assicurarsi Non seguire le impostazioni del tema predefinito è acceso
4. Controlla che i tuoi selettori corrispondano ai nomi delle classi dei widget effettivi
5. Cancella la tua cache del browser o prova in una finestra incognito

Il widget ritornato al look predefinito

Fare clic su Ripristino disabilita il CSS e ripristina il modello predefinito. Se si desidera ripristinare le regole personalizzate, incollarle di nuovo e fare clic Applicare.

Alcune regole non funzionano

L'auto !important iniezione funziona meglio con semplice property: value; dichiarazioni. CSS molto complesso — come @media query, @keyframes, o selettori nidi — non possono essere trasformati in modo affidabile. Mantenere le regole in modo semplice per i risultati più coerenti.

📚 Articoli correlati

• Prenotazioni di nomina — Design & Styling Opzioni
• Come configurare le posizioni di riunione per le prenotazioni di appuntamenti
• Come impostare i servizi di prenotazione di nomina

Aggiornato il: 10/09/2026