ℹ️ 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 il pieno controllo su dove e come appare il tuo popup? 🛠️

PopUps personalizzati sono costruiti per casi di uso avanzato. Essi di default a posizionamento manuale, il che significa che si decide esattamente dove il popup vive nel vostro tema — più si ottiene l'accesso a un CSS personalizzato campo e un pulsante azione galleggiante per la massima flessibilità.

Questa guida ti passa attraverso l'intera configurazione in modo da poter lanciare il tuo primo popup personalizzato in pochi minuti.

✅ Prima di iniziare — Abilitare l'App Embed

Per qualsiasi popup da apparire sul tuo negozio, l'app incorporata deve essere abilitata all'interno del tuo Shopify tema.

Vai a:

Shopify Admin → Canali di vendita → Online Store → Temi → Modifica Tema → App Embeds

Allora:

• Trova Hoppy Popups
• Toggle it ON
• Fare clic Salva

ℹ️ Senza questo passo, il tuo popup non renderà sul negozio anche dopo la pubblicazione.

⚙️ Passo 1 — Creare un nuovo popup personalizzato

Aprire Hoppy PopUps app.

Allora:

→ Cliccare Crea nuovo popup

→ Selezionare PopUp personalizzato dall'elenco dei tipi di popup.

La pagina di configurazione si aprirà automaticamente con posizionamento manuale selezionato per impostazione predefinita.

📝 Passo 2 — Configurare il contenuto

Dopo aver aperto la pagina di installazione, atterrate all'interno Contenuto scheda.

Questa sezione controlla ciò che i visitatori vedono e come interagiscono con il popup.

🏷️ Nome popup

Questo campo viene utilizzato solo per scopi interni. I clienti non vedranno mai questo nome.

È possibile utilizzare qualsiasi nome riconoscibile come:

• Annuncio personalizzato
• Banner a tema
• Sviluppatore Personalizzato Popup
• Promozione codificata

💡 Utilizzando il nome interno corretto rende più facile identificare le impostazioni in seguito, soprattutto se il tuo negozio esegue più campagne.

💬 Titolo & Descrizione

Questi appaiono in cima al tuo popup e dovrebbero comunicare chiaramente il tuo messaggio.

Esempio

• Titolo: "Annunciazione speciale"
• Descrizione: "Controlla la nostra ultima collezione"

Puoi personalizzarli per abbinare la tua voce di campagna.

📧 Email & Phone Collection

Scegli quali campi mostrare nel tuo popup:

• Mostra campo di raccolta e-mail — cattura le email dei visitatori
• Mostra il campo numero di telefono — cattura i numeri di telefono con la selezione dei codici di paese

Puoi mostrare entrambi, solo uno, o nemmeno se stai solo visualizzando un annuncio.

🔗 Pulsante Link

Se non stai raccogliendo email o numeri di telefono, il popup diventa un semplice pulsante call-to-action. Impostare il Link alla pagina che desideri che i visitatori visitino — ad esempio, una pagina di raccolta, pagina del prodotto o URL esterno.

⚙️ Collezione aggiuntiva & Coupon Impostazioni

Questa sezione fornisce un controllo aggiuntivo su come le informazioni dei visitatori vengono raccolte e come gli sconti vengono presentati all'interno del popup.

📩 Email Collection Field Placeholder

Personalizza il testo segnaposto mostrato all'interno del campo di input e-mail.

Esempio

• "Inserire la tua email"
• "Il tuo miglior indirizzo email"

Questo aiuta a guidare i visitatori su quali informazioni dovrebbero entrare.

❌ Messaggio di errore

Impostare il messaggio di convalida mostrato quando un visitatore entra in un indirizzo e-mail non valido.

Esempio

• "Si prega di inserire un indirizzo email valido"

Questo appare automaticamente se il formato e-mail inserito non è corretto.

📱 Codice paese predefinito

Scegliere il codice paese predefinito per il campo numero di telefono.

Esempio

• Stati Uniti (+1)
• Regno Unito (+44)
• India (+91)

I visitatori possono ancora cambiare il paese manualmente a meno che non ristretto.

📞 Numero di telefono segnaposto

Personalizza il testo segnaposto mostrato nel campo del numero di telefono.

Esempio

• "Inserire il numero di telefono"
• "Mobile number"

Questo migliora la chiarezza e incoraggia la corretta formattazione.

⚠️ Messaggio di errore del numero di telefono

Impostare il messaggio visualizzato quando viene inserito un numero di telefono non valido.

Esempio

• "Si prega di inserire un numero di telefono valido"

Questo aiuta i visitatori a capire perché la presentazione non è riuscita.

🔘 Testo del pulsante

Personalizza il testo del pulsante call-to-action mostrato all'interno del popup.

Esempio

• "Shop Now"
• "Claim Discount"
• "Sblocca l'offerta"

Utilizzando il testo orientato all'azione può migliorare le conversioni.

🏷️ Mostra Codice Coupon

Scegliere se il codice coupon dovrebbe apparire all'interno del popup dopo la cattura e-mail di successo.

Opzioni disponibili:

• Sì. — visualizza il codice coupon ai visitatori
• No. — nasconde la sezione codice coupon

Questo è utile se gli sconti vengono applicati automaticamente o gestiti esternamente.

ℹ️ Il codice coupon può essere mostrato solo se l'email viene catturata.

🎟️ Codice Coupon

ℹ️ Questo campo è disponibile una volta Mostra Codice Coupon è toggled a Sì.

Per visualizzare un codice coupon, è possibile:

1. Seleziona uno dei codici Coupon che hai creato in Shopify Admin → Sconti cliccando su Seleziona/Cambia sconto.
2. È possibile creare uno nuovo cliccando su Crea nuovo sconto.

Esempio

• SAVE10
• WELCOME20
• COUPON123

💸 Applicazione

Questa opzione controlla come lo sconto viene applicato. Ha due opzioni:

1. Il cliente dovrà applicare lo sconto manualmente — il cliente dovrà inserire il codice coupon durante il checkout per ricevere lo sconto.
2. Applicare lo sconto automaticamente — lo sconto verrà applicato automaticamente durante il checkout senza che il cliente debba inserire il codice coupon.

⚠️ Importante:

• La nostra app non crea o gestisce i codici coupon/discount. Devi crearli Shopify Admin → Sconti prima di usarli nel popup.

☑️ Aggiungi Opt-In Checkbox

Scegliere se mostrare una casella di controllo opt-in aggiuntivo all'interno del popup.

Questo può essere utilizzato per:

• Consenso di marketing
• consenso SMS
• Abbonamenti Newsletter
• Condizioni di riconoscimento

Opzioni disponibili:

• Sì. — visualizza la casella di controllo
• No. — nasconde la casella di controllo

❎ Chiudi Icona

Attivare o disattivare l'icona di chiusura mostrata sul popup.

• Abilitato — i visitatori possono chiudere manualmente il popup
• Disabili — rimuove l'icona vicina dal popup

Questo aiuta a controllare come dismissibile l'esperienza popup dovrebbe essere.

✉️ Messaggi di successo

Dopo che un visitatore presenta i suoi dettagli, appare un messaggio di successo.

• Messaggio di successo: "Benvenuto nel nostro negozio!"

Puoi anche aggiungere una descrizione sotto il messaggio con i prossimi passaggi o istruzioni.

🖱️ Pulsante Click Behavior

ℹ️ Questa opzione è disponibile solo quando "Show Email Field" & "Show Phone Number Field" sono deselezionati.

Ti permette di controllare cosa succede quando un visitatore clicca sul pulsante CTA all'interno del popup. Si occupa di:

1. Vicino Popup — il popup si chiuderà
2. Reveal Codice Coupon — il codice coupon sarà rivelato al visitatore, ma si avrà impostare il codice Coupon come descritto sopra nella sezione "Mostra codice coupon".
3. Redirect to Link — selezionare questo ti darebbe un campo di input chiamato "Link" dove è possibile specificare l'URL a cui il visitatore verrà reindirizzato

🔄 Pulsante d'azione galleggiante

Anche con il posizionamento manuale, è possibile aggiungere un Pulsante d'azione galleggiante che rimane visibile sulla pagina in modo che i visitatori possano riaprire il popup dopo averlo chiuso.

Scegli una posizione:

• In basso a destra
• In basso a sinistra
• Schermo a destra
• Schermo a sinistra

Allora entra in Testo del pulsante — ad esempio "Offerta aperta", "Offerta Verde", o "Learn More".

Per disabilitare completamente il pulsante galleggiante, selezionare Disattivare il pulsante di azione galleggiante.

🎨 Fase 3 — Applicare CSS personalizzato (opzionale)

Passare al Design scheda per accedere alla CSS personalizzato sezione.

Questo è dove i popup personalizzati brillano davvero. È possibile scrivere il proprio CSS per ignorare qualsiasi stile predefinito.

📝 Modello CSS

L'applicazione fornisce un modello pronto con selettori comuni:

.futureblink-popup {
/* principale contenitore popup */

.futureblink-popup .title {
/* Titolo popup */

.futureblink-popup.mobile .title {
/* Titolo mobile override */

.futureblink-popup .description {
Descrizione del popup */

.futureblink-popup.mobile .descrizione {
/* Descrizione mobile override */

.futureblink-popup .cta-button {
/* Pulsante di chiamata all'azione */

.futureblink-popup.mobile .cta-button {
/* Pulsante mobile override */

.futureblink-popup .close-btn {
/* Chiudi icona */

.futureblink-popup.mobile .close-btn {
/* Override dell'icona di chiusura mobile */

Incolla il tuo CSS personalizzato nel campo e fai clic Applicare.

⚠️ Note importanti

• CSS personalizzato sovrascrive tutte le altre impostazioni di progettazione — usarlo quando è necessario il controllo pixel-perfect
• Selettori specifici per dispositivi mobili consentono di definire in modo diverso per gli utenti del telefono
• Fare clic Ripristino per ripristinare il modello CSS predefinito in qualsiasi momento

🖱️ Passo 4 — Impostare il trigger e le regole di visualizzazione

Spostati Luogo / Chirurgia scheda per controllare quando e dove appare il popup personalizzato.

Poiché i popup personalizzati utilizzano il posizionamento manuale, la maggior parte delle impostazioni standard del trigger non si applicano allo stesso modo. Tuttavia, è ancora possibile configurare:

• Frequenza di visualizzazione — Mostrare ogni volta, una volta per visita, o limitare con un cooldown
• Obiettivo del cliente — Stato di accesso, tag dei clienti, durata della vita
• Geolocalizzazione — Tutti i paesi del mondo o specifici
• Scheduling — Date di inizio e fine opzionali

Per spiegazioni approfondite di ogni opzione di destinazione, vedere la documentazione dedicata Advanced Targeting.

✅ Fase 5 — Salva e Pubblica

Una volta tutto sembra buono:

1. Fare clic Salva per memorizzare la configurazione
2. Fare clic Pubblicazione per rendere il popup live sul tuo negozio

⚠️ Salvare da solo non rende il popup visibile ai clienti. Devi pubblicarlo.

⚠️ Per il posizionamento manuale: Ricordate di aggiungere anche il codice snippet al vostro tema — la pubblicazione da sola non metterà il popup automaticamente.

Se l'app incorporata non è ancora abilitata, un banner ti ricorderà di attivarlo nel tuo Shopify editor di temi.

🎉 Risultato finale

Una volta configurato con successo:

✅ Il tuo popup appare esattamente dove lo hai messo nel tuo tema
✅ Custom CSS ti dà il pieno controllo visivo
✅ Un pulsante di azione galleggiante mantiene il popup accessibile (se abilitato)
✅ Il popup rispetta le regole di destinazione, la pianificazione e le impostazioni del dispositivo
✅ I visitatori interagiscono con un'esperienza completamente on-brand e personalizzata

Il tuo popup personalizzato è ora vivo e unico il tuo 🚀

Aggiornato il: 10/09/2026