Announcement bar

This guide describes how to set 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 image shows an example store's home page. In the upper left, part of the Theme editor's section menu is displayed. The menu's Text field contains the text Free shipping on all orders over $100. This option specifies the text to display in the section. The text is displayed across the top of the store's home page.

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:

1. In the Theme editor, at the top of the page, use the dropdown to select the Home page.

   Note

   The section is accessible from all pages, excluding the Checkout, Gift card, and Password pages.

2. From the side menu, select Announcement bar.

3. Select a setting described in the following table.

Setting name	Description
Home page only	Turn the Home page only option on or off. With this setting enabled, the section displays on the home page only.
Text	In the Text field, enter body text to display in the section.
Link	In the Link field, enter a URL or select a page to display as a link in the section.
Display	Use the Display option to select Scrolling text or Static. This setting determines whether scrolling or static text is displayed in the section. If a visitor has reduced motion enabled, the scrolling text does not animate and is displayed as a static banner.
Scrolling text > Repeat text	Turn the Repeat text option on or off. With this option enabled, the section's text scrolls in a continuous stream of repeated text across the section. To use this option, set the Display option to Scrolling text.
Scrolling text > Shape between repeated text	Use the Shape between repeated text options to select None, Ellipse, Diamond, Triangle, Star, 10 point star, or Flower. The shape you select is displayed between each instance of repeated text. To use this setting, enable the Repeat text option and set the Display option to Scrolling text.
Scrolling text > Animate shape between text	Use the Animate shape between text option to turn on or off animation for shapes in the section. The shapes are displayed between each instance of repeated text. To use this setting, enable the Repeat text option, set the Display option to Scrolling text, and use the Shape between repeated text option to select a shape that is not None.
Scrolling text > Speed	Adjust the Speed slider to specify a scroll duration between 10 and 400 seconds for the section's repeated text. To use this setting, set the Display option to Scrolling text.
Scrolling text > 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.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Color > Use gradient for background	Use the Use gradient for background option to turn on or off using a gradient as the section's background.
Custom CSS	Select Custom CSS. In the CSS field, 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 the 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.