Design et position
Stylisez une popup de promotion et choisissez où elle flotte sur ordinateur et sur mobile.
L’onglet Design contrôle l’apparence d’une popup de promotion et son emplacement. Il se divise en arrière-plan, position, taille et polices, avec une zone de CSS personnalisé à la fin.
L’onglet Design, avec l’aperçu de la popup à côté.
Apparence et arrière-plan
Section intitulée « Apparence et arrière-plan »Background style propose trois types de fond :
| Style | Ce que vous définissez |
|---|---|
| Solid fill | Une Background color et une Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 et une Opacity |
| Image fill | Une image importée : PNG, JPEG ou JPG, de moins de 1 Mo |
À côté, vous trouverez Border settings (Border style : Solid, Dashed, Dotted), la taille, le rayon et la couleur de la bordure, un interrupteur Box shadow, ainsi que Padding et Margin.
Position settings
Section intitulée « Position settings »L’endroit où la popup flotte. Ordinateur et mobile se configurent séparément, dans leurs propres onglets.
Ordinateur
Section intitulée « Ordinateur »- Show on desktop : active ou désactive l’affichage sur ordinateur
- Desktop position : Top left, Top middle, Top right, Bottom left, Bottom middle ou Bottom right
- Animation type : Slide from top, Slide from bottom, Slide from left, Slide from right ou Fade in-out
- Margin top/bottom (px) et Margin left/right (px) : l’éloignent des bords de l’écran
Le même ensemble : Show on mobile, Mobile position, animation et marges.
Choisir une position
Section intitulée « Choisir une position »Bottom left est la valeur par défaut et la plus sûre. Elle ne gêne ni votre en-tête, ni votre panier, ni la barre Ajouter au panier fixe que la plupart des thèmes placent en bas d’une page produit mobile.
À vérifier avant d’en choisir une autre :
- Bottom right entre en collision avec les widgets de chat en direct sur de nombreuses boutiques.
- Les positions Top peuvent recouvrir les barres d’annonce et les en-têtes fixes.
- Les marges mobiles comptent plus que celles de l’ordinateur : la popup dispose de beaucoup moins de place.
Size settings
Section intitulée « Size settings »| Paramètre | Options |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Déverrouille Mobile popup size et Mobile image size |
Activez l’option mobile pour toute taille supérieure à Small. Une popup Large sur un téléphone peut couvrir la majeure partie de l’écran, ce qui est le moyen le plus sûr qu’elle soit fermée sans être lue.
Font family and font size
Section intitulée « Font family and font size »- Use custom font : choisissez une famille et une graisse de police, ou héritez de celles de votre thème
- Heading font size (px) et Content font size (px)
Reprendre la police de votre thème est généralement ce qui donne à une popup l’allure d’un élément de la boutique plutôt que d’un ajout plaqué.
Custom CSS
Section intitulée « Custom CSS »Une zone Custom CSS (Developer Zone) à la fin de l’onglet accepte du CSS standard appliqué à cette popup. Les mêmes précautions que partout ailleurs s’appliquent : consultez CSS personnalisé.
Placer une popup dans la page
Section intitulée « Placer une popup dans la page »Par défaut, une popup flotte au-dessus de la page à la position définie ici. Si vous préférez qu’elle soit intégrée à la page, dans une section, à un endroit fixe, l’onglet Display propose un shortcode pour cela, sous Custom location to show popup :
<div class="samita-sales-popup" data-id="12345"></div>Copiez-le, puis collez-le dans un bloc d’application Samita Countdown dans votre éditeur de thème. Les étapes sont les mêmes que pour les comptes à rebours : consultez Placer un compte à rebours avec un shortcode.