After you pick a display type, use position and device visibility settings to control where the notification appears and on which screens.
Open Appearance in the notification editor. Start with Display Types: Toast, Popup, Topbar if you have not chosen a type yet.
Device visibility
At the top of the Appearance tab, three toggles control which devices may show the notification:
| Toggle | When to turn off |
|---|---|
| Show on Desktop | Hide on large screens (e.g. mobile-only promo) |
| Show on Tablet | Hide on tablet-sized screens |
| Show on Mobile | Hide on phones (e.g. desktop-only admin message) |
All three are on by default. Turn off any device you want to exclude.
Position for Floating Side Box
When display type is Floating Side Box, you get separate controls for desktop/tablet and mobile.
Desktop & tablet position
Choose a corner or center:
- Top Right, Top Center, Top Left
- Bottom Right, Bottom Center, Bottom Left
- Center Screen
Distance fields appear based on your choice (pixels from top, bottom, left, or right). Use these to avoid overlapping your header or chat widgets.
Negative values are allowed if you need to nudge the box slightly off the default edge.
Mobile position
Mobile uses a simpler layout:
- Top , full width near the top
- Bottom , full width near the bottom
- Center , centered on screen
Set Distance from Top or Distance from Bottom when top or bottom is selected.
Position for Floating Bar (Top Bar)
Bar position uses edge placement instead of corners:
| Edge | Effect |
|---|---|
| Top | Horizontal bar along the top |
| Bottom | Horizontal bar along the bottom |
| Left | Vertical bar on the left |
| Right | Vertical bar on the right |
Distance from Edge adds spacing from that edge (in pixels). Desktop/tablet and mobile each have their own bar position settings.
For bar placement above your theme header, see Topbar Above Header (Theme Compatibility).
Position for Popup (Modal)
Popups are always centered. No corner or distance settings are shown. You can still adjust the backdrop color and blur in the Popup Backdrop section.
Z-Index (stacking order)
Under Advanced Styling, Z-Index controls whether the notification sits above or below other fixed elements (sticky headers, chat buttons, etc.).
- Higher number = on top
- Default is high enough for most sites
- Raise it only if something on your theme covers the notification
Quick tips
| Problem | Try |
|---|---|
| Notification hidden behind header | Increase top distance or raise Z-Index |
| Too close to screen edge | Increase distance values |
| Only want mobile users to see it | Turn off Desktop and Tablet |
| Bar covers navigation | Use Above header placement for top bars |
Checklist
- [ ] Set device visibility toggles for my audience
- [ ] Chose desktop and mobile position for my display type
- [ ] Adjusted distance from screen edges if needed
- [ ] Previewed on more than one screen size