The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Announcement Bar
The 'Announcement Bar' feature in the Flex theme is the perfect way to draw attention to any promotions, sales, or important information that you want your customers to know about!
Your announcement will appear as a banner above the header and top bar sections throughout your site – or just on your homepage.
The 'Announcement Bar' feature includes options to add text, an icon and button. You can also configure the text and background colors, layout and include custom CSS.
In order to enable the 'Announcement Bar,' head into Customize (your Theme Editor) > Theme Settings > Layout > Show announcement bar.
Announcement Bar Settings
The 'Announcement Bar' section settings determine the look and layout of this section! The settings are divided into the following areas: text, button, colors, layout, and advanced.
In the 'Text' settings you can choose an icon, use the rich text editor to add some content, select the text alignment, and base size.
You can add an 'icon' to your bottom bar that will display to the left of your text. To add an 'icon,' view our Flex Icon List and enter that name in this setting.
Text/Text alignment/Base size
The content you'd like to appear in your 'Announcement Bar' can be entered in the 'text' field. You can then adjust the 'text alignment' (either center or left) and 'base size' (small, regular, large) as well. The 'base size' setting will also adjust the height of the bar.
In addition to using the rich text editor to insert a link, you can also choose to add a separate button to the 'Announcement Bar.' You can input your label, link and choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Here you can input what you'd like your button to say, and add an internal or external link. You can then choose which 'style' you'd like this button to be!
You can configure the background and the text colors for your 'Announcement Bar' with the 'background' and 'text' settings.
These settings will apply to the 'Announcement Bar' background and its text (excluding the button).
In the 'Announcement Bar' layout settings, you choose to show the announcement only on the homepage, enable 'sticky' on scroll, hide/show the close icon, and select a width.
The options under the 'width' setting include: 'standard' and 'wide.' This setting is helpful if your announcement content is dropping down to two lines, and you want it to just remain on one! Selecting 'wide' will spread out the content. Selecting 'standard' will keep the content in a container and not spread the full-width.
If you want your 'Announcement bar' to only appear on the homepage, you can enable the 'homepage 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 close the 'Announcement bar' you can enable the 'show close icon' setting, which will add an 'X' to the right corner of the banner.
In the advanced settings, you can add in your own CSS class and custom CSS.
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.
- Icon - sun
- Text alignment - center
- Base size -small
- Button - added
- Show close icon - enabled
- CSS Class/Custom CSS - added to apply different color to icon only
- Icon - cart
- Text alignment - center
- Base size - small
When viewed on a mobile device, the 'Announcement Bar' will responsively resize to fit your mobile screen.