Adjusting Size and Shape

NotifyBubble lets you fine tune the dimensions and corner styling of your notification panel and button to match your store's design aesthetic.

Box Width

Controls the width of the notification panel in pixels.

• Default: 360px
• Minimum: 200px
• Maximum: 600px

When to Adjust

• Smaller widths (200 to 300px) work well for short messages with minimal content
• Standard widths (300 to 400px) are ideal for most notifications with a title, paragraph, and button
• Larger widths (400 to 600px) are useful when you have more detailed content, tables, or multiple sections

Keep in mind that on mobile devices, the notification panel will automatically adapt to the screen width regardless of this setting.

Box Height

Controls the maximum height of the notification content area in pixels.

• Default: 300px
• Minimum: 100px
• Maximum: 800px

When to Adjust

• Shorter heights (100 to 200px) are good for quick, single paragraph messages
• Standard heights (200 to 400px) work for most use cases
• Taller heights (400 to 800px) are useful when you have detailed content that would otherwise require scrolling

If your content exceeds the box height, visitors will be able to scroll within the notification panel.

Box Border Radius

Controls how rounded the corners of the notification panel are.

• Default: 12px
• Range: 0 to 24px
• 0px gives sharp, square corners
• 12px (default) gives a modern, softly rounded look
• 24px gives very rounded, pill like corners

Design Guidance

• Match the border radius to your store's design language
• If your store uses sharp corners on buttons and cards, use a lower value (0 to 4px)
• If your store has a modern, rounded aesthetic, use the default or higher (12 to 24px)

Button Border Radius

Controls how rounded the CTA button corners are within the notification.

• Default: 6px
• Range: 0 to 24px
• 0px gives a sharp, rectangular button
• 6px (default) gives subtle rounding
• 24px gives a fully rounded, pill shaped button

Tips

• Generally, the button border radius should be equal to or less than the box border radius for visual harmony
• Pill shaped buttons (high border radius) tend to feel more modern and clickable
• Square buttons (low border radius) feel more formal and structured

Putting It All Together

Here are some common combinations:

Style	Width	Height	Box Radius	Button Radius
Compact and modern	320px	250px	16px	8px
Wide and informative	500px	400px	12px	6px
Minimal and clean	280px	200px	8px	4px
Bold and rounded	400px	300px	24px	24px
Classic and sharp	360px	300px	0px	0px