Position and Margins

Control where your notification bubble appears on the screen and how much space it has from the edges of the browser window.

Position

For Bubble type notifications, you can choose where the floating button and panel appear:

The bubble sits in the lower left corner of the screen. The notification panel opens above the button, aligned to the left.

The bubble sits in the lower right corner of the screen. The notification panel opens above the button, aligned to the right.

Bottom right is the more common placement for chat widgets and notifications, so visitors may instinctively look there
Bottom left can be a good choice if you already have a chat widget in the bottom right, or if you want to avoid overlapping with other apps
Consider what other elements are on your store (live chat, cookie banners, etc.) and place the bubble where it won't overlap

Controls the distance between the bubble and the left or right edge of the screen.

A larger horizontal margin pushes the bubble further from the edge, while a smaller value places it closer to the corner.

Controls the distance between the bubble and the bottom edge of the screen.

A larger vertical margin lifts the bubble higher from the bottom, while a smaller value keeps it closer to the bottom edge.

Scenario	Horizontal	Vertical
Default (works for most stores)	30px	30px
Above a cookie banner	30px	80px
Tight corner placement	10px	10px
Centered bottom area	50px	30px

Check on mobile — margins that look good on desktop might feel too large or too small on mobile screens
Watch for overlaps — if you have other floating elements (chat widgets, cookie consent banners, scroll to top buttons), adjust your margins so the bubble doesn't cover them
Test both positions — try bottom left and bottom right to see which feels more natural for your store's layout
The notification panel always appears above the bubble button, so vertical margin mainly affects where the button itself sits