The Announcement Bar feature in Flex is an effective way to draw customer attention to any promotions, sales, or important information.
Your announcement displays as a banner above the header and top bar sections throughout your site or limited to the home page.
Enable in the Theme Settings
To activate the feature, open the Layout portion of the Theme settings to enable Show announcement bar. This will reveal a new Announcement section in the main sidebar.
Customize the Announcement
Click to open the Announcement section.
Icon
Add an Icon to your bottom bar to accompany the text. Select an icon from our Flex Icon List and enter its name in this field. There are two icon styles, Solid and Outline, which can be adjusted in the Elements portion of the Theme settings.
Text
Add your message to the Text field, then adjust the Text alignment and Base size to customize its styling.
Button
Adjust the Button label and select a Button style to customize buttons for the section.
Colors
Select custom colors for the Text and Background using the color selectors.
Width
The options under the Width setting include Half, Standard, and Wide. Selecting Wide will spread out the full width of the screen and Half will only span half of the width. Selecting Standard will keep the section in a container and not spread the full width.
Home page only
To limit the feature to the home page only, enable the Home page only setting. Otherwise, it will appear on all pages.
Enable sticky on scroll
If you'd like the Announcement bar to become fixed when scrolling down the page, you can check off the Enable sticky on scroll setting.
Show close icon
If you'd like to give your customers the ability to dismiss and close the feature, enable the Show close icon setting, which will add an 'X' to the right corner of the banner.
Advanced
In the Advanced settings, you can add in your own CSS class and Custom CSS.
More information about using the Advanced CSS feature.
CSS Class/Custom CSS
In the CSS Class field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The Custom CSS field is where you can add in the actual CSS code.