The "Toolbar" is a thin, horizontal strip located at the very top of a website, typically above the main header or navigation. Its primary function is to display high-priority, concise information that needs to be visible immediately to users, without being intrusive. Common uses include announcements, promotional messages, contact information, or quick links.

The following guide will help you customize the toolbar effectively.

1. How to access the Toolbar section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Step 02: In the theme editor (Customize), click the **Sections button > In Header group, click Toolbar section

Place the top bar section above the header to ensure proper display.

2. How to customize the Toolbar section?

The Toolbar section lets you add and customize three main options: general toolbar settings, Utilities, and the Transparent bar.

2.1. Toolbar

• Make section full width: A toggle to make the toolbar span the entire width of the screen.
• Color scheme: A dropdown menu to select a predefined color scheme for the toolbar.
• Show separator line: A toggle to display a thin line separating the toolbar from the content below.
• Navigation: A dropdown menu to choose a specific menu to be displayed in the top bar. Note that dropdown items from the menu will not be shown.
• Divider shape: A dropdown menu to select the shape of the divider between navigation items (e.g., "Slash").
• Hidden bar on mobile: A toggle to hide the entire toolbar section on mobile devices.

2.2. Utilities

Appear only on large screens

• Social links: A toggle to enable or disable the display of social media icons.
• Country/region selector: A toggle to enable or disable a dropdown for users to select their country or region.
• Show country name: A toggle to display the name of the selected country next to the flag.
• Show country flag: A toggle to display the flag of the selected country.
• Language selector: A toggle to enable or disable a dropdown for users to select their preferred language.

2.3. Transparent bar

Apply only when transparent header active and section bellow is header.

• Enable transparent bar: This is a toggle switch to turn on the transparent bar feature.
• Color scheme: This is a dropdown menu to select a specific color scheme for the transparent bar. A note below it says "Background auto set is transparent," which means the background of the bar will automatically be set to transparent when this feature is active, regardless of the selected color scheme.

Updated on: 16/08/2025