📚 User Guide

Dashboard Overview

When you open the app, you'll see a structured dashboard divided into sections:

Each section has a blue "Save Changes" button at the bottom. Your settings are saved to your store's database immediately when you click it.

Managing Announcements

The announcements section is where you add and edit the messages that scroll across your bar.

Adding a New Announcement

1. Click the + Add Announcement button
2. A new text field appears with the number assigned (e.g., #1, #2, #3)
3. Type your announcement text or paste from a document
4. Click Save Changes at the bottom

Formatting with Rich Text

You can make your announcements more engaging with formatting:

• Bold Text: Highlight text and click the B button (or select text and use Ctrl+B)
• Links: Highlight text and click the 🔗 button, then enter a URL
• Emojis: Add emojis directly (e.g., 🌟, ❤️, 💬) for visual appeal

Editing an Announcement

1. Click inside the text field of the announcement you want to edit
2. Make your changes (add/remove text, format, etc.)
3. Click Save Changes at the bottom

Deleting an Announcement

1. Find the announcement you want to remove
2. Click the red × button on the right side of the announcement
3. The announcement is removed immediately
4. Click Save Changes to confirm

Example Announcements

Customizing Appearance

Control the visual design of your announcement bar with color and size settings.

Background Color

• Solid Color: Click the color swatch to pick a single color
• Gradient: Toggle to "Gradient" mode and select two colors for a smooth transition
• Typing Colors: Enter hex codes directly (e.g., #3c64f4)

Text Color

Choose the color of your announcement text. High contrast ensures readability:

• Light backgrounds: Use dark text (black, dark blue, dark gray)
• Dark backgrounds: Use light text (white, light gray, yellow)

Font Size

• Range: 10px to 48px
• Default: 16px
• Recommendation: 14-18px for mobile readability
• Larger text makes announcements more prominent but takes more space

Bar Height

• Range: 24px to 120px
• Default: 40px
• Smaller bars are less intrusive; larger bars are more prominent
• Adjust based on your site design and announcement font size

Animation Settings

Control how your announcements move across the screen.

Direction

Choose which direction announcements scroll:

• Left: Announcements scroll from right to left (default, most common)
• Right: Announcements scroll from left to right
• None: No animation (bar is static, useful for important fixed announcements)

Speed

• Range: 1 to 100
• Default: 20
• Important: Higher values = SLOWER animation
• Use lower values (5-10) for fast scrolling
• Use higher values (30-50) for slow, readable scrolling

Text Gap

• Range: Any pixel value
• Default: 100px
• Controls spacing between announcements as they scroll
• Larger gaps provide breathing room between messages
• Smaller gaps create a tighter, more continuous flow

Pause on Hover

• Enabled: Animation pauses when users hover their mouse over the bar
• Disabled: Animation continues regardless of hover
• Recommended: Enabled for better readability

Advanced Options

Saving & Publishing

1. After making changes, click Save Changes at the bottom
2. Your settings are saved immediately to your store
3. The bar updates on your storefront within 30-60 seconds

Testing Changes

Always test your changes before finalizing:

1. Save your settings
2. Open your storefront in a new tab
3. Verify the bar appears correctly with your changes
4. Test on mobile devices (responsive design matters!)
5. Click links to ensure they work

Multi-Store Support

If you have multiple BigCommerce stores:

• Install the app on each store separately
• Each store has its own independent settings
• Changes to one store don't affect others

Resetting to Defaults

To restore default settings:

1. Manually revert colors to defaults (#000000 for background, #FFFFFF for text)
2. Reset animation speed to 20
3. Reset bar height to 40px
4. Or contact support for a full reset

Best Practices

Content Best Practices

• Keep it short: Announcements should be 5-15 words for easy reading while scrolling
• Use emojis: Emojis add personality and catch attention (max 1-2 per announcement)
• Make it actionable: Include links for promotions, new products, or events
• Rotate frequently: Change announcements seasonally or monthly to keep content fresh
• Test links: Always verify that linked URLs are correct and working

Design Best Practices

• Contrast: Ensure text color contrasts with background for accessibility
• Readability: Font size should be 14px or larger for mobile users
• Brand Colors: Use colors that match your store's branding
• Consistency: Keep the bar visual style consistent with your site design
• Mobile First: Test on phones and tablets — bar height and font size matter more on mobile

Performance Best Practices

• Limit announcements: 3-7 announcements per bar is ideal; too many can feel cluttered
• Reasonable animation speed: Very fast or very slow animations can be annoying; aim for comfortable readability
• Not distracting: The bar should enhance, not detract from your storefront

Analytics & Testing

• Monitor engagement: Track which announcements get clicked (use UTM parameters in links)
• A/B test: Try different colors, messages, and speeds to see what resonates with customers
• Seasonal updates: Update announcements for holidays, sales, and events
• Gather feedback: Ask customers what they like about your announcements

Accessibility

• Color blind friendly: Don't rely only on color to convey information; use text and emojis
• Readable text: Use clear fonts and sufficient contrast ratios (at least 4.5:1)
• Pause on hover: Keep this enabled so users can read if needed
• No flashing: Avoid rapid color changes or animations that could trigger seizures