Design Notification Center

You can design your Notification Center under Style on the listing page.

To reach there, 

1. Navigate through Experience > Message > Notification Center. Click on Template Styles.

2. You need to select the template you would like to use. You can either position it to an element or display it as on-page. Then, you can start editing its style by setting the placement.

3. The main element is the first element that you can add animations on. You can click on each and see how it looks like.

The icon can be seen when the Notification Center is on or when it is minimized. You can set another background image. You can upload an image or select one from the Image Library to display when the center is minimized. You can change the shadow color, its position and add blur onto that.

4. If you would like to track the clicks by a different name, you can set a custom Google Analytics Join event name.

5. Notification count's fill color and text color can be updated too.

6. When it comes to the layout, you can update the fill color of the top bar and its background color and set shadow following the same steps on the icon.

7. If you would like to display Notification Center on different languages, you can set the translations for each language. If you operate in different languages, they need to create separate notifications for each language. It is also crucial to add Translations to the following template elements:

• Notification Center Title (Discover the Deals)
• Unread Status Text (New message)

8. Text properties including font family, text color, font size, font weight, text decoration and alignment can be updated.

9. You can update the look of the notification item as well. The fill color and shadow can be edited.

10. You can update the font family, text color, font size, font weight, text decoration and alignment on the message title and description.

11. Lastly, you can add translations for the "New" badge along with the translations of the title.

12. And you can edit the fill color and text properties to finish editing your design.

Now, you can create your Notifications.