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, 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:
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.
From the side menu, select Announcement bar.
Select a section setting described in the following table.
| Section setting name | Description |
|---|---|
| Home page only | Select the checkbox Home page only turn on/ off displaying the section on the homepage only. |
| Display | Select the Display radio buttons to set the text inside the section to Marquee (scrolling effect) or Static. |
| Text | In the Text box, enter text to display inside the announcement bar. |
| Link | In 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 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 |
| Color > Color scheme | Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary or Quaternary. Refer to Colors. |
| Color > Use gradient for background | Select the checkbox Use gradient for background to turn on/ off using a gradient as the section's background. |
| Marquee > 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 Marquee. |
| Marquee > Shape between repeated text | Use 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 text | Select 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 > Speed | Adjust 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 > Direction | Select 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 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. |