Announcement bar

This guide describes 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.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Configure the Announcement bar section

To configure your Announcement bar section:

In Theme editor, at the top of the page, use the theme templates dropdown menu to select the home page.
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	Set the Home page only option to on or off. With this setting enabled, the section displays on the home page only.
Hide on mobile	Use the Hide on mobile option to show or 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.
Uppercase	Set the Uppercase option to on or off. With this option enabled, uppercase is applied to the section's text.
Text	In the Text box, enter text to display inside the section.
Link	Use the Link field to enter an external URL or to select a link to display inside the section.
Display	Use the Display option to select Scrolling text or Static. This option specifies if scrolling text or static text is displayed inside the section. If a user has reduced motion enabled the scrolling text will not animate and display as a static banner as a fallback.
Scroll > Speed	Adjust the Speed slider between `20` and `400` (seconds) to specify a scroll speed for the section's scrolling text. To use this setting, set the Display option to Scrolling text.
Scroll > Direction	Use the Direction option 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.
Scroll > Repeat text	Set the Repeat text option to on or off. With this option enabled, the section's text is scrolled in a continuous stream of repeated text across the section. To use this option, set the Display option to Scrolling text.
Repeat text separator > Spacing	Use the Spacing option to select S (small), M (medium), L (large) or XL (extra large). This option specifies a size for the spacing that separates each occurrence of repeated text. To use this option, set the Display option to Scrolling text.
Repeat text separator > Type	Use the Type option to select Gap, Character or Button. This option specifies the type of separator to display between each occurrence of repeated text. To use this option, set the Display option to Scrolling text.
Repeat text separator > Character	Use the Character option to select ·, •, ↑, →, ↓, and more. This option specifies the text character (symbol) to display between each occurrence of repeated text. To use this option, set the Display option to Scrolling text and set the Type option to Character.
Repeat text separator > Repeat character	Adjust the Repeat character slider between `1` and `6` x. This option specifies the number of text characters (symbols) to display between each occurrence of repeated text. To use this option, set the Display option to Scrolling text and set the Type option to Character.
Repeat text separator > Spacing between repeated characters	Use the Spacing between repeated characters option to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option specifies the type of spacing to display between each text character (symbol) that separates each occurrence of repeated text. To use this option, set the Display option to Scrolling text and set the Type option to Character.
Repeat text separator > Button label	Enter a single line of text in the Button label field. The text you enter is displayed as button label text inside the button that separates each occurrence of repeated text. To use this option, set the Display option to Scrolling text and set the Type option to Button.
Repeat text separator > Button style	Use the Button style option to select Primary or Secondary. This option specifies a style for the button that separates each occurrence of repeated text. To use this option, set the Display option to Scrolling text and set the Type option to Button.
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.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.

Configure a block within an Announcement bar section

An Announcement bar section can contain one block, and a default Announcement bar section contains one Text block.

To configure a block for your Announcement bar section:

In Theme editor, at the top of the page, use the theme templates dropdown menu to select the Home page.
From the side menu, expand the Announcement bar section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add block, choose a block to add, and then select the block you added.
Note
Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.
Apply a block setting described in the following table.

Block name	Description	Setting
Text	Displays an area text inside the section.	In the Text field, enter a single line of text to display inside the section. Select Remove block to delete the block from the section.
Free shipping	Displays an indicator that tracks a customer's current order amount against your store's free shipping threshold.	Configure a free shipping threshold in Theme Settings > Cart > Free shipping threshold. If the market is configured to have free shipping progress disabled, this block will not be displayed. Select Remove block to delete the block from the section.
Countdown timer	Displays a countdown timer inside the section.	In the Text before timer field, enter a single line of text to display as prefix text before the block's timer text. In the Text after timer field, enter a single line of text to display as suffix text after the block's timer text. In the Text after completion field, enter a single line of text. The text you enter is displayed inside the block after the countdown timer's target date is reached. If left blank, the timer displays "crossed out" zeros. Use the Spacing between timer and before and after text option to apply S (small), M (medium) or L (large) spacing between countdown timer, and before and after text, inside the block. Alternatively, select None to apply no spacing. Use the Separator type option to select Gap or Character. This option specifies the type of separator displayed between the block's text and countdown timer. To use this option, set the Spacing between timer and before and after text option to S, M, or L. Use the Character option to select ·, •, ↑, →, ↓, and more. This option specifies the type of text character (symbol) to display as a separator between the block's text and countdown timer. To use this option, set the Separator type option to Character. Adjust the Repeat character slider between `1` and `6` x. This option specifies the number of text characters (symbols) to display as separators between the block's text and countdown timer. To use this option, set the Separator type option to Character. Use the Spacing between repeated characters option to select None, Hair, Thin, Punctuation, 4-per-em, and more. This option specifies the size of the spacing to display between each separator inside the block. Separators are displayed between the block's text and countdown timer. To use this option, set the Separator type option to Character. Set the Use current year option to on or off. With this option enabled, the block's countdown timer uses the current year. Alternatively, to set the block's countdown timer to use a specific year, set this option to off and then enter a year in the Year option field. In the Year field, enter a four-digit number that represents the year you want the block's countdown timer to display. For example, enter the year `1916`. To use this option, disable the Use current year option. Use the Month option to select the month you want the block's countdown timer to display. For example, select 1 – January, 2 – February, 3 – March, 4 – April, 5 – May, etc. Use the Day option to select the date (day of the month) you want the block's countdown timer to display. Use the Hour (24-hour time) option to select hour (in 24-hour format) you want the block's countdown timer to display. For example, select 00 (12 a.m. / midnight), 01 (1 a.m.), 02 (2 a.m.), etc. Use the Minute option to select minute (in 24-hour format) you want the block's countdown timer to display. For example, select 00, 01, 02, etc. Use the Style option to apply a Sentence or Timer style to the block's countdown timer. Set the Flash separators option to on or off. With this option enabled, a "flashing" or "blinking" animation is applied to the text characters that separate parts of the block's countdown timer. To use this option, set the Style option to Timer. Use the Labels option to select Full or Abbreviated. This option applies a full or short display style to the text labels that describe parts of the block's countdown timer. For example, the Full option applies the labels months, days, hours, minutes, and seconds to the countdown timer. The Abbreviated option shortens these labels to mos, days, hrs, mins, and secs. To use this option, set the Style option to Timer. Set the Hide labels if only time parts are visible option to on or off. When enabled, the block displays remaining hours, minutes, and seconds using a `HH:MM:SS` format countdown timer, and hides text labels for expired days, months, and years. To use this option, set the Style option to Timer. Select Remove block to delete the block from the section.