SalesPulse Customizing Styles

The Custom CSS Editor allows you to add custom styling to your sales notifications, announcement bars, and popup campaigns without modifying your theme code.

Overview

Access the Custom CSS Editor from the sidebar navigation by clicking Custom CSS.

Feature Tabs

The Custom CSS Editor has separate tabs for each feature:

• Sales Notifications – Style your sales notification popups
• Announcement Bars – Style your announcement bars
• Popup Campaigns – Style your popup campaigns

Each tab has its own CSS textarea, allowing you to write feature-specific styles.

How to Add Custom CSS

1. Navigate to Custom CSS in the sidebar
2. Select the feature tab you want to style
3. Enter your CSS code in the textarea
4. Click Save to apply your changes
5. View your store to see the changes in effect

Best Practices

Use !important

Since the app’s default styles may have high specificity, use !important to ensure your custom styles are applied:

.gp-sales-notification {
  background-color: #fff !important;
}

Test on Multiple Devices

After adding custom CSS, test your changes on:

• Desktop browsers
• Mobile devices
• Different screen sizes

Keep It Simple

Start with small changes and test incrementally. Complex CSS can sometimes conflict with the app’s functionality.

Troubleshooting

CSS Not Applying

1. Check for typos: Ensure your CSS syntax is correct
2. Use !important: Override default styles with !important
3. Clear cache: Clear your browser cache and refresh
4. Correct tab: Make sure you’re editing CSS in the correct feature tab

CSS Breaking Layout

1. Remove problematic styles: Comment out or remove recently added CSS
2. Inspect elements: Use browser DevTools to identify conflicting styles
3. Test incrementally: Add styles one at a time to isolate issues

Changes Not Saving

1. Click Save: Ensure you click the Save button after making changes
2. Check connection: Verify your internet connection
3. Refresh page: Reload the page and try again