Sales Notification Design

This guide explains how to customize the visual appearance of your sales notifications, including templates, colors, dimensions, animations, and seasonal themes.

Accessing Design Settings

1. Navigate to Sales Notifications in the SalesPulse app
2. Click the Design tab (selected by default)

Template Library

Choose from 15 pre-designed templates to quickly style your notifications.

Applying a Template

1. Scroll to the Choose from templates section
2. Click on any template thumbnail
3. The template styles are applied immediately
4. View the change in the live preview
5. Customize individual settings as needed

Appearance Setup

Configure individual color settings to match your brand.

Color Settings

How to Change Colors

1. Click the Choose Color button next to the setting
2. Use the color picker to select a color
3. The preview updates in real-time

Color Contrast Tips

• Ensure text is readable against the background
• Use dark text on light backgrounds
• Use light text on dark backgrounds
• Test on both desktop and mobile

Custom Dimensions

Override the default notification size with custom dimensions.

Enabling Custom Dimensions

1. Find the Custom Dimensions section
2. Check Enable custom dimensions
3. Configure width and height settings

Width Settings

Height Settings

Mobile Settings

Check Use same dimensions for mobile to apply desktop dimensions to mobile devices.

If unchecked, mobile devices will use responsive default dimensions.

Animation Settings

Add smooth motion effects when notifications appear and disappear.

Enabling Animations

1. Find the Animation Settings section
2. Check Enable custom animations
3. Configure animation options

Entry Animation

How notifications appear on screen:

Exit Animation

How notifications disappear:

Animation Timing

Animation Easing

Controls the acceleration curve of animations:

Seasonal Themes

Automatically change notification appearance based on seasons and holidays.

Enabling Seasonal Themes

1. Find the Seasonal Themes section
2. Check Enable seasonal themes
3. Configure theme and date range

Available Themes

Configuring Date Range

1. Select a theme from the Select Theme dropdown
2. Enter Start Date in MM-DD format (e.g., 12-01)
3. Enter End Date in MM-DD format (e.g., 12-25)

The theme automatically switches back to default after the end date.

Live Preview

The bottom of the Design settings page shows a live preview of your notification.

Preview Features

• Real-time updates: Changes appear instantly
• Product image: Shows an actual product from your store
• Customer info: Displays sample location data
• Time stamp: Shows relative time format
• Close button: Visible for testing placement

Preview Example

The preview shows a notification like:

[X]
[Product Image]
Someone from Louisville, United States purchased
The Collection Snowboard: Hydrogen
About 1 day ago

Design Best Practices

Brand Consistency

• Match notification colors to your store theme
• Use your brand’s accent color for product links
• Keep the design cohesive with your overall store aesthetic

Readability

• Ensure sufficient contrast between text and background
• Don’t make text too small
• Test readability on different devices

Non-Intrusive Design

• Avoid overly bright or flashy colors
• Keep animations smooth and quick
• Ensure close button is visible and accessible

Mobile Optimization

• Test designs on actual mobile devices
• Ensure notifications don’t block important content
• Keep notifications appropriately sized for small screens

Seasonal Considerations

• Plan seasonal theme dates in advance
• Test seasonal themes before they go live
• Ensure seasonal themes still match your brand

Troubleshooting

Colors Not Saving

If colors revert after saving:

1. Ensure you click the Save button
2. Wait for the save confirmation
3. Refresh the page to verify

Animations Not Working

If animations don’t appear:

1. Check that Enable custom animations is checked
2. Ensure animation duration is not set to 0
3. Test in an incognito browser window

Seasonal Theme Not Switching

If the seasonal theme doesn’t activate:

1. Verify the date range is correct (MM-DD format)
2. Check current date is within the range
3. Ensure Enable seasonal themes is checked