How do the Design Settings work in the Sales Notification popups?

Notification Designs

The Notification Designs feature in the ToastiBar App allows you to choose a design for your pop-ups based on your selected ToastiBar App plan (Free or Paid). This feature ensures that you can personalize the appearance of your pop-ups to align with your store’s branding and aesthetic preferences.

Basic Notification Designs

All the Basic Notification Designs in the ToastiBar App are available for all plans, including the Free plan. This ensures that every store owner, regardless of their chosen plan, can access and utilize these fundamental design options to enhance the visual appeal of their pop-ups.

Additional Notification Designs

All the Additional Notification Designs in the ToastiBar App are exclusively available with the paid plans. These advanced designs provide enhanced customization options, allowing store owners to create more visually appealing and engaging pop-ups to boost their store’s performance.

Festival Notification Designs

All the Festival Notification Designs in the ToastiBar App are available for all plans, including the Free plan. These designs enable store owners to add a festive touch to their notifications, making them more engaging and relevant during special occasions and holidays.

Desktop Settings

In the ToastiBar App, you can customize the Popup Display Positioning, Popup Visual Appearance, and Popup Layer and Stacking for both Desktop and Mobile devices. These settings allow store owners to control where and how the popups appear on their store, ensuring a seamless and visually appealing experience for visitors across all devices.

Display Positioning

Top/Bottom: Using this option, you can set the customized position of the popup for the desktop screen. Here, you can set the pixels you want to skip from the Top/Bottom edge of the screen.

Note: If the Display direction is Top, then the app will skip pixels from the top edge. And if the Display direction is Bottom then the app will skip pixels from the bottom edge.

Left/Right: Using this option, you can set the customized position of the popup for the desktop screen. Here, you can set the pixels you want to skip from the Left/Right edge of the screen.

Note: If the Display direction is Top/Bottom Left, then the app will skip pixels from the left edge. And if the Display direction is Top/Bottom Right, then the app will skip pixels from the right edge.

Visual Appearance

Display direction: You can set the position of the pop for the desktop device as per your choice. You can select any one position from Bottom left, Bottom right, Top left, and Top right.

Animation type: From here, you can choose the animation type for the desktop device to display a notification popup like Fade-In-Out, Slide from Left/Right, and Slide from Top/Bottom.

Product Image Quality: Using this option, you can select the product image quality to display in the pop-up for the desktop device. The option offers Original, Large, Medium, Small, and Customized. With Customized, you can specify customized size (width) in pixels. Product Image Quality will offer you the option to optimize your product image for desktop. We are recommending the Large or Medium image quality for Desktop devices.

Layer and Stacking

Z-index: This option is useful when you have some other apps or banners that may overlap the notification pop-up. If this happens, then just increase or decrease the value of the Z-index until the pop-up comes before other containers [i.e. widget]. Here, you can specify the value in pixels.

Mobile

Display Positioning

Top/Bottom: Using this option, you can set the customized position of the popup for the mobile screen. Here, you can set the pixels you want to skip from the Top/Bottom edge of the screen.

Note: If the Display direction is Top, then the app will skip pixels from the top edge. And if the Display direction is Bottom then the app will skip pixels from the bottom edge.

Visual Appearance

Display direction: You can set the position of the pop for the mobile device as per your choice. You can select any one position from the Top or Bottom.

Animation type: From here, you can choose the animation type for the mobile device to display a notification popup like Fade-In-Out and Slide from Top/Bottom.

Product Image Quality: Using this option, you can select the product image quality to display in the pop-up for the mobile device. The option offers Original, Large, Medium, Small, and Customized. With Customized, you can specify customized size (width) in pixels. Product Image Quality will offer you the option to optimize your product image for mobile. We are recommending the Medium or Small image quality for Mobile devices.

Layer and Stacking

Z-index: This option is useful when you have some other apps or banners that may overlap the notification pop-up. If this happens, then just increase or decrease the value of the Z-index until the pop-up comes before other containers [i.e. widget]. Here, you can specify the value in pixels.

Personalization Settings

In the ToastiBar App, the Personalization Settings option allows you to customize the colors of the popup's content and background, ensuring it aligns with your store's branding.

Content Customization

Product Name Color: Configure the color of the product name displayed in the popup, with the option to set it in normal or bold style.

Message Color: Customize the color of the static message text displayed in the popup, with the ability to apply normal or bold styles.

Additional Customization

Timeago Color: Adjust the color of the time displayed in the popup (e.g., "X minutes ago") and apply either normal or bold styles.

Notification Background Color: Set the background color of the notification popup to match your store's aesthetic.

Remember to click the Save button after making any changes to ensure they are applied successfully.

Custom CSS (Optional)

The Custom CSS option in the ToastiBar App is an advanced feature designed for customers who have developers or designers familiar with CSS. In most cases, you won't need to make any changes in this section. However, if you require extensive customization for various notifications such as Sales Notifications, Cart Notifications, Online Visitors Notifications, Recent Visitors Notifications, Product Visitors Notifications, Product Reviews Notifications, Order Summary Notifications, Low Inventories Notifications, Cart Summary Notifications, or any other frontend part of the ToastiBar app, you can include specific CSS classes here.

This allows for deeper control over the look and feel of your notifications, enabling you to match them more closely with your website's design. If you are unfamiliar with CSS, it is recommended to seek assistance from a developer or designer.

Updated on: 28/01/2025