Design e posizione
Dai uno stile a un popup promozionale e scegli dove fluttua su desktop e dispositivi mobili.
La scheda Design controlla l’aspetto di un popup promozionale e dove compare. È divisa in sfondo, posizione, dimensioni e caratteri, con una casella di CSS personalizzato alla fine.
La scheda Design, con l’anteprima del popup accanto.
Appearance and background
Sezione intitolata “Appearance and background”Background style offre tre tipi di riempimento:
| Stile | Cosa imposti |
|---|---|
| Solid fill | Un Background color e un’Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 e un’Opacity |
| Image fill | Un’immagine caricata: PNG, JPEG o JPG, sotto 1 MB |
Accanto trovi Border settings (Border style con Solid, Dashed, Dotted, dimensione, raggio e colore del bordo e un interruttore Box shadow), oltre a Padding e Margin.
Position settings
Sezione intitolata “Position settings”Dove fluttua il popup. Desktop e dispositivi mobili si configurano separatamente, ciascuno nella propria scheda.
Desktop
Sezione intitolata “Desktop”- Show on desktop: attiva o disattiva la visualizzazione su desktop
- Desktop position: Top left, Top middle, Top right, Bottom left, Bottom middle o Bottom right
- Animation type: Slide from top, Slide from bottom, Slide from left, Slide from right o Fade in-out
- Margin top/bottom (px) e Margin left/right (px): allontanalo dai bordi dello schermo
Dispositivi mobili
Sezione intitolata “Dispositivi mobili”Lo stesso insieme: Show on mobile, Mobile position, animazione e margini.
Scegliere una posizione
Sezione intitolata “Scegliere una posizione”Bottom left è l’impostazione predefinita e la più sicura. Sta lontano dall’intestazione, dal carrello e dalla barra Aggiungi al carrello fissa che la maggior parte dei temi mette in fondo alla pagina prodotto su dispositivi mobili.
Da verificare prima di scegliere qualcos’altro:
- Bottom right si scontra con i widget di chat dal vivo in molti negozi.
- Le posizioni in alto possono coprire le barre degli annunci e le intestazioni fisse.
- I margini su dispositivi mobili contano più di quelli su desktop: c’è molto meno spazio in cui collocare il popup.
Size settings
Sezione intitolata “Size settings”| Impostazione | Opzioni |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Sblocca Mobile popup size e Mobile image size |
Attiva l’opzione per dispositivi mobili per qualsiasi dimensione superiore a Small. Un popup Large su uno smartphone può coprire gran parte dello schermo, il modo più rapido per farlo chiudere senza leggerlo.
Font family and font size
Sezione intitolata “Font family and font size”- Use custom font: scegli una famiglia di caratteri e uno spessore, oppure eredita quelli del tuo tema
- Heading font size (px) e Content font size (px)
Usare lo stesso carattere del tema è di solito ciò che fa sembrare un popup parte del negozio e non qualcosa di aggiunto in seguito.
Custom CSS
Sezione intitolata “Custom CSS”Una casella Custom CSS (Developer Zone) alla fine della scheda accetta CSS semplice applicato a questo popup. Valgono le stesse cautele di altri punti: consulta CSS personalizzato.
Inserire un popup nella pagina
Sezione intitolata “Inserire un popup nella pagina”Per impostazione predefinita un popup fluttua sopra la pagina nella posizione che imposti qui. Se preferisci che stia dentro la pagina, in una sezione, in un punto fisso, la scheda Display ha uno shortcode apposito, in Custom location to show popup:
<div class="samita-sales-popup" data-id="12345"></div>Copialo, poi incollalo in un blocco app Samita Countdown nell’editor di temi. I passaggi sono gli stessi dei conti alla rovescia: consulta Posiziona un conto alla rovescia con uno shortcode.