Top bar and announcements

The Top bar is the slim strip that sits above your header on every page. It shows scrolling announcements, social media icons, and language and country selectors. It belongs to the Header group in the theme editor, so it stays in place across your whole store rather than on a single page. Each message is its own Announcement block inside the bar.

Find the Top bar

Reign installs the Top bar by default, so in most stores it is already there.

1. In the Shopify admin, go to Online Store > Themes.
2. On Reign, click Customize.
3. In the left sidebar, open the Header group at the top of the section list.
4. Click Top bar to open its settings.

The Top bar is part of the Header group. There is one for the whole store.

Announcements

Announcements are the messages that scroll across the center of the bar. Each message is a separate Announcement block, so you can run several in rotation. Reign starts you with three.

To edit a message, click an Announcement block under Top bar in the section's blocks. Each block has:

• Text: the message that scrolls across the bar. You can apply bold or italic and add a link.
• Apply custom color: turn this on to override the bar's color scheme for this one message.
• Custom color: the text color for this message. It appears only when Apply custom color is on.

To add or remove a message, use Add block under the Top bar section, or click an existing Announcement block and remove it. Drag the blocks to change their order in the scroll.

These settings on the Top bar section control how all announcements scroll, grouped under the Announcements heading:

• Separator: the symbol placed between messages. The options are None, Bullet (•), Slash (/), Chevron (›), Middle dot (·), Em dash, Asterisk (✦), and Diamond (◆).
• Scroll speed: how fast the messages move across the bar. A higher value moves faster.
• Gap: the space between each item in the scroll, in pixels.
• Pause on hover: stops the scroll while a visitor hovers over the bar, so they can read a message.

Color

• Color scheme: the color scheme applied to the whole bar. This sets the background and text colors. Pick a scheme that contrasts with your header below it. Schemes are defined in Theme settings under Colors.

Social media icons

• Show social media icons: turn the row of social icons on or off. The icons sit on the left of the bar.

The icons read from the social media URLs in your theme settings. To set or change them, go to Theme settings > Social media and fill in each platform's URL. An icon appears only for a platform that has a URL.

Language selector

• Show language selector: turn the language menu on or off. It sits on the right of the bar.

The selector appears to shoppers only when your store offers more than one language. To add a language, go to your Shopify Settings > Languages.

Country/region selector

• Show country/region selector: turn the country and region menu on or off. It sits on the right of the bar.

The selector appears to shoppers only when your store ships to more than one country or region. To add one, go to your Shopify Settings > Markets.

Layout

• Show on mobile: keep the bar visible on phones, or hide it there to save vertical space. When on, the bar shows on every screen size. When off, it shows on desktop only.

Tips

• If the language or country selector does not appear, confirm the matching toggle is on and that your store has more than one language or market. With only one of each, the selector stays hidden even when the toggle is on.
• If the icon row is empty while Show social media icons is on, no social URLs are set. Add them under Theme settings > Social media.
• To run a single static message instead of a scroll, keep one Announcement block. The scroll still applies, but with one item there is nothing to rotate between.