Use your own SVG bell icon

You can replace Atomato's notification bell with your own icon by pasting its SVG code under Settings > NotiFeed styling. Set the bell colors first: Atomato still colors your icon with them, and their fields lock once the icon is in.

Before you start

Custom icons need a plan that removes Atomato branding: on Free (the app also calls it Starter), SVG code is locked and shoppers see Atomato's bell.

You need the icon as SVG code, from <svg to </svg>, of up to 5,000 characters: longer code gets cut off. Keep its viewBox attribute, or the drawing won't scale to the bell and can spill outside it.

Atomato adds the code to your store exactly as pasted, without checking it, so use plain SVG from a source you trust, with no scripts or <style> block.

Set the bell colors first

Once your icon is in, Bell fill, Bell outline and Bell thickness lock, but Atomato keeps applying their values to it:

• Paths are filled with Bell fill, whatever fill your SVG gives them, unless they sit in a group (g) with its own fill. A multi-color icon made of paths shows in one color.
• Paths get an outline in Bell outline at Bell thickness, measured in your icon's drawing units, not screen pixels, so it looks thinner on a larger viewBox.
• Other shapes, such as circle, rect or line, keep the fill and outline your SVG gives them. With no fill set, they use Bell fill.

Set these under Display behavior, on both the Desktop and Mobile tabs under Visibility, before you paste:

• For a solid icon, set Bell fill to your color and Bell outline to the same color, or to transparent for no outline.
• For a line icon, set Bell fill to transparent and Bell outline to your color, then choose a Bell thickness.

To make a color transparent, drag the transparency slider in its color picker all the way and let go when the field reads transparent. Typing the word in doesn't work.

To change them later, cut everything from SVG code, change the colors, paste the code back and click Save.

Add your icon

1. In Settings > NotiFeed styling, click Expand on Visual Appearance.
2. Under Custom bell icon, click SVG code and paste your code into the larger box that opens.
3. Click Save.

The preview beside the settings shows your icon only on a floating bell. For a header bell, use Preview on desktop and Preview on mobile, then check your live store. Change how the feed and bell look covers the rest of this page.

How Atomato sizes and animates the icon

• The bell is a button as wide and tall as Icon size (24 to 60), with 6px of padding. Your icon is scaled to fit inside, up to 25 by 26 pixels, so from an Icon size of 38 up, only the button grows.
• While the badge shows unread messages, the icon swings side to side and settles, on a 3 second loop.
• The badge sits over the button's top right corner, so keep that corner of your icon simple.
• A header bell has no background or shadow. A floating bell is a shadowed circle in the Background color from Bell styling.

Where your icon shows

Your icon replaces the floating bell and any header bell that Atomato places for you, with Choose bell placement or a CSS selector.

With Add using snippet, the icon is part of the code you copy into your theme. Atomato still applies your bell colors and Icon size but never swaps the icon, so after you change or remove it, click Copy code and replace the old snippet. See Place the bell with a CSS selector or a theme snippet.

The Sticky alert tab that reopens closed NotiPop messages always shows Atomato's small bell.

For more with Custom CSS, see Style the bell, feed and NotiSell cards with custom CSS: what it reaches depends on how the bell is placed.