Design und Position
Gestalten Sie ein Sale-Popup und legen Sie fest, wo es am Desktop und auf Mobilgeräten eingeblendet wird.
Der Tab Design steuert, wie ein Sale-Popup aussieht und wo es erscheint. Er ist in Hintergrund, Position, Größe und Schriften unterteilt, mit einem Feld für eigenes CSS am Ende.
Der Tab „Design“ mit der Popup-Vorschau daneben.
Appearance and background
Abschnitt betitelt „Appearance and background“Background style bietet drei Flächen:
| Stil | Was Sie festlegen |
|---|---|
| Solid fill | Eine Background color und eine Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 und eine Opacity |
| Image fill | Ein hochgeladenes Bild – PNG, JPEG oder JPG, unter 1 MB |
Daneben finden Sie Border settings – Border style (Solid, Dashed, Dotted), Rahmenstärke, Eckenradius, Farbe und einen Schalter Box shadow – sowie Padding und Margin.
Position settings
Abschnitt betitelt „Position settings“Wo das Popup eingeblendet wird. Desktop und Mobilgeräte werden getrennt in eigenen Tabs konfiguriert.
Desktop
Abschnitt betitelt „Desktop“- Show on desktop – die Anzeige am Desktop ein- oder ausschalten
- Desktop position – Top left, Top middle, Top right, Bottom left, Bottom middle oder Bottom right
- Animation type – Slide from top, Slide from bottom, Slide from left, Slide from right oder Fade in-out
- Margin top/bottom (px) und Margin left/right (px) – es von den Bildschirmrändern wegrücken
Dieselben Einstellungen: Show on mobile, Mobile position, Animation und Abstände.
Eine Position wählen
Abschnitt betitelt „Eine Position wählen“Bottom left ist der Standard und die sicherste Wahl. Es steht Ihrem Header, Ihrem Warenkorb und der fixierten Leiste „In den Warenkorb“ im Weg, die die meisten Themes unten auf einer mobilen Produktseite einblenden, am wenigsten.
Prüfen Sie Folgendes, bevor Sie sich für etwas anderes entscheiden:
- Bottom right kollidiert in vielen Shops mit Live-Chat-Widgets.
- Top-Positionen können Ankündigungsleisten und fixierte Header verdecken.
- Mobile Abstände sind wichtiger als die am Desktop – das Popup hat dort weit weniger Platz.
Size settings
Abschnitt betitelt „Size settings“| Einstellung | Optionen |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Schaltet Mobile popup size und Mobile image size frei |
Schalten Sie die mobile Option für alles über Small ein. Ein Large-Popup kann auf einem Smartphone den größten Teil des Bildschirms verdecken – der schnellste Weg, es ungelesen schließen zu lassen.
Font family and font size
Abschnitt betitelt „Font family and font size“- Use custom font – eine Schriftfamilie und Schriftstärke wählen oder die Ihres Themes übernehmen
- Heading font size (px) und Content font size (px)
Die Schrift Ihres Themes zu verwenden, lässt ein Popup meist eher wie einen Teil des Shops wirken als wie etwas Aufgesetztes.
Eigenes CSS
Abschnitt betitelt „Eigenes CSS“Ein Feld Custom CSS (Developer Zone) am Ende des Tabs nimmt reines CSS entgegen, das auf dieses Popup angewendet wird. Es gelten dieselben Vorbehalte wie an anderer Stelle – siehe Eigenes CSS.
Ein Popup stattdessen in der Seite platzieren
Abschnitt betitelt „Ein Popup stattdessen in der Seite platzieren“Standardmäßig schwebt ein Popup an der hier festgelegten Position über der Seite. Wenn es lieber in der Seite sitzen soll – in einem Abschnitt, an einer festen Stelle –, gibt es dafür im Tab Display unter Custom location to show popup einen Shortcode:
<div class="samita-sales-popup" data-id="12345"></div>Kopieren Sie ihn und fügen Sie ihn in einen App-Block Samita Countdown in Ihrem Theme-Editor ein. Die Schritte sind dieselben wie bei Countdowns – siehe Countdown per Shortcode platzieren.