Atomato storefront reference for developers

This reference lists what Atomato adds to a Shopify storefront: elements and data attributes to target when styling or testing, browser storage, cart and order data, events and console messages.

How Atomato loads

The app embed adds div#atomato-app at the end of the body, with product, currency and signed-in customer details as data attributes, plus a small stylesheet for the header bell and Sticky alert tab.

After DOMContentLoaded, a loader sets data-atomato-js-loaded on that div and adds the main script with async. The script asks Atomato's app proxy on your store, /apps/atomato_proxy/getNotiCampaigns, for campaigns based on the page path, query string, device, language and signed-in customer.

The device is set once, on page load: 740px wide or narrower is mobile. The bell and feed switch to desktop layout at 740px, so at exactly 740px a shopper gets mobile campaigns in the desktop layout.

Where each element lives

• In your page: the header bell, button[data-notifeed-bell][data-notifeed-bell-header], from Atomato or your pasted snippet, and the Sticky alert tab, button[data-sticky-button].
• In an open shadow root on [data-atomato-notifeeds-host]: the feed, NotiSell cards, NotiEmail and NotiSMS steps and the floating bell, inside a second #atomato-app.
• In an open shadow root on [data-notipop-toasters]: NotiPop messages.

Scripts can reach inside with element.shadowRoot, but your theme's CSS selectors can't. See styling Atomato with custom CSS for what the Custom CSS field reaches.

Data attributes and states

• [data-notifeed-bell] is empty, desktop or mobile, following Show on this device. A pasted snippet keeps its copied value. On bells Atomato adds, the badge, [data-notifeed-bell-count], is header or float.
• [data-notifeed-inner] gets open while the feed is open.
• [data-notifeed-item] holds the campaign type: notifeed, notisell, or notiemail for NotiEmail and NotiSMS. data-notifeed-id holds the message's ID, and is-new marks unseen messages.
• [data-notisell-products] is preview in the feed row, and stacked or grid in the opened message. After an add to cart click, [data-notisell-pr-button] is loading, then done.
• [data-notipop-toast] holds the message's ID, and data-state is created, mounted, invisible or deleting.
• [data-sticky-button] holds the NotiPop position and gets data-sticky-button-show while visible.

Browser storage

Local storage holds:

• notifeed_seen_ids, notiemail_seen_ids, notisell_seen_ids and notipop_seen_ids: seen messages.
• atomato_seen_ plus the campaign type: metrics already counted.
• atomato_notiemail_progress: the email or phone number and code from a signup that reached a Success step with a discount, dropped after 30 days.
• atomato_revenue_session: the click Atomato's pixel follows for revenue.

Session storage holds NotiSell product details under atomato_cache_ keys for 5 minutes, and the pixel's atomato_queue and atomato_revenue_queue. Clear site data or use a private window to test as a new shopper.

Cart and order data

When Add product to the cart is on, the NotiSell button adds one unit through Shopify's cart/add.js with the hidden line item property _notisell set to the NotiSell message's ID. Atomato's discount function only discounts lines with the matching _notisell, so the same product added another way isn't discounted.

Orders with a _notisell line are tagged notisell and notisell- plus that ID, the tags used to track NotiSell orders.

Cart rules check again when your theme calls fetch on /cart/add, /cart/change or /cart/update. Changes made with XMLHttpRequest wait for the next page load.

Events and internal objects

Atomato fires no DOM events. Its pixel records two custom events published through Shopify's customer events: atomato:interaction_batch for impressions, clicks, hovers, dismissals, adds to cart and signups, and atomato:click-attribution for clicks and NotiSell adds to cart that can start revenue tracking. On Free, only impressions and clicks are published, and none from the theme editor.

The script also creates window.Atomato and window.fetchCart, and wraps window.fetch to see cart changes. These objects and events are internal, not a supported API, and can change in any update, so don't build on them.

Console messages

Most Atomato console errors start with [Atomato], such as [Atomato] Notifeed error: with a status code when the campaign request fails. Failing code from a message logs a warning ending in custom CTA function error:, as running your own JavaScript explains. Include these lines when you contact the Atomato team.