Toolbar

Add a thin utility bar to the top of your store with one message and link, plus optional social media icons and country and language selectors.

---

The Toolbar is a slim bar in the Header group, usually placed above or below the Announcement bar. It shows one short message on the left, and your social media icons and country and language selectors on the right. Use it for a welcome line, a contact prompt or a shipping note, and to let shoppers switch currency or language before they reach the Header.

Unlike the Announcement bar, the Toolbar holds a single, static message.

1. Our guide to set up a Toolbar section:

Steps:

• In the theme editor, click Add section in the Header group at the top of the sidebar.

• Locate Toolbar.

• Drag it above or below the Announcement bar and Header to set its position.

• Click Save.

The section is added with one Message block.

2. Section settings

• Color scheme: The bar's background and text colors: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.

• Show bottom border: Adds a thin line along the bottom of the bar.

• Utilities

  • Show social media icons: Shows the social links you've added in Theme settings > Social media. Icons only appear if at least one social link is filled in.

  • Enable country selector: Shows a dropdown with a flag, country and currency, so shoppers can switch currency. It only appears when your store sells to more than one country or region. On smaller screens it shortens to the currency code, such as USD.

  • Enable language selector: Shows a dropdown to switch language. It only appears when your store has more than one published language.

• Inner padding

  • Top padding and Bottom padding: Space above and below the bar's content, 0–20px. These apply on desktop and tablet.

3. Block settings

Message block

You can add one Message block.

• Text: The message shown on the left of the bar (centered when nothing else is shown).

• Link: Makes the message clickable and adds a small arrow after it. Leave it empty for a plain message.

4. How the Toolbar looks on mobile

• Only the message is shown. Social media icons and the selectors are hidden.

• If the message is too long for the screen, it slides slowly back and forth so shoppers can read it all. Tapping and holding pauses it.

• If there's no message, the Toolbar is hidden on mobile.

5. Tips

• Keep the message short, such as "Free shipping over $50" or "Need help? Chat with us".

• To add countries and currencies, set up Markets in your Shopify admin. To add languages, publish them in Settings > Languages.

• Use a different Color scheme from your Announcement bar so the two bars don't blend together.