Header settings

General

Setting Description
Color scheme Read Color scheme article to learn more about color schemes.
Header type

Select type of header

  • Full background: The header spans the full width of the screen with a continuous background. The notification popup appears directly below the header.
  • Item background: The logo has its own background and is aligned with the notification popup on the left side. The header with the navigation menu and icons is displayed separately on the right side.
Header border radius Available only when Header type is set to Item background. Use this setting to control the corner style of the logo and header menu—make them smoothly rounded or perfectly square.
Sticky header
  • Always: The header shows on the screen as customers scroll down and up.
  • On scroll up: The header shows on the screen as customers scroll up. Disappears when the customer scrolls down.
  • Never – without sticky header.

Dropdown menu

2-level menu

3-level menu


Mega menu

Standard Mega menu with Additional menu at the bottom

When you hover over each category, such as Men or Women, the menu expands to show the related collections.



Setting Description
Menu Create a new menu or select one from the list to use as the main header menu.
Menu style
  • Dropdown menu: A classic menu style that displays links in a dropdown format when clicked. Supports both 2-level and 3-level nested menus.
  • Mega menu: A wide, multi-column menu that can display multiple categories, links, and even images at once. Ideal for sites with lots of content or complex navigation.
Customer account avatar Only visible when customers are signed in with Shop. Manage customer accounts
Mega menu color scheme Select a color scheme from the suggested list to apply to the mega menu that appears after clicking the menu item in the header.
Use custom megamenu background color Enable this option to apply a custom background color to the mega menu.
Custom megamenu background color Select the background color for the mega menu in light mode.
Custom megamenu background color dark mode Choose the background color for the mega menu in dark mode view.
Menu expanded items Enter the names of the menu items that will display expanded content, such as Collections or Blog. In the main menu, one of these items should include links to collections or blog posts. The image for each collection or blog will be shown with its title displayed at the top when the item is hovered.
Menu extended columns Choose the number of columns (1 to 3) to display in the expanded menu.
Menu extended image ratio

Select the aspect ratio for images in the expanded menu:

  • Adapt – Automatically adjusts the image ratio.
  • Portrait – Vertical images.
  • Square – Equal width and height.
  • Landscape – Standard horizontal images.
  • Wide – Wider horizontal format.
  • Ultra wide – Very wide horizontal images.
  • Custom – Set a custom image ratio.
Menu extended image ratio custom Specify a custom aspect ratio for images in the expanded menu.
Additional menu

This menu will be displayed in the megamenu. It will be displayed after the main submenu.

Create a menu in Dashboard → Content → Menus → Create menu, then select it here.

Mobile layout


Setting Description
Color scheme Select a color scheme from the suggested list to apply to the mobile menu that appears after clicking the menu icon in the header.
Additional menu Select a menu to display in the mobile menu after the main submenu. Create a menu in Dashboard → Content → Menus → Create menu, then select it here.

Search

Setting Description
Show search icon Enable this option to display the search icon. Disable it to hide the search icon.
Color scheme Select a color scheme from the suggested list to apply to the predictive search interface that appears after clicking the search icon in the header.

Country/region selector


To add a country/region, go to your market settings. These settings will be displayed in the mobile menu.


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.
Show country name Display or hide the name of the selected country by enabling or disabling this option.
Show currency ISO code Enable this option to display the ISO code of the selected currency (e.g., USD, EUR). Disable it to hide the ISO code.
Show currency symbol Enable this option to display the symbol of the selected currency (e.g., $, €, £). Disable it to hide the currency symbol.

Language selector


To add a language, go to your language settings.

These settings will be displayed in the mobile menu.

Setting Description
Enable language selector

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.

Padding


Padding is the space inside a section that separates the content from the section’s edges.

See this article to set paddings: Section padding

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