Add the notification bell to your store

The bell is how shoppers open your NotiFeed, the feed that keeps your offers, store updates and product recommendations until shoppers are ready to look. You set the bell up once in Atomato, under Settings > NotiFeed styling.

Choose where the bell appears

Under Where the bell appears, choose one:

• Display in header places the bell in your store's header, near the cart or menu.
• Floating icon uses a bell that stays fixed on the screen as shoppers scroll.

Pick the bell's spot in your header

1. Under Bell placement, click Choose bell placement.
2. A preview of your storefront opens at desktop size. Click the element the bell should sit next to, such as your cart icon. The bell goes just before the element you pick.
3. Click Next: Choose mobile placement and pick the spot on the mobile view.
4. Click Save placement. Atomato confirms with Bell placement captured.
5. Click Save. Nothing changes on your store until you do.

If your store is password protected, the placement preview can't load. Remove the storefront password while you pick a spot, or use Add using CSS selector below instead.

If none of your chosen spots are on a page, Atomato uses a built-in position for many popular themes. If that fails too, it places the bell next to a cart link or icon, or next to the first item in your header menu.

Advanced placement options

Click Advanced placement options to place the bell yourself:

• Add using snippet: select this option, copy the snippet and paste it into your theme header next to the cart icon, then click Save in Atomato. It loads the bell a little earlier. If you change themes, paste the snippet into the new theme too.
• Add using CSS selector: type the selector of the element the bell should sit next to in Type or pick CSS selectors, for example .header__icon--cart, then click Save.

Show or hide the bell by device

Under Visibility, the Desktop and Mobile tabs each have a Show on this device switch and a Feed position setting.

Style the bell

Under Bell styling, set the bell's fill and outline colors, the badge color and badge text color, the bell's line thickness and its icon size. These settings are separate for desktop and mobile, so set them on both the Desktop and Mobile tabs. A floating bell also has a Background color. Colors, Visual Appearance and Custom CSS hold the rest of the feed's look, including fonts, a custom bell icon and corner radius. Some design options need a paid plan.

Use Preview on desktop and Preview on mobile to see your changes on a copy of your store's home page, then click Save. The preview shows the bell even when the Atomato app embed is off, so check your live store after saving.

Bell not showing?

1. Check that at least one NotiFeed, NotiSell or NotiEmail campaign is Active and targets the page and device you are checking. The bell appears once there is something in the feed. On the free Starter plan, only NotiFeed campaigns count.
2. Check that the Atomato app embed is on in your live theme: Turn on the Atomato app embed.
3. Check that Show on this device is on for both desktop and mobile.
4. Run Choose bell placement again, or click Change next to Bell placement captured, then click Save. Do this especially after a theme change or a header redesign.
5. If you use Add using snippet, check that the snippet is still in your live theme's header.