Place the bell with a CSS selector or a theme snippet

With Display in header, Atomato puts a bell just before each element your CSS selectors match, or you can paste the bell into your theme's code as a snippet.

Two ways to place the bell yourself

Both are under Advanced placement options in Settings > NotiFeed styling > Display behavior, with the basics in Add the notification bell to your store. A snippet bell arrives with the page, and a selector bell a moment later, once Atomato's script runs.

Choose bell placement writes selectors for you and switches to Add using CSS selector. It loads your live home page without your theme's scripts, so it can miss parts built with JavaScript, and each Save placement replaces your list with at most two selectors.

How Atomato reads your selectors

In Type or pick CSS selectors, separate selectors with commas, up to 200 characters. Atomato splits the list at every comma, so no single selector can contain one, as in :is(.a, .b). For each selector, it puts a bell just before the first matching element.

• Each matching selector adds a bell, so with one header shown at a time, a desktop and a mobile selector give shoppers one bell.
• A class shared by both headers gets a bell only in the first one in the page's code, which may be hidden on phones.
• Selectors that match nothing are skipped, so one list can cover several themes.
• An invalid selector, such as one with a missing bracket, stops the header bell on every page, and the console shows [Atomato] Init error:.

If the field is empty or nothing matches, Atomato tries built-in selectors for many popular themes, matched by the theme's original name, so renamed copies count. Then it takes whichever comes first on the page: a cart icon, a /cart link or a header menu item. Otherwise the page has no header bell, one of the causes in Why isn't the notification bell showing on my store?

Fallbacks only run when none of your selectors match, so a mobile selector that matches nothing can leave phones without a bell.

When your header changes after loading

If your theme redraws its header, Atomato puts its existing bells back within a moment. It never adds a bell for an element that appears after it has run, so a page where nothing matched at first stays without one until the next load.

Find a selector for each header

1. On your live store, right-click the cart icon, choose Inspect and pick an id, or a class only it has, not a state class such as is-active or open.
2. In the browser console, document.querySelectorAll('.your-class').length should return 1. A 0 means no match, and an error means the selector isn't valid.
3. Repeat in a phone-sized window for the mobile header. Enter both, desktop first, like the field's example .header__icon--cart, .mobile-header__cart, and click Save.
4. Check home, product and collection pages, since some themes vary the header.

What changes with the snippet

Select Add using snippet, click Copy code, paste the code next to the cart icon in each header, then click Save in Atomato. Until you save, Atomato adds its own bell too, so shoppers can see two. Keep the code's data-notifeed-bell-header attribute and empty data-notifeed-bell-count badge, which Atomato uses to find the bell and show the count.

• There is no fallback: a theme without the code has no header bell, so paste it into each theme you publish. With the Atomato app embed off, the pasted bell stays but does nothing.
• The bell shows on every page with that header but does nothing where no feed message shows. Targeting rules can't remove it, though a Liquid condition in your theme can.
• Where a feed message shows, Atomato applies your current Bell styling and Show on this device settings, but not your icon, so copy the code again after changing Custom bell icon.
• Custom CSS doesn't reach a pasted bell, so style it from your theme.
• The store preview shows your current icon on both devices and adds a bell if it can't find your code, so check your live store.