Do your bell and feed look like your store? A design check before Black Friday

Shoppers open your feed from the bell in your header, and in Black Friday week that bell carries your sale messages. If that bell looks like it came from a different website, it is easy to miss.

This is a design check for the bell, the feed, NotiSell cards and NotiPop messages: where each setting lives, which ones need a paid plan, and what to check before your sale theme goes live.

Put the bell where shoppers already look

In Atomato, go to Settings, then NotiFeed styling, and open Display behavior. Under Where the bell appears, choose Display in header to place the bell in your header, or Floating icon for a bell fixed to the screen as shoppers scroll.

For a header bell, click Choose bell placement, click the element the bell should sit next to, such as your cart icon, then click Next: Choose mobile placement, pick the mobile spot and click Save placement. Then click Save on the settings page. Nothing changes on your store until you do.

Match the bell to your header icons

Under Bell styling, you set the bell's fill and outline colors, the badge color and badge text color, the line thickness and the icon size. These settings are separate for desktop and mobile, so set them on both the Desktop and Mobile tabs.

Match your cart and account icons. If they are thin dark lines, give the bell the same outline color and a similar thickness. If your header is dark, use a light bell. Pick a badge color that stands out against your header. A floating bell also has a Background color for its circle.

Give the feed your colors and font

Colors controls the feed's Background, Title, Text, Alert and arrow (the dot on unread messages and the arrow on messages that open) and Border, plus the button's Background and Text. Colors work on every plan, including Starter.

Visual Appearance holds Font family and Feed roundness, a radius from 0 to 20 for the feed's corners. Font family is available on Scale and Enterprise+. Type the name of a font your theme already loads. Atomato doesn't load fonts itself, so a font your theme doesn't have falls back to a standard one.

If you run NotiSell on Scale or Enterprise+, NotiSell styling sets each card's title, background, price, compare price and button colors, and lets you choose Stacked or Grid cards.

Your own bell icon and the Powered by line

On Scale and Enterprise+, you can replace the default bell with your own icon. Paste its SVG code, up to 5,000 characters, under Visual Appearance, then Custom bell icon. Keep the viewBox attribute so it scales properly.

Set Bell fill, Bell outline and Bell thickness before you paste. Those fields lock once the icon is in, but Atomato still colors your icon with them. Use your own SVG bell icon explains how each shape picks up those colors.

On Starter, the custom icon and Font family are locked, and the feed ends with a small Powered by Atomato line. Scale and Enterprise+ remove that line automatically. Compare what each plan includes on the pricing page.

Check how NotiPop messages look

NotiPop has its own tab, NotiPop styling, with its own Colors and Visual Appearance, and no store preview. Its Font family is also Scale and Enterprise+ only. On a computer, Desktop position puts messages at the top right or top left, below the header or as a corner stack. On phones, NotiPop always shows full width along the bottom of the screen.

Under Display behavior, decide what happens after a shopper closes a NotiPop. Sticky alert tab leaves a small tab on screen to reopen it, with its own background and bell color. It always shows Atomato's small bell, even with a custom icon. Hide it completely means a closed NotiPop can't be reopened.

A worked example: a candle store's header

Here is a made-up example of a store with a cream header, thin black line icons, a serif font from its theme and square buttons.

Before: a floating bell in the bottom corner in the default colors, a light grey feed with rounded corners and a standard font, and a dark button that doesn't match the brand color.

After:

• Display in header, with the bell placed just before the cart icon on desktop and mobile.
• Bell outline in the same black as the other header icons, with a thin Bell thickness and an Icon size that matches the cart icon, set on both tabs.
• Feed Background in the header's cream, Title and Text in black, and the button in the store's brand color.
• Feed roundness at 0 to match the square buttons.
• On Scale, Font family set to the serif the theme already loads.
• One line of Custom CSS to add space between the bell and the cart icon.

Custom CSS and a Black Friday theme switch

Custom CSS, at the bottom of NotiFeed styling, takes up to 500 characters and works on every plan. Target Atomato's own elements, such as [data-notifeed-bell], not general selectors like button, because when Atomato places a header bell for you, it also adds your Custom CSS to the store page itself, where your rules can match anything. Custom CSS never reaches NotiPop messages or a bell pasted in as a theme snippet.

If you plan to publish a sale theme with Theme Launcher, remember that your styling and Custom CSS are saved once for the store, not per theme, while the app embed is switched on theme by theme. Before the event, turn on the Atomato app embed in every theme the campaign will publish. If the sale theme has a different header, type a selector for each theme's cart icon under Add using CSS selector, separated by commas. Selectors that match nothing are skipped. Running Choose bell placement afterwards replaces your list, and with Add using snippet, the sale theme needs the snippet too.

Preview, save and check the live store

Save before you switch between styling tabs, because switching reloads the saved style and unsaved changes are lost. Use Preview on desktop and Preview on mobile on NotiFeed styling and NotiSell styling to see your changes on a copy of your home page. They load your live theme, so check an unpublished sale theme with Preview in Online Store, Themes.

The preview works even when the app embed is off, so after saving, open your live store on a computer and a phone, on a page where a feed campaign is active. The Black Friday on-site testing checklist covers the rest of your pre-sale checks.

What this does not do

• Styling applies to every campaign at once. You can't give one campaign its own look.
• Atomato doesn't load fonts, and on Starter the font and custom bell icon are locked.
• Custom CSS doesn't reach NotiPop messages or a snippet bell. Style a snippet bell from your theme.
• If you move from a paid plan to Starter, the colors on all three styling tabs go back to the defaults, the bell returns to the default icon and the Powered by line comes back. Check your Custom CSS after any plan change too.
• Atomato shows on your Online Store theme pages, not on Shopify checkout, the thank-you page or POS.

Every setting on this page is covered in Change how the feed and bell look.

Next step

Open Settings, then NotiFeed styling, and set the bell placement, then the bell colors on both the Desktop and Mobile tabs. Then check NotiPop styling, preview, save and look at your live store on a phone. Once the look is settled, build your sale messages with the Black Friday Cyber Monday plan.

Install free on Shopify