Ontwerp en positie
Geef een sale-pop-up een stijl en bepaal waar hij zweeft op desktop en mobiel.
Op het tabblad Design bepaal je hoe een sale-pop-up eruitziet en waar hij verschijnt. Het is verdeeld in achtergrond, positie, formaat en lettertypen, met aan het einde een vak voor eigen css.
Het tabblad Design, met het voorbeeld van de pop-up ernaast.
Appearance and background
Section titled “Appearance and background”Background style biedt drie soorten vulling:
| Stijl | Wat je instelt |
|---|---|
| Solid fill | Een Background color en een Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 en een Opacity |
| Image fill | Een geüploade afbeelding: PNG, JPEG of JPG, kleiner dan 1 MB |
Daarnaast vind je Border settings — Border style (Solid, Dashed, Dotted), randdikte, afronding, kleur en een schakelaar voor Box shadow — plus Padding en Margin.
Position settings
Section titled “Position settings”Waar de pop-up zweeft. Desktop en mobiel stel je apart in, op hun eigen tabbladen.
Desktop
Section titled “Desktop”- Show on desktop — de weergave op desktop in- of uitschakelen
- Desktop position — Top left, Top middle, Top right, Bottom left, Bottom middle of Bottom right
- Animation type — Slide from top, Slide from bottom, Slide from left, Slide from right of Fade in-out
- Margin top/bottom (px) en Margin left/right (px) — schuif de pop-up weg van de schermranden
Mobile
Section titled “Mobile”Dezelfde set: Show on mobile, Mobile position, animatie en marges.
Een positie kiezen
Section titled “Een positie kiezen”Bottom left is de standaardwaarde en de veiligste. Hij staat niet in de weg van je header, je winkelwagen en de vaste balk met In winkelwagen die de meeste thema’s onderaan een mobiele productpagina zetten.
Controleer dit voordat je voor iets anders kiest:
- Bottom right botst in veel winkels met livechatwidgets.
- Top-posities kunnen aankondigingsbalken en vaste headers bedekken.
- Mobiele marges zijn belangrijker dan die voor desktop, want er is veel minder ruimte voor de pop-up.
Size settings
Section titled “Size settings”| Instelling | Opties |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Ontgrendelt Mobile popup size en Mobile image size |
Zet de mobiele optie aan voor alles boven Small. Een Large-pop-up kan op een telefoon het grootste deel van het scherm bedekken, en dan wordt hij het snelst ongelezen gesloten.
Font family and font size
Section titled “Font family and font size”- Use custom font — kies een lettertype en gewicht, of neem dat van je thema over
- Heading font size (px) en Content font size (px)
Het lettertype van je thema aanhouden zorgt er meestal voor dat een pop-up bij de winkel hoort en niet als iets extra’s aanvoelt.
Custom CSS
Section titled “Custom CSS”Een vak Custom CSS (Developer Zone) aan het einde van het tabblad accepteert gewone css die op deze pop-up wordt toegepast. Dezelfde voorzorgen als elders gelden hier, zie Custom CSS.
Een pop-up in plaats daarvan in de pagina plaatsen
Section titled “Een pop-up in plaats daarvan in de pagina plaatsen”Standaard zweeft een pop-up boven de pagina op de positie die je hier instelt. Wil je hem liever in de pagina zelf plaatsen, in een sectie of op een vaste plek, dan heeft het tabblad Display daarvoor een shortcode onder Custom location to show popup:
<div class="samita-sales-popup" data-id="12345"></div>Kopieer hem en plak hem in een app-blok Samita Countdown in je thema-editor. De stappen zijn dezelfde als voor afteltimers, zie Een afteltimer met een shortcode plaatsen.