Announcements

Display a sticky banner at the top of your storefront to highlight important messages, promotions, or updates. The announcement banner is perfect for communicating time-sensitive information that you want every visitor to see.

Plan Requirement

Announcement banners are available on the Starter plan and above. Upgrade your plan to access this feature.

Overview

The announcement banner appears at the very top of your storefront and stays visible as customers browse your store. Use it to:

• Promote sales and offers - Highlight limited-time discounts or special deals
• Share important updates - Announce new products, features, or store changes
• Drive traffic to key pages - Add a call-to-action link to guide customers
• Build urgency - Communicate shipping deadlines or sale end dates
• Welcome new visitors - Create a positive first impression with a friendly message

The banner is fully customizable with your brand colors and can include an optional clickable link to any page on your store or external URL.

Creating an Announcement

Navigate to Marketing > Announcements in your store dashboard to configure your announcement banner.

Enable the Banner

1. Toggle the Enable Announcement Banner switch to activate the feature
2. The banner will appear immediately on your storefront once saved

TIP

Toggle the banner off to hide it without losing your configuration. This is useful for seasonal announcements that you want to reuse later.

Configure Banner Content

Setting	Description
Banner Text	The message displayed in the banner (max 500 characters)
Link URL	Optional URL to direct visitors when they click (e.g., /products, https://example.com)
Link Text	Text for the clickable link (e.g., "Shop Now", "Learn More")

Example configurations:

Text: "Free shipping on orders over $50!"
Link URL: /products
Link Text: Shop Now

Text: "New summer collection just launched!"
Link URL: /products?category=summer
Link Text: Browse Collection

Text: "Join our Discord community for exclusive deals"
Link URL: https://discord.gg/yourserver
Link Text: Join Now

Customize Appearance

Make the banner match your store's branding with these styling options:

Colors

Option	Description	Default
Background Color	Banner background color in hex format	#3b82f6 (blue)
Text Color	Color for text and links	#ffffff (white)

Use the color picker or enter a hex code manually. Popular combinations:

• Blue accent: #3b82f6 background, #ffffff text
• Success green: #10b981 background, #ffffff text
• Warning orange: #f59e0b background, #ffffff text
• Dark mode: #1f2937 background, #ffffff text
• Branded: Use your brand's primary color

Font Size

Choose from four size options to control banner prominence:

Size	When to Use
Small (12px)	Subtle announcements, low-priority messages
Medium (14px)	Default size, works for most use cases
Large (16px)	Important announcements that need visibility
Extra Large (18px)	Critical messages, major promotions

Preview Your Banner

The preview section shows exactly how your banner will appear on your storefront. Use this to:

• Test color combinations for readability
• Ensure text length works well
• Verify links display correctly
• Check overall appearance before saving

Accessibility

Ensure sufficient contrast between background and text colors for readability. Avoid low-contrast combinations like light gray text on white backgrounds.

Banner Behavior

Display & Positioning

The announcement banner:

• Appears at the very top of your storefront, above the navigation
• Uses a sticky position that stays visible when scrolling (z-index: 9999)
• Spans the full width of the screen on all devices
• Displays on all pages of your storefront when enabled

Mobile Optimization

The banner is fully responsive and automatically adapts to smaller screens:

• Text wraps naturally on narrow viewports
• Links remain clearly clickable
• Touch-friendly sizing on mobile devices
• Maintains readability across screen sizes

Link Functionality

When you configure a link URL and link text:

• The link text appears inline with your message
• Link is styled with font-weight: semibold and underline
• Hover effect removes underline for better UX
• Links inherit the banner's text color for consistency
• External links open in the same tab (standard web behavior)

Best Practices

Content Strategy

Keep it concise - Announcement text should be scannable at a glance

• Good: "Free shipping over $50 - Shop Now"
• Poor: "We are pleased to announce that we are now offering free shipping on all orders over $50 to customers in the United States and Canada"

Use action words - Encourage visitors to take action

• "Shop the Sale", "Join Today", "Get Started", "Learn More"

Create urgency - Time-sensitive language drives conversions

• "24 Hours Left", "Ends Tonight", "Limited Stock", "While Supplies Last"

Update regularly - Stale announcements lose impact

• Change messaging for different promotions
• Remove announcements when they're no longer relevant
• Keep seasonal content fresh

Design Considerations

Contrast is critical - Ensure text is easily readable

• Test on both light and dark backgrounds
• Avoid low-contrast combinations
• Use the preview to verify readability

Brand consistency - Match your store's visual identity

• Use colors from your existing color palette
• Keep fonts sizes consistent with your overall design
• Coordinate with your theme colors

Don't overuse - Too many announcements reduce effectiveness

• Use for truly important messages only
• Toggle off when not needed
• Avoid "banner blindness" by keeping content fresh

Common Use Cases

Flash Sales

Text: "Flash Sale: 40% Off Everything - Today Only!"
Link URL: /products
Link Text: Shop Sale
Colors: Orange background (#f59e0b), white text
Size: Large (16px)

New Products

Text: "New arrivals just dropped - Be the first to shop"
Link URL: /products?filter=new
Link Text: See What's New
Colors: Blue background (#3b82f6), white text
Size: Medium (14px)

Shipping Promotion

Text: "Free shipping on orders over $50"
Link URL: /products
Link Text: Start Shopping
Colors: Green background (#10b981), white text
Size: Medium (14px)

Discord Community

Text: "Join our Discord for exclusive perks and giveaways"
Link URL: https://discord.gg/yourserver
Link Text: Join Discord
Colors: Discord purple (#5865F2), white text
Size: Medium (14px)

Holiday Hours

Text: "Store Notice: Extended holiday hours through December"
Link URL: (empty)
Link Text: (empty)
Colors: Dark gray background (#1f2937), white text
Size: Small (12px)

Managing Your Announcement

Updating Content

To change your announcement:

1. Navigate to Marketing > Announcements
2. Modify any settings (text, colors, links, etc.)
3. Check the preview to verify changes
4. Click Save Changes

Changes take effect immediately on your storefront.

Temporarily Hiding

To hide the announcement without losing your configuration:

1. Toggle Enable Announcement Banner to off
2. Click Save Changes

Your settings are preserved and you can re-enable the banner anytime.

Reusing Announcements

Since your configuration is saved when disabled, you can easily reuse announcements for recurring events:

1. Disable the current announcement
2. Update the text and links for your new campaign
3. Re-enable and save
4. Your previous configuration is available by toggling off and updating again

TIP

Create a document with your common announcement configurations (text, colors, links) so you can quickly copy and paste for recurring promotions.

Troubleshooting

Banner Not Showing

If your announcement banner isn't visible on your storefront:

• Check enabled status - Ensure the toggle is switched on
• Verify text content - Banner requires text to display
• Clear browser cache - Hard refresh your storefront (Ctrl+F5 / Cmd+Shift+R)
• Check plan access - Confirm you're on Starter plan or above
• Test incognito mode - Rule out browser extension interference

Text Getting Cut Off

If your announcement text is truncated or wraps awkwardly:

• Shorten your message - Keep announcements concise
• Increase font size - Larger text wraps more predictably on mobile
• Test on mobile - Check how it appears on smaller screens
• Remove extra spaces - Clean up spacing in your text

Poor Readability

If text is hard to read against your background:

• Increase contrast - Use darker backgrounds with light text or vice versa
• Test combinations - Use the preview to verify before saving
• Consider accessibility - Aim for WCAG AA contrast ratios (4.5:1)
• Use common patterns - Dark background + white text is universally readable

Link Not Working

If your call-to-action link isn't functioning:

• Verify URL format - External links need https://, internal links use /path
• Check link text - Link only appears if both URL and text are provided
• Test the URL - Ensure the destination page exists
• Check for typos - Verify spelling in both URL and link text

Related Features

• Promotional Popups - Create engaging popups for lead capture and promotions
• Coupons & Discounts - Offer discount codes that pair well with announcement banners
• Email Campaigns - Follow up announcement promotions with targeted emails
• Store Branding - Customize your store's overall look and feel
• Sales Banners - (Coming soon) Create multiple rotating announcement banners