Appearance
Announcement bar
This guide describes setting up the Announcement bar section.
Use the section to display messages about sales, special discounts, and new products at the top of your store's pages.
The previous video shows an Announcement bar section at the top of a store's home page. In the upper left, below the section, part of Theme editor's section menu is displayed. The menu's Separator option is set to "—" (the Em Dash symbol). This setting specifies the symbol that's displayed between the section's lines of repeatedly scrolling text. In the video, the section displays the symbol between each occurrence of the text "FREE SHIPPING ON ALL ORDERS".
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Set up an Announcement bar section
To set up an Announcement bar section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a Announcement bar section.
Note
The section is accessible from all pages, excluding the Checkout, Password, and Gift card pages.
From the side menu, select Announcement bar.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Home page only | Select the Home page only checkbox to turn on/off "home page only" mode. With this setting enabled, the section displays on the home page only. |
| Hide on mobile | Select the Hide on mobile checkbox to show/hide the section on mobile display devices. |
| Display | Use the Display options to specify a display style for the section. The options are Scrolling text or Static. |
| Text | In the Text box, enter text to display inside the section. |
| Link | In the Link box, enter a URL for the section to use, or select a link to a store page. |
| Link > Connect dynamic source | To display a link from a dynamic source, if available, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Scrolling text > Speed | Adjust the Speed slider to specify a scroll speed between 20 and 400 (seconds) for the section's scrolling text. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Direction | Use the Direction setting to set the section's scrolling text to move from Right to left or Left to right. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Repeat text | Select the Repeat text checkbox to turn on/off repeating text mode. With repeating text mode enabled, text is scrolled across the section repeatedly. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Separator | Use the Separator setting to select a symbol to use between lines of repeatedly scrolling text. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Repeat separator | Adjust the Repeat separator slider to set how many scrolling text separator symbols are displayed between lines of repeatedly scrolling text. The slider ranges from 1 to 6. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Spacing between repeated separators | Use the Spacing between repeated separators setting to specify a style for the spacing that's applied between each scrolling text separator symbol. To use this setting, set the Display option to Scrolling text. |
| Color > Color scheme | Use the Color scheme options to select a color scheme for the section. Refer to Colors. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |