ℹ️ 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 tuoi popup corrispondano perfettamente al tuo negozio? 🎨

♪ Hoppy Popups include ampie opzioni di personalizzazione di progettazione, CSS personalizzato ti dà il controllo completo sulle regolazioni di stile avanzate che vanno oltre le impostazioni standard.

Che tu stia raffinando la tipografia, regolando la spaziatura, creando effetti visivi unici, o risolvendo conflitti di stile specifici a tema, Custom CSS ti permette di personalizzare i tuoi popup esattamente come vuoi.

⚠️ Prima di iniziare

Prima di utilizzare Custom CSS:

• Assicurati che il tuo popup sia già stato creato e salvato.
• Avere una comprensione di base di CSS o l'accesso a uno sviluppatore.
• Capire che Custom CSS può ignorare le impostazioni standard di progettazione.

💡 Le opzioni di stile standard come colori, font e spaziatura sono già disponibili nella scheda Design. Custom CSS è destinato a requisiti di styling più avanzati.

🛠️ Passo 1 — Apri il tuo setup popup

Aprire Hoppy Popups da app Shopify Admin.

Allora:

➡️ Aprire un popup esistente.

➡️ O creare un nuovo popup se non lo hai già fatto.

Navigare al Design scheda.

Scorrere verso il basso fino a trovare il CSS personalizzato sezione.

🎨 Fase 2 — Aprire la sezione CSS personalizzata

All'interno CSS personalizzato sezione che troverai:

• Editor CSS
• Anonimo Applicare pulsante pulsante
• A Ripristino pulsante pulsante
• Un modello di avvio CSS

Il modello include selettori popup comunemente usati, rendendo facile iniziare a personalizzare il popup senza dover identificare manualmente i nomi delle classi.

✍️ Passo 3 — Aggiungi il tuo CSS personalizzato

L'editor fornisce diversi selettori pronti all'uso per lo styling di elementi popup.

Selettori disponibili

Selezionatore

Descrizione

.futureblink-popup

Intero contenitore di popup

.futureblink-popup .title

Titolo popup

.futureblink-popup .description

Popup descrizione testo

.futureblink-popup .cta-button

Pulsante di chiamata a azione

.futureblink-popup .close-btn

Chiudi pulsante

Selettori mobili

Per lo styling specifico per dispositivi mobili, utilizzare .mobile variazione.

Selezionatore

Descrizione

.futureblink-popup.mobile

Contenitore di popup mobile

.futureblink-popup.mobile .title

Titolo mobile

.futureblink-popup.mobile .description

Descrizione mobile

.futureblink-popup.mobile .cta-button

Pulsante CTA mobile

.futureblink-popup.mobile .close-btn

Pulsante di chiusura mobile

Esempio CSS

Per personalizzare il titolo popup e il pulsante CTA:

.futureblink-popup .title {
color: #ff6b6b;
font-size: 24px;
}

.futureblink-popup .cta-button {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

💡 È inoltre possibile aggiungere ulteriori selettori, animazioni, query multimediali e altre regole CSS valide come necessario.

📱 Passo 4 — Aggiungi mobile-Specific Styling

Per applicare gli stili solo su dispositivi mobili, utilizzare .mobile Selettori.

Esempio:

.futureblink-popup.mobile .title {
font-size: 18px;
}

L'app si avvolge automaticamente .mobile selettori all'interno di una query multimediale mobile quando li rende sul tuo negozio.

Ciò significa che non è necessario creare manualmente i breakpoint mobili per questi selettori.

✅ Passo 5 — Applicare il CSS

Una volta aggiunta la CSS:

➡️ Fare clic Applicare.

L'anteprima aggiorna automaticamente in modo da poter rivedere immediatamente i cambiamenti di stile.

⚠️ Semplicemente incollare CSS nell'editor non lo attiva.

Devi cliccare Applicare prima che gli stili diventino attivi.

Se si desidera rimuovere lo stile personalizzato:

➡️ Fare clic Ripristino.

Questo ripristina il modello predefinito e disabilita il CSS personalizzato.

👀 Passo 6 — Recensione dell'anteprima

Dopo aver applicato il CSS:

➡️ Rivedere l'anteprima Desktop.

➡️ Recensione dell'anteprima Mobile.

Verificare che:

• Visualizzazione del testo correttamente.
• I bottoni rimangono allineati.
• Lo spazio sembra coerente.
• Gli effetti visivi si comportano come previsto.

Se sono necessarie modifiche:

➡️ Aggiorna il CSS.

➡️ Fare clic Applicare Ancora.

L'anteprima si aggiorna automaticamente dopo ogni aggiornamento.

💾 Passo 7 — Salvare e pubblicare

Una volta soddisfatti del design:

➡️ Fare clic Salva.

➡️ Fare clic Pubblicazione.

⚠️ Salvare da solo non aggiorna il tuo negozio.

Il popup deve anche essere pubblicato prima che i clienti possano vedere i cambiamenti.

⚠️ Note importanti

Impostazioni di progettazione CSS personalizzate

Custom CSS ha la precedenza sulla maggior parte delle impostazioni standard di progettazione.

Se un'impostazione di progettazione sembra essere ignorata, è probabile che sia sovraccaricato dal vostro CSS.

Mobile Handling è automatico

L'app converte automaticamente .mobile selettori in stili mobili reattivi.

Questo rende facile mantenere disegni desktop e mobili separati senza scrivere query multimediali personalizzati.

Styling Scoped

Custom CSS è automaticamente indirizzato al popup specifico che viene modificato.

Questo aiuta a prevenire lo styling conflitti con:

• Altri popup
• Elementi a tema
• Altri contenuti storefront

Opzione di reset

Fare clic su Ripristino rimuove solo la CSS personalizzata.

Non colpisce:

• Impostazioni popup
• Impostazioni di progettazione
• Modelli
• Configurazione dei contenuti

Convalida CSS

L'editor non convalida la sintassi CSS.

Se uno stile non appare correttamente:

➡️ Controlla i nomi dei selettori.

➡️ Verificare bracci e semicoloni.

➡️ Rivedere il CSS per errori di sintassi.

❓ Risoluzione dei problemi

Se i tuoi stili non appaiono correttamente:

➡️ Confermare che Applicare è stato cliccato.

➡️ Verificare che il popup sia stato Salvataggio e Pubblicato.

➡️ Controllare che i selettori corrispondono esattamente al modello fornito.

➡️ Prova in una finestra del browser Incognito o Privato.

➡️ Aggiorna il negozio per cancellare stili cache.

🎉 Risultato finale

✅ Il tuo popup può essere personalizzato oltre le impostazioni standard di progettazione.

✅ Le esperienze desktop e mobile possono essere modellate in modo indipendente.

✅ Gli effetti visivi avanzati e lo stile specifico del marchio diventano possibili.

✅ Gli stili personalizzati rimangono isolati al popup selezionato.

Custom CSS offre la flessibilità di creare un'esperienza popup più lucida e coerente, mantenendo la semplicità degli strumenti di design incorporati dell'app. ✨

Aggiornato il: 10/09/2026