Style the bell, feed and NotiSell cards with custom CSS

Custom CSS lets you restyle the Atomato feed, NotiSell product cards and the bell with your own rules. It reaches everything inside the feed and a header bell that Atomato places for you, but never NotiPop messages or a bell you pasted into your theme as a snippet.

Where to add Custom CSS

1. In Atomato, click Settings in the sidebar, then NotiFeed styling.
2. Click Expand next to Custom CSS, the last section on the page.
3. Click the Add custom CSS field and type your rules in the larger editor that opens. It takes up to 500 characters.
4. Click Save.

Custom CSSUse custom CSS to tweak how your widget looks - from the notification bell to the feed layout and styles. Collapse

Add custom CSS [data-notifeed-bell] {
  padding: 0;
}38/500

Custom CSS works on every plan, including Free (the app also calls it Starter). For colors, fonts and bell styling, use the settings in Change how the feed and bell look first.

What Custom CSS can and can't reach

Atomato draws the feed in its own layer, so your theme's stylesheet doesn't reach inside it. Custom CSS is loaded inside that layer, so it reaches the feed and its messages, NotiSell product cards, NotiEmail and NotiSMS signup steps, and the floating bell.

A header bell sits in your page instead. When Atomato places it, with Choose bell placement or Add using CSS selector, it also adds your Custom CSS to the page itself, so your rules reach the header bell and anything else on the page they match. With Add using snippet, it doesn't, so Custom CSS can't style your pasted bell: put those rules in your theme's stylesheet. Place the bell with a CSS selector or snippet explains both setups.

NotiPop messages have a separate layer that carries only Atomato's own styles, so Custom CSS never reaches them. Use NotiPop styling for their look.

Custom CSS only loads on pages where a feed campaign shows (NotiFeed, NotiSell, NotiEmail or NotiSMS), so a page with only a NotiPop gets none of it.

2

NotiPop Flash sale ends tonight20% off sitewide.Shop now

NotiEmail Stay in the loopGet updates on new launches, offers, and store news.

NotiSellDo not miss our best sellers.

NotiFeed Free shipping over $50Ends Sunday. Applies to every order over $50.

Element names to target

Atomato's own feed styles all start with #atomato-app. Start your feed rules the same way, and target Atomato's element names rather than your theme's class names. The most useful are below, and the Atomato storefront reference for developers has the full list.

• [data-notifeed-bell] for any bell, [data-notifeed-bell-header] for the header bell only, and [data-notifeed-bell-count] for the unread badge
• [data-atomato-notifeeds] for the feed box
• [data-notifeed-item] for a message in the feed list, with [data-notifeed-title] inside it
• [data-notisell-pr] for a NotiSell product card, with [data-notisell-pr-img] and [data-notisell-pr-comp-price], the crossed-out price, inside it

Avoid general selectors such as button, svg or header: with a header bell placed for you, they would restyle the rest of your store too. Leave the bell's display alone as well, because Show on this device relies on it.

2

Back Do not miss our best sellers!Enjoy 10% off all best sellers automatically. Linen Overshirt$45.00 $40.50MAdd to cart Canvas Backpack$95.00 $85.50One sizeAdd to cart

Examples you can copy

These two only work for a header bell that Atomato places. Remove the padding inside the bell so the icon fills more of it:

button[data-notifeed-bell][data-notifeed-bell-header] { padding: 0; }

Add space between the bell and the icon to its right, such as your cart icon:

button[data-notifeed-bell][data-notifeed-bell-header] { margin-right: 8px; }

These work in the feed with any bell setup. Make message titles in the feed list bolder:

#atomato-app [data-notifeed-list] [data-notifeed-item] [data-notifeed-title] { font-weight: 700; }

Hide the crossed-out price on NotiSell cards:

#atomato-app [data-notisell-pr-comp-price] { display: none; }

Test, undo and keep it working

• Preview on desktop and Preview on mobile show your Custom CSS before you save. The preview can show more than your store will: it applies your rules to the whole page even with Add using snippet, and shows sample messages when no feed campaign is active.
• After saving, check your live store on a computer and a phone, on a page with an active feed campaign.
• To undo, clear the field and click Save.
• Custom CSS is saved for your store, not per theme. After a theme change, rules using your old theme's class names may stop matching, while Atomato's element names stay the same.
• Moving to Free, covered in Change your plan, can switch NotiFeed styling back to a standard look that may not keep your Custom CSS, so check the field after any plan change.