Announcement Bar

1. What is the announcement bar?

The announcement bar serves as a prominent space at the top of a website, delivering crucial messages, promotions, or time-sensitive information to visitors. Its purpose is to capture immediate attention and effectively communicate important updates or offers.

2. How to set up the announcement bar?

Open the Theme Editor and find the Announcement section in the Header Group.

a) How to add a discount code in an announcement bar?

To include a discount code in the announcement bar, follow these steps:

• In the Announcement section, add a block “Promo code”.
• Choose an Icon from the list to display before the promo code bar's text. There are 21 premade icons available for customization.
• Text: Enter the text for the promo code bar. To include a countdown timer, use {count_down} in the text field.
• Text Size: Adjust the size of the text in the promo code bar. The range is from 50% to 200%.
• Link: Enter the link users will be redirected to if they click on the promo code bar.
• Admin can customize the content displayed on the promo code bar by entering text, adjusting text size (ranging from 50% to 200%), and adding a redirect link for users who click on the bar.
• Enter the coupon code that users can copy from the promo code bar in the Coupon code field. If left empty, no code will be displayed.
• You can also choose the Button color and Coupon color in both light and dark modes.

b) How to show a countdown timer?

The countdown timer will dynamically display the time remaining based on the configured end date and timezone. This feature is effective for creating a sense of urgency and promoting time-sensitive offers or events.

• Text Field:

To display a countdown timer on the bar, it's mandatory to add the {countdown_timer} variable to the text field.
Example: If you want to create a bar with the default message 'Hurry up! 30% OFF Sale Ends Soon', you must include the {countdown_timer} variable in the text field to ensure the countdown timer appears on the bar.

• Configure Countdown Timer:

Beneath the countdown timer section, set the following parameters:

Timezone: Choose the timezone in which the countdown will operate.

End Date/Time: Specify the date and time when the countdown should conclude. The timer will then show the time remaining between the present and the end date.

c) How to show promotion info (announcement, CTA button) ?

To display promotion information using the announcement bar and CTA (Call-to-Action) button, follow these steps:

• To activate the announcement bar, tick the "Enable Announcement Bar" option.
• If you prefer the bar to be visible only on the homepage, tick the "Show Only on Homepage" configuration.
• To keep the bar fixed at the top of the page while scrolling, tick the “Enable sticky bar” option. Although this configuration works independently with the sticky header, some effects of the sticky header might not work smoothly when sticky announcement bar is enabled. While our team is trying to tackle this issue, it’s best not to have both sticky at the same time.
• The announcement bar can be displayed in either stack or carousel format. Enable the "Enable Carousel on Desktop" option for the carousel style.
• When utilizing the carousel display, administrators can further enhance it by enabling auto-switch and adjusting the time between switches.

d) How to show language, currency?

If you want to adjust the alignment of the language and currency selectors, follow these steps:

• Choose between "Left" or "Right" alignment based on your preference.
• Tick the checkbox labeled "Show Language Selector" and/or "Show Currency Selector" to enable the language/currency selection feature.
• Choose between "Left" or "Right" alignment based on your preference.
• Adjust the text size settings to customize the appearance of language and currency selectors.

For detailed information on setting up language and currency features in all Header sections, refer to the specific guide provided for language and currency [hyperlinks] configuration.

Tips: 

• Avoid an excessive number of announcement bars to maintain a clean and focused user interface.
• Keep the content brief to prevent layout issues, especially on smaller mobile screens.

Conclusion:

Announcement Bar provides a dynamic and eye-catching way to communicate important information on your website. By utilizing the configuration options, you can tailor the bar's appearance, functionality, and content to suit your promotional needs. 

3. How to add a menu in the announcement bar?

This feature allows quick access to key links, making navigation easier for users.