Position & Display

Bar Position

The position setting controls where your announcement bar appears on the page—either at the top or bottom of the viewport.

Position Options

Position	Location	Best For	Considerations
Top	Above all page content, at the top of the screen	Urgent announcements, important notices, top-of-funnel CTAs	Pushes page content down; highly visible but may reduce visible content area
Bottom	Below all page content, at the bottom of the screen	Less intrusive promotions, secondary announcements, exit-intent messaging	Less disruptive; may not be seen until user scrolls

Choosing Bar Position

Navigate to the Position & Display section in your dashboard
Click the Bar Position toggle or dropdown
Select Top or Bottom
Preview the position on your website
Click Save to apply the change

Sticky Mode

Sticky mode keeps your announcement bar visible as users scroll through your page, ensuring your message and CTA remain accessible at all times.

Sticky Mode Behavior

Enabled: The bar stays visible at the top (or bottom) of the viewport as users scroll
Disabled: The bar scrolls away naturally with the page content
User-Friendly: When a user closes the bar, it remains closed while they scroll
Mobile-Optimized: Sticky bars are less obtrusive on mobile devices due to limited screen space

When to Use Sticky Mode

Enable Sticky Mode for:

Time-limited offers that need constant visibility
High-priority announcements
Important shipping or policy information
Promotional CTAs (shop, sign up, learn more)
Top-of-funnel conversions where the CTA should always be accessible

Disable Sticky Mode for:

Informational messages that don't require constant access
Low-priority announcements
Bars designed for specific page sections
Secondary or tertiary messages

Configuring Sticky Mode

In the Position & Display section, locate Sticky Mode
Toggle Enable Sticky to turn sticky behavior on or off
Preview how the bar behaves when scrolling
Test on mobile devices to ensure proper display
Click Save to apply the setting

Z-Index Control

The z-index determines the stacking order of your announcement bar relative to other page elements.

Understanding Z-Index

Lower Values (1-100): Bar appears behind most page content
Medium Values (100-1000): Bar appears above regular content but below modals
Higher Values (1000+): Bar appears above most elements including pop-ups and modals
Maximum: 999999 for absolute topmost layering

Z-Index Guidelines

Z-Index Range	Use Case	Example
1-50	Below most page content	Informational messages that shouldn't interfere with navigation
100-500	Above page content, below modals	Default for most announcement bars
500-1000	Above pop-ups and fixed elements	High-priority announcements that must stay visible
1000+	Above almost everything	Critical alerts or urgent messages
999999	Absolute top layer	Emergency messages or critical announcements

Conflict Resolution

If other elements on your page have high z-index values, you may need to adjust your bar's z-index:

Behind Navigation: If your bar appears behind fixed headers, increase z-index above the header value
Behind Modals: Decrease z-index if the bar should be behind pop-ups
Check with Dev Tools: Use browser inspector to see z-index values of conflicting elements

Setting Z-Index

Navigate to the Position & Display section
Locate the Z-Index setting
Enter a value between 1-999999
Test the stacking order on your live site
Adjust if needed to resolve overlapping conflicts
Click Save to apply the change

Close Button

The close button allows users to dismiss your announcement bar. You have full control over its behavior and appearance.

Close Button Configuration

Setting	Description	Options
Enable Close Button	Show or hide the close button	Enabled / Disabled
Close Button Text	Custom text label for the close button	Any text (default: "X" or icon)
Close Button Position	Which side of the bar shows the close button	Left / Right
Behavior on Close	What happens when user closes the bar	Hide (with cookie settings), don't show again

Close Button Positioning

Right (Default): Close button appears on the right side of the bar, away from message text
Left: Close button appears on the left side, useful for RTL languages or specific designs

Customizing Close Button Text

You can replace the default X icon with custom text:

Dismiss - Suggests the user can dismiss the notification
Close - Standard close action label
Hide - Indicates the bar will be hidden
No Thanks - For optional or promotional messages
Got It - For informational messages
Leave empty for icon-only: Use just the X symbol (most common)

Configuring Close Button

In the Position & Display section, find Close Button
Toggle Enable Close Button to show or hide the button
Enter custom Close Button Text (or leave empty for icon only)
Select Position (Left or Right)
Configure cookie duration to control re-display (see below)
Click Save to apply changes

Reopen Button (Pro Feature)

Pro Feature: Allow users to reopen closed announcement bars with a customizable reopen button.

When enabled, the reopen button appears (typically in a corner or widget) allowing users to reopen a closed announcement bar if they changed their mind.

Reopen Button Configuration

Enable Reopen: Allow users to reopen closed bars
Reopen Button Text: Custom label for the reopen button (e.g., "Show Offer", "Remind Me", "See Announcement")
Reopen Button Position: Where the reopen button appears (corner options)
Auto-Hide Reopen: Hide the reopen button after X seconds, or keep it visible
Button Styling: Style the reopen button to match your bar design

Use Cases for Reopen Button

Users who accidentally closed the bar can reopen it
Important announcements that users might want to review later
Promotions where users may want to reconsider the offer
Time-limited offers that users want to refer back to

Configuring Reopen Button

Upgrade to the Professional plan
Navigate to Position & Display
Locate Reopen Button (Pro only)
Toggle Enable Reopen to activate
Enter custom Reopen Button Text (e.g., "Show Offer")
Choose Position (corner location)
Set visibility duration if desired
Style the button using design controls
Click Save to apply settings

Cookie Duration

Cookie duration controls how long a closed announcement bar remains hidden after a user dismisses it. This uses browser cookies to remember the user's preference.

Cookie Duration Options

Option	Duration	Use Case
Every Reload	Bar reappears on every page reload	Testing, temporary announcements, bars that should always show
Session Only	Bar remains hidden until browser is closed	Single-visit announcements, session-specific messages
1 Hour	Bar hidden for 1 hour from dismissal	Quick updates, time-sensitive reminders
6 Hours	Bar hidden for 6 hours from dismissal	Moderate promotions, daily check-ins
1 Day	Bar hidden for 24 hours from dismissal	Daily promotions, standard announcements (default)
7 Days	Bar hidden for one week from dismissal	Weekly promotions, important announcements
2 Weeks	Bar hidden for two weeks from dismissal	Major announcements, seasonal promotions
1 Month	Bar hidden for one month from dismissal	Significant announcements, major promotions
Never	Once closed, bar never appears again (unless cache is cleared)	One-time announcements, critical information

Choosing Cookie Duration

Short Duration (Every Reload, Session, 1 Hour):

For testing and development
Temporary messages that need regular visibility
Quick reminders throughout a session

Medium Duration (6 Hours, 1 Day):

Standard promotional bars (most common)
Messages you want users to see regularly
Balances visibility with user preference to dismiss

Long Duration (1 Week, 2 Weeks, 1 Month):

Important announcements users should see
Major promotions or seasonal events
Less frequent visibility; respects user dismissal longer

Never:

Critical, one-time announcements
Messages with significant importance
Use sparingly—respects user choice not to see the message again

Setting Cookie Duration

Navigate to Position & Display
Find Cookie Duration setting
Select an option from the dropdown
Consider your announcement type and frequency
Test the behavior to ensure it meets your needs
Click Save to apply the setting

Cookie Duration Best Practices

Respect User Choice: Don't set duration too short; users appreciate not seeing repeated messages
Match Message Type: Urgent announcements can have shorter durations; lower-priority can be longer
Balance Visibility: Aim for 1 day as a reasonable default for most promotional bars
Test Performance: Monitor conversion rates to optimize cookie duration
Clear Documentation: If using "Never", ensure users understand this is a one-time message

Display Settings Summary

Setting	Typical Use	Recommended Value
Position	Urgent announcements	Top (sticky)
Position	Promotional messages	Top or Bottom (sticky)
Sticky Mode	High-priority CTA	Enabled
Z-Index	Most cases	100-500
Close Button	Most cases	Enabled
Cookie Duration	Standard promotions	1 Day