The Announcement bar displays short messages at the top of your storefront, such as shipping updates, promotions, and store notices. In Concept, it belongs to the Header group and supports two layouts: Carousel (messages rotate one at a time) and Marquee (messages scroll continuously). You can add up to 6 Announcement blocks.
Demo usage
See the Concept Demo storefront. In the Concept header-group.json template, the Announcement bar is enabled with 2 Announcement blocks in Carousel layout, including a promotional message and a contact-page link. As part of the Header group, it is shared across storefront pages unless hidden for the homepage using Do not show on home page.
Watch tutorial video
Chapters
Steps:
Open the Announcement bar section
- In Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
- In the theme editor sidebar, expand Header group and select Announcement bar.
- Use the eye icon to hide or show the section, and drag the handle to change its position in the Header group.
- Click Save after making changes.
Configure announcement display settings
- Enable Show social media icons to display desktop social icons. Configure their links under Theme settings > Social media.
- Enable Language selector or Country/region selector to show localization options when more than one language or country/region is available in your Shopify store.
- Use Invert icons and selectors to swap the positions of the social icons and localization selectors.
- Set Desktop announcement position to Left, Center, or Right.
- Enable Do not show on home page if you want to hide the announcement bar on the homepage only.
- Enable Make section full width or Make section rounded to adjust its layout.
- Click Save.
Language and country/region selectors appear only when the corresponding options are available in Shopify admin.
Choose Carousel or Marquee layout
- Open Announcement layout and choose Carousel to display one announcement at a time.
- For Carousel, enable Auto-rotate announcements to cycle through messages, use Change every to set the interval, and enable Show navigation to display navigation controls.
- Choose Marquee to scroll announcement messages continuously.
- For Marquee, set Direction (left or right) and adjust Speed.
- Click Save and preview the result on desktop and mobile.
Navigation is useful when you have more than one announcement. Carousel-only and Marquee-only settings appear according to the selected layout.
Add and format announcement messages
- Under Announcement bar, click Add block and choose Announcement. You can add up to 6 blocks.
- Enter the Text and an optional Link to make the message clickable.
- Select an Icon, if needed. Enable Hide icon on mobile to remove it on smaller screens.
- Enter Text on mobile to display a shorter message on mobile devices; if left blank, the main text is used.
- To highlight words, select them in the text field and click the italic I control, then choose Highlighted text and optional Highlighted scribble styles.
- Drag blocks to change their order, or use the eye icon to hide an announcement temporarily.
- Click Save.
Customize announcement colors
- Set Text to choose the message color.
- Set Background or Background gradient for the announcement bar.
- Set Highlight or Highlight gradient to style emphasized text.
- Check readability against the selected background, then click Save.
A configured gradient takes precedence over the corresponding solid color.
Save and preview the storefront
- Click Save in the theme editor.
- Check the announcement bar on desktop and mobile, including alternate mobile text, icons, and links.
- Test Carousel navigation or Marquee motion, along with the language and country/region selectors if enabled.
- Confirm whether Do not show on home page matches the intended visibility.
Theme updates
- Concept 6.1.0 (October 23, 2026): Fixed language and country selector dropdowns closing when moving the pointer from the selector into the dropdown.
- Concept 6.0.3 (September 24, 2026): Added a keyboard-accessible pause button for scrolling announcement text; it also pauses while the button has keyboard focus.
- Concept 5.0.0 (September 9, 2025): Added the Marquee layout for continuously scrolling announcements.
- Concept 2.0.0 (October 2, 2024): Fixed centered announcements when social icons and the language switcher were disabled.
See the official Concept release notes.
Troubleshooting
- The announcement bar is missing: Check that the section is visible under Header group, has at least one enabled Announcement block with text, and is not hidden on the homepage.
- Carousel messages do not rotate: Enable Auto-rotate announcements, add at least two active blocks, and adjust Change every.
- Navigation arrows are missing: Enable Show navigation in Carousel layout and check that multiple announcements are active.
- Marquee does not scroll as expected: Select Marquee and check Direction and Speed. Keyboard focus may pause scrolling for accessibility.
- Social icons are missing: Enable Show social media icons and enter social links under Theme settings > Social media.
- Language or country selectors are missing: Enable their section settings and make sure multiple options are available in Shopify admin.
- Mobile text is incorrect: Check Text on mobile for the relevant Announcement block; leave it empty to use the main text.
- Text is difficult to read: Adjust Text, Background, and Highlight colors or gradients.
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
Share:
Enable right-to-left (RTL) text support
Set up the simple cookie banner for your website