What Does the Announcement Bar Section Do?
The Announcement Bar section provides a simple way to communicate important updates or promotions to your customers. Whether it’s a sale, a new product launch, or changes to your policies, the announcement bar ensures that key information is easily visible to all visitors.
How to Enable the Announcement Bar Widget?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Click on the Theme settings (⚙️ icon) in the theme editor.
STEP 3
Open the 🎁 Free widgets tab and toggle the Announcement Bar Widget option.
STEP 4
Click Save to apply the changes.
Accessing the Announcement Bar section
STEP 1
In the left sidebar of the Theme Editor, ensure you’re on the Sections tab and locate the Header group.
STEP 2
Click the Announcement bar section to open its settings.
Announcement Bar Settings
Sticky Bar
Decide whether the announcement bar stays visible at the top while scrolling.
Show Separator Line
Toggle this to add a divider below the announcement bar for visual clarity.
Padding
Adjust top and bottom spacing around the announcement text to suit your design.
Color
Set background, text, and accent colors to match your store theme.
How to add an Announcement bar message?
STEP 1
In the left sidebar of the Theme Editor, ensure you’re on the Sections tab and locate the Header group.
STEP 2
Expand the Announcement Bar section, then expand the Announcement block inside it. This will reveal the Message block, which holds the content displayed in the bar.
STEP 3
Click the Message block to edit your text, add links, or adjust formatting as needed.
STEP 4
To add more messages, hover below the existing block and click on the plus icon and add another Message block.
Multiple messages will automatically loop in rotation on your storefront.
How to Edit the Left and Right Bar Messages?
The Left and Right bars of the Announcement Bar can display additional content such as social links, contact details, or selectors.
Follow the steps below to customize them.
STEP 1
In the left sidebar of the Theme Editor, ensure you’re on the Sections tab and locate the Header group.
STEP 2
Expand the Announcement Bar section, then open either the Left Bar or Right Bar block.
Inside each block, you can keep, remove, or add elements such as:
Social Media
Description
Contact info
Language & Currency Selector
💡 Design Tip:
Due to the limited width of the Announcement Bar, it’s best to use only one or two blocks within each side.
Adding too many elements can cause misalignment or layout issues, especially on smaller screens.
How to Edit the Announcement Slider Settings?
The slider settings control how your announcement messages move across the screen.
STEP 1
In the left sidebar of the Theme Editor, ensure you’re on the Sections tab and locate the Header group.
STEP 2
Expand the Announcement Bar section and click the Announcement block to open its Slider Settings.
STEP 3
Adjust the available slider options:
Autoplay — Automatically scroll through multiple announcement messages.
Autoplay Speed — Control how fast messages change.
Loop — Enable continuous rotation of messages.
Show Arrows — Display navigation arrows to manually switch messages.
Arrow Color — Customize the color of the navigation arrows to match your theme.
Disclaimer for Using Debutify Theme Widgets and Sections
When using widgets and sections in the Debutify Theme, you are fully responsible for their configuration, content, and compliance with applicable laws and regulations. Debutify is not liable for any outcomes or consequences resulting from their use.
For the full disclaimer and additional details, please read the complete article here: Disclaimer for Using Debutify Theme Widgets and Sections.
Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.