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)
Last updated