Change how the feed and bell look

You set the look of the bell, the feed, NotiSell product cards and NotiPop messages once, under Settings, and it applies to every campaign. There are three tabs: NotiFeed styling for the bell and the feed, NotiSell styling and NotiPop styling.

Each tab has sections you open one at a time with Expand, and a live preview on the right. Click Save when you're done, and save before you switch tabs: switching reloads the saved style, so unsaved changes are lost.

Style the feed

NotiFeed styling controls the feed that NotiFeed, NotiSell, NotiEmail and NotiSMS messages appear in. Its Display behavior section holds the bell's placement, visibility and styling, covered in Add the notification bell to your store. The other sections style the feed itself:

• Colors: the feed's Background, Title, Text, Alert & arrow (the dot on unread messages and the arrow on messages that open) and Border, plus the button's Background and Text. Reset puts these colors back to the defaults.
• Visual Appearance: Font family, Custom bell icon and Feed roundness, a Radius from 0 to 20 for the feed's corners.
• Custom CSS: up to 500 characters of your own CSS in Add custom CSS, for the bell and the feed.

For Font family, type the name of a font your theme already loads, for example Roboto. Atomato doesn't load fonts itself, so if the theme doesn't have it, the feed uses a standard font.

To use your own bell, paste its SVG code (up to 5,000 characters) into SVG code. It replaces the default bell and locks Bell fill, Bell outline and Bell thickness, which still color it, so set them first. See Use your own SVG bell icon.

When Atomato places a header bell for you, it also adds your custom CSS to the store page, not only the feed, so target Atomato's own elements, such as [data-notifeed-bell], rather than general selectors like button. See Style the bell, feed and NotiSell cards with custom CSS.

On NotiFeed styling and NotiSell styling, click Preview on desktop or Preview on mobile to see unsaved changes on a copy of your store's home page. See Preview a campaign before it goes live.

Style NotiSell product cards

NotiSell cards sit inside the feed, so they follow NotiFeed styling. On NotiSell styling, Colors sets each card's Title, Card background, Price and Compare price, plus the button's Background and Text. Under Visual Appearance, choose Stacked (Recommended) or Grid. A message with one product always shows stacked.

Style NotiPop messages

On NotiPop styling, Display behavior sets what happens after a shopper closes a NotiPop:

• Sticky alert tab leaves a small tab on screen to reopen it. Set its Background color and Bell color under Tab styling.
• Hide it completely means a closed NotiPop can't be reopened.

Under Layout, Default stacks several NotiPop messages and spreads them out when a shopper moves the pointer over them. Expanded always shows them spread out. Desktop position puts them at the Top right or Top left, either Below header or as a Corner stack. On phones, NotiPop always appears full width at the bottom.

Colors covers the NotiPop's Background, Title and Text, its Close button and its button, with its own Reset. Visual Appearance has Font family and Toast roundness, a Radius from 0 to 20. This tab has no store preview.

Change the look from a campaign

In the NotiFeed, NotiPop and NotiSell editors, the Design tab opens the same settings in a window. Saving there changes the look for all your campaigns, not only the one you're editing. Choose bell placement is only on the Settings page. NotiEmail has no Design tab: its signups use NotiFeed styling.

What Free includes

On Free (the app also calls it Starter), Font family and SVG code are locked, and your store shows the default bell. Scale and Enterprise+ unlock both. Free also shows a Powered by line at the bottom of the feed: see Can I remove the Powered by Atomato branding?

If you move from a paid plan to Free, the colors under Colors on all three styling tabs go back to the defaults. See Change your plan.