Skip to content

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:

  1. 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.

  2. From the side menu, select Announcement bar.

    The Announcement bar section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Home page onlySelect 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 mobileSelect the Hide on mobile checkbox to show/hide the section on mobile display devices.
DisplayUse the Display options to specify a display style for the section. The options are Scrolling text or Static.
TextIn the Text box, enter text to display inside the section.
LinkIn the Link box, enter a URL for the section to use, or select a link to a store page.
Link > Connect dynamic sourceTo 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 > SpeedAdjust 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 > DirectionUse 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 textSelect 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 > SeparatorUse 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 separatorAdjust 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 separatorsUse 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 schemeUse 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 CSSSelect 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 sectionSelect Remove section to delete the section from the current page.