Header settings

General settings


Setting Description
Desktop logo position 

Displays the logo in the header:

  • Top left: Displays the logo above the main menu, and aligns the logo and menu items to the left.
  • Top center: Displays the logo above the main menu, and aligns the logo and menu items in the center.
  • Middle left: Displays the logo in line with the main menu, centered vertically, and aligned to the left.
  • Middle center (default): Displays the logo in the center of the header

*Changes of logo position you can view on a large screen, such as a desktop.
Menu You can click on “Create menu” to create a new menu from this step or if you have created a header menu before, add from the list. 
Desktop menu type
  • Dropdown menu: A classic menu style that displays a list of links in a dropdown format when clicked. This menu appears if your navigation has 2 levels. If your menu has 3 levels, a standard mega menu will be used instead.
  • Drawer: A compact menu that slides in from the side of the screen, offering a sleek and space-saving navigation solution.
Sticky header
  • None – without sticky header.
  • On scroll up: The header shows on the screen as customers scroll up. Disappears when the customer scrolls down.
  • Always: The header shows on the screen as customers scroll down and up.
  • Always, reduced logo size: The header shows on the screen as customers scroll down and up. The size of the logo is reduced when the sticky header is displayed.
Round sticky header

Enable: The header menu appears with rounded corners and is placed on top of the banner. It does not span the full width of the page.

Disable: The header menu spans the full width of the page, positioned directly below the announcement bar.
Content size

Adjusts the size of main menu items:

  • Small
  • Medium
  • Large
Show separator line

Shows a line to visually separate the header

(Mega menu) from the page's content.

Example: Main menu for header


Desktop menu type:


  • Dropdown menu

2 levels

Example: Dropdown menu style

3 levels

Example: Standard mega menu style

Drawer:


Color


Setting Description
Color scheme

Apply Color Scheme for Header Menu:

  • After creating your color schemes in theme settings — 'Colors' tab, you can apply them to the header.
  • 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 dropdown menu, mega menu or drawer from a suggested list of color schemes.

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.

Customer accounts log in


Setting Description

Show avatar

To manage customer accounts, go to your customer accounts settings.


 Display a customer's avatar in the header when they are signed in with their Shop account. This feature personalizes the shopping experience by visually indicating that the customer is logged in.

To display customer avatars in your store, ensure the Shop channel is installed, and Shop Pay is activated.

Adding Customer Avatars to Your Store

Follow these steps to enable customer avatars:

  1. From your Shopify admin, navigate to Online Store > Themes.
  2. Locate the theme you want to edit and click Customize.
  3. In the Header section, enable the Show Avatar option.
  4. Click Save, then click Publish.

Spacing 

Setting Description
Bottom margin Adjust the space below the header to create separation from the rest of the content.

Section padding


Setting Description
Top padding The “Top padding” setting allows you to adjust the amount of space at the top of the header using a slider. 
Bottom padding The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the header. 
Top padding mobile The 'Top padding (Mobile)' setting allows you to adjust the amount of space at the top of the header specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the header for mobile devices.
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