Notification Bubble

The notification bubble is the small indicator that appears over your cart icon and wishlist icon, showing the number of items a user has added. It’s a quick way to grab attention and make the shopping experience easier.

With the Materia theme, you can fully customize how these bubbles look to match your brand.

---

🟠 Notification Bubble Customization

Bubble Notification Background Color

Set the background color of the notification bubble. Example: #F43121 (a vibrant red for high visibility)

---

Notification Bubble Text Color

Choose the color of the number inside the bubble. Example: #FFFFFF (white for maximum contrast)

---

Bubble Notification Width & Height

Adjust the size of the notification bubble.

• Width: 1.8 (rem units, not pixels)

• Height: 1.8 (rem units) Increase or decrease these values to make the bubble more subtle or prominent.

---

Bubble Notification Top Position

Control the vertical placement of the bubble over the icon.

• Use positive or negative values to fine-tune its alignment

• Example: A higher value will move the bubble further down over the icon

---

Where Does This Apply?

• Cart Bubble: The small circle with a number on your cart icon

• Wishlist Bubble: The notification bubble on the wishlist icon (if enabled)

---

💡 Tips

• Use a bright background color and contrasting text color for clear visibility

• Test your bubble size and position to make sure it doesn’t cover or overlap the icon

• Try matching your notification bubble color to your brand’s main accent color for consistency