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 in Theme editor. In the section's settings, in the center left, the Text box contains text to display inside the section. The Display radio buttons are set to Scrolling text (effect). In the top-right, the scrolling text effect is applied to the section's text displayed on a store's Homepage.
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.
At the top of the page, use the dropdown to select a template that contains an Announcement bar section.
Note
With the exception of the Checkout, Password, and Gift card pages, by default, Theme editor displays the section in the Header area of all page templates, and the section's visibility is set to
offor "hidden".From the side menu, select Sections > Announcement bar.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Home page only | Select the checkbox Home page only to turn on/off displaying the section on the homepage only. |
| Display | Select the Display radio buttons to set the text inside the section to Static or Scrolling text (effect). |
| Text | In the Text box, enter text to display inside the section. |
| Link | In the Link box, enter a URL to use as a link inside the section, or select a link to an existing store page. This setting is optional. With this setting enabled, the section's text is hyperlinked. |
| Link > Connect dynamic source | To display a link from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Scrolling text > Repeat text | Select the checkbox Repeat text to turn on/off repeating text inside the section. With this setting enabled, the text repeatedly scrolls across the section. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Speed | Adjust the Speed slider to set a scroll speed between 10sec and 400sec (seconds) for scrolling text. To use this setting, set the Display option to Scrolling text. |
| Scrolling text > Direction | Select the Direction radio buttons to set the scrolling text to move from Right to left or Left to right. To use this setting, set the Display option to Scrolling text. |
| Color > Color scheme | Use the Change dropdown to set the section's color scheme to Scheme 1 or Scheme 2. Select Edit to configure the current color scheme. Refer to Colors. |
| 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. |