Announcement Bar Basic
Configure the message and visibility settings for your announcement bar.
Announcement Text (Desktop) Text shown on desktop and larger screens. Example:
Click and Collect is now available. Complimentary shipping over $400.Announcement Text (Mobile) Text shown specifically on mobile devices. Example:
FREE SHIPPING ON ORDERS OVER $50Show Close Button (Desktop) Allows users to manually close the announcement bar on desktop.
Show Close Button (Mobile) Allows users to manually close the announcement bar on mobile.
Link Settings
Assign a clickable link to the announcement bar.
Link URL Define the destination when the bar is clicked. Example:
/Open Link in New Tab Enable this option to open the link in a new browser tab.
Font Settings
Adjust the text style and typography.
Font Size (px) – Desktop Set the font size for desktop announcement text.
Font Size (px) – Mobile Set the font size for mobile announcement text.
Enable Custom Font Toggle this to enable custom font usage.
Custom Fonts Select from available fonts (e.g., Roboto) when custom fonts are enabled.
Text Color Set the color of the announcement text.
Background Settings
Control the background design of the announcement bar.
Background Type Choose between a solid color or gradient.
Background Color Applies if “Solid Color” is selected.
Gradient Start Color / End Color Define the gradient colors if “Gradient” is selected.
Gradient Angle (degrees) Set the angle for the gradient transition.
Display Settings
Customize where and how the announcement bar appears.
Announcement Bar Height (px) – Desktop Set the vertical height of the announcement bar on desktop.
Announcement Bar Height (px) – Mobile Set the vertical height of the announcement bar on mobile.
Display Section On Choose where the announcement bar is shown (e.g., on all pages).
Last updated