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, at the top of a store's homepage. On the left, the section setting's Text box contains the text View our newest seltzer. In the video, the section's Link option is set to the store's Seltzer collection page. With the link option enabled, the Seltzer collection page opens when a visitor selects the announcement bar.

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

Set up the announcement bar section

To set up the Announcement bar section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.

    Note

    The announcement bar section is accessible from all page templates, excluding the Checkout, Password and Gift card page templates.

  2. From the side menu, select Announcement bar.

    The announcement bar section selected in Theme editor.

  3. Select a section setting described in the following table.

Section setting nameDescription
Home page onlySelect the checkbox Home page only turn on/ off displaying the section on the homepage only.
DisplaySelect the Display radio buttons to set the text inside the section to Marquee (scrolling effect) or Static.
TextIn the Text box, enter text to display inside the announcement bar.
LinkIn the Link box, enter a URL to use as a link, inside the section, or select an existing store page to link to. This setting is optional. With this setting enabled, the section's text is hyperlinked.
Link > Connect dynamic sourceTo 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
Color > Color schemeUse the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary or Quaternary. Refer to Colors.
Color > Use gradient for backgroundSelect the checkbox Use gradient for background to turn on/ off using a gradient as the section's background.
Marquee > Repeat textSelect 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 Marquee.
Marquee > Shape between repeated textUse the dropdown Shape between repeated text to set up a shape inside the section. The shape is displayed between each instance of repeated text. The options are None, Circle, Diamond, Triangle, Star, 10 point star, and Flower. To use this setting, set the Display option to Marquee.
Marquee > Animate shape between textSelect the checkbox Animate shape between text to turn on/ off animation for shapes inside the section. The shapes are displayed between each instance of repeated text. To use this setting, choose a shape from the dropdown Shape between repeated text, and set the Display option to Marquee.
Marquee > SpeedAdjust the Speed slider to set a scroll speed between 10 and 400 (seconds) for marquee text. To use this setting, set the Display option to Marquee.
Marquee > DirectionSelect the Direction radio buttons to set the marquee text to move from Right to left or Left to right. To use this setting, set the Display option to Marquee.
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.