Supported Versions
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 Bottom Fixed Message Bar
The 'Bottom Fixed Message Bar' feature in the Flex theme is an ideal way to add in a 'cookie' or 'compliance' message bar, or any other important information that you need your customers to know about!
Your bottom bar will appear as a fixed banner at the bottom of the screen of your storefront, and can be closed by the customer clicking the 'button' or, optionally if you do not enter include a button, then there will be no option to close it!
The 'Bottom Fixed Message Bar' feature includes options to add text and a button. You can also configure the text and background colors, layout and include custom CSS.
In order to enable the 'Bottom Fixed message Bar,' head into Customize (your Theme Editor) > Theme Settings > Layout > Show bottom fixed message bar.
Bottom Bar Settings
Once the bottom fixed message bar is enabled, a 'Fixed Message' section will appear under Sections in your Theme Editor (customize):
Text
You can use the 'text' rich text field to add your message for the bottom bar! Since this is a rich text field, you can insert links in your message as well.
Base size
The size of the bottom bar text can be adjusted with the 'base size' setting, with the options 'small' and 'regular.' The 'base size' setting will also adjust the height of the bar.
Button label/Style
If you want your bottom fixed message bar to include a confirmation button to close it, ex. "I agree", you can enter text in the 'label' field and choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Clicking the button will close the bottom bar. In order for it to reappear, you will need to clear your cache or go into incognito mode.
Background/Background opacity/Text
You can choose the colors for the bottom fixed message bar with the 'background' and 'text' color settings. The 'background opacity' can be adjusted as well if you'd like to add some transparency!
Width
The options under the 'width' setting include: 'standard' and 'wide.' This setting is helpful if your bottom bar 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.
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.
More information about using the Advanced CSS feature
Mobile Layout
When viewed on a mobile device, the bottom fixed message bar will responsively resize to fit in your device's screen.
