Navigation bar settings

The Navigation bar is a section that can be added to the header group. This section contains the menu, language selector, and currency selector. Depending on your preferences and needs, you can choose to display or hide any of these elements in the section.

On the desktop, the section is initially displayed below the banner. As you scroll down the page, it moves up and attaches to the header, becoming part of it. This way, the section remains accessible, just like the header, while navigating the page.

Unfortunately, not all browsers support the technology that allows the navigation menu to attach to the header while scrolling. This functionality is currently available only for Chrome users. In other browsers, the navigation menu will scroll out of view along with other sections. However, we hope that more browsers will adopt this feature in the near future so we can ensure the same behavior as in Chrome.


Note that on mobile devices, this section is hidden. Instead, a mobile navigation bar appears at the bottom of the screen to provide better navigation.


General settings

Setting Description
Color scheme

Apply Color Scheme:

  • After creating your color schemes in the theme settings — 'Colors' tab, you can apply them to the navigation bar.
  • You'll see a Color scheme dropdown.
  • Select the appropriate color scheme (text color, background color, icon color), ensuring consistency with your brand's identity.
Menu color scheme Apply a color scheme for the dropdown menu, mega menu, or drawer from a suggested list of color schemes.
Menu You can click on “Create menu” to create a new menu from this step, or if you have created a footer menu before, add it from the list. 
Color-changing text This option allows you to highlight menu items in a different color. Simply enter the name of the menu item, or part of it, that you want to highlight in the field.
Custom color Select the desired color from the color palette for the highlighted item.

Example of highlighted text in the menu↓


Mega menu setting

Setting Description
Default image Select and upload an image from your library, or download one to use as the default.

Cart settings

Setting Description
Counter background Select a color for the counter background (the number of products displayed on the cart icon in the header) by using the color picker or by entering a HEX code.
Counter text Select a color for the counter (the quantity of products displayed on the cart icon in the header) by using the color picker or by entering a HEX code.

Country/region selector

Setting Description
Enable country/region selector (To add a country/region, go to your market settings)

If you add a country selector to your theme, then your customers can choose their country or region from a dropdown list of countries and regions that you've added in your Shopify Payments settings. The local currency is also displayed in the dropdown list beside each country or region.

*If your store is on the Shopify Plus plan, then your store automatically sets your customers' country or region and currency based on their IP address.

Language selector

Setting Description
Enable language selector (To add a language, go to your language settings)

Providing content in your customers' native language can improve sales by making it easier for them to understand your marketing, product details, shipping, and return policies. This is particularly important for international customers. To enable multiple languages on your Shopify store, you can create separate URLs for each translated version of your content. When a customer lands on a translated URL, your store will automatically display the corresponding translated version if available. 

*Make sure that you have a multi-setup of languages in your store settings.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us