Design och position
Utforma en försäljningspopup och bestäm var den flyter på dator och mobil.
Fliken Design styr hur en försäljningspopup ser ut och var den visas. Den är uppdelad i bakgrund, position, storlek och teckensnitt, med en ruta för anpassad CSS i slutet.
Fliken Design, med popupens förhandsgranskning bredvid.
Utseende och bakgrund
Section titled “Utseende och bakgrund”Background style erbjuder tre typer av fyllning:
| Stil | Vad du anger |
|---|---|
| Solid fill | En Background color och en Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 och en Opacity |
| Image fill | En uppladdad bild – PNG, JPEG eller JPG, under 1 MB |
Bredvid hittar du Border settings – Border style (Solid, Dashed, Dotted), kantstorlek, radie, färg och en Box shadow-växel – samt Padding och Margin.
Positionsinställningar
Section titled “Positionsinställningar”Var popupen flyter. Dator och mobil konfigureras separat, på sina egna flikar.
- Show on desktop – slå på eller av visning på dator
- Desktop position – Top left, Top middle, Top right, Bottom left, Bottom middle eller Bottom right
- Animation type – Slide from top, Slide from bottom, Slide from left, Slide from right eller Fade in-out
- Margin top/bottom (px) och Margin left/right (px) – flytta den bort från skärmkanterna
Samma uppsättning: Show on mobile, Mobile position, animation och marginaler.
Välja en position
Section titled “Välja en position”Bottom left är standard och det säkraste valet. Den är ur vägen för sidhuvudet, varukorgen och det fasta fältet för att lägga i varukorgen som de flesta teman placerar längst ned på en produktsida på mobil.
Det här är värt att kontrollera innan du väljer något annat:
- Bottom right krockar med livechattwidgetar i många butiker.
- Positioner Top kan täcka meddelandefält och fasta sidhuvuden.
- Mobilmarginaler betyder mer än datormarginaler – det finns mycket mindre utrymme för popupen.
Storleksinställningar
Section titled “Storleksinställningar”| Inställning | Alternativ |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Låser upp Mobile popup size och Mobile image size |
Slå på mobilalternativet för allt större än Small. En Large-popup på en telefon kan täcka större delen av skärmen, vilket är det snabbaste sättet att få den stängd oläst.
Teckensnitt och teckenstorlek
Section titled “Teckensnitt och teckenstorlek”- Use custom font – välj teckensnittsfamilj och tjocklek, eller ärv temats
- Heading font size (px) och Content font size (px)
Att matcha temats teckensnitt är oftast det som gör att en popup känns som en del av butiken i stället för något påklistrat.
Anpassad CSS
Section titled “Anpassad CSS”En ruta med namnet Custom CSS (Developer Zone) i slutet av fliken tar emot vanlig CSS som tillämpas på den här popupen. Samma försiktighet gäller som på andra ställen – se Custom CSS.
Placera en popup i sidan i stället
Section titled “Placera en popup i sidan i stället”Som standard flyter en popup ovanpå sidan på den position du anger här. Om du hellre vill att den ska sitta inne i sidan – i en sektion, på en fast plats – finns det en shortcode för det på fliken Display, under Custom location to show popup:
<div class="samita-sales-popup" data-id="12345"></div>Kopiera den och klistra in den i ett appblock av typen Samita Countdown i temaredigeraren. Stegen är desamma som för nedräkningar – se Placera en nedräkning med en shortcode.