Articles on: Troubleshooting

Notification display issues: Wrong position or appearance

If notifications appear in the wrong position or look incorrect, check position settings, animation preferences, custom CSS conflicts, and theme compatibility. Adjust settings in the campaign editor.


Check Global Settings for position. Check campaign Advanced Settings for animation and custom CSS. Custom CSS or theme conflicts may affect appearance. Test on storefront to see actual appearance.



Position Issues


  • Location: Settings (top right) → Global Settings
  • Options: Bottom-right, bottom-left, top-right, top-left
  • Scope: Global (affects all campaigns)
  • Fix: Change position in Global Settings


Animation Issues


  • Location: Campaign → Edit → Advanced Settings
  • Options: Slide, Fade, None
  • Scope: Per campaign
  • Fix: Change animation style per campaign


Custom CSS Issues


  • Location: Campaign → Edit → Advanced Settings
  • Problem: Custom CSS may conflict with theme
  • Fix: Review custom CSS, remove conflicting styles
  • Test: Remove custom CSS temporarily to test


Theme Conflicts


  • Some themes have CSS that affects notifications
  • May override notification styles
  • Solution: Use custom CSS to override theme styles
  • Or: Contact theme developer


Appearance Problems


Problem

Check

Fix

Wrong size

Custom CSS for width/height

Adjust CSS

Wrong colors

Custom CSS for colors

Adjust CSS

Wrong font

Custom CSS for font-family

Adjust CSS

Overlapping

Position and z-index in CSS

Adjust CSS


Testing


  • Always test on storefront (not admin)
  • Test on different devices
  • Test on different browsers
  • Check in incognito mode (no extensions)


Best Practices:
  • Start with default position (bottom-right)
  • Use Slide animation (most compatible)
  • Add custom CSS gradually
  • Test after each change
  • Keep CSS simple


Common Mistakes:
  • Too much custom CSS (conflicts)
  • Not testing on storefront
  • Forgetting position is global
  • CSS syntax errors


Next Steps:

  • Check position in Global Settings
  • Review custom CSS in campaigns
  • Test on actual storefront
  • Simplify CSS if needed
  • See "How do I change notification position and animation?" for details


Updated on: 03/01/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!