Header settings

General settings

Desktop logo position	Displays the logo in the header: 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 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. *Changes of logo position you can view on a large screen, such as a desktop.
Menu	Select the menu to use for your main menu.
Sticky header (when menu type is dropdown menu or mega menu)	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. Size of the logo is reduced when the sticky header is displayed. Cover, reduce logo size: Rounded Shape: The header has a rounded appearance. Logo Focus: When scrolling down, only the logo is visible. Upon scrolling back up, the full menu reappears.
Show separator line	Shows a line to visually separate the header (Mega menu) from the page's content.
Navigation color	This setting enables you to pick a color for the header menu links, icons (search, login, wishlist, cart), country/region, and language selectors. You can customize the following link colors: Text main color Text secondary color Headings color Headings secondary color It's important to note that the color scheme you choose for these four options will be consistent throughout your website. So, when you update the theme settings for these text colors, the same color scheme will be applied to other sections or blocks that use text elements.
Navigation color on hover	Choose the color for header links when they are hovered over and to highlight the active page. You can personalize these colors using the following options: Text main color Text secondary color Headings color Headings secondary color
Desktop menu type	Dropdown menu: A classic menu style that displays a list of links in a dropdown format when clicked. Mega menu: An expansive menu style that can showcase multiple columns of content, including menu items, links, and featured collection (collection image and button to collection detail page). The overlay background adds an interactive and visually appealing touch to the menu design. Drawer: A compact menu that slides in from the side of the screen, offering a sleek and space-saving navigation solution.

Mega menu

Setting	Description
Default mega menu image	Click on “Select Image” to access your media library, upload a new image, or explore free images. Default image: Customers see a default image upon opening the mega menu. Collection image: Clicking on a collection reveals its image, which stays visible until another collection is clicked. Default image display: After page reloads, the mega menu reappears with the default image.
Image ratio	The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from: Portrait: This option crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation. Landscape: This option crops the images to a 3:2 ratio, where the width of the image is 1.5 times the height. It is ideal for images that have a wider or landscape orientation. Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height.
Add image shape	Enable this option to apply a bubble shape to your image, surrounded by a borderline. If this box is unchecked, the image is displayed as a usual image with rounded corners.
Promoted Collection	Select the primary collection that you want to showcase in the mega menu. This featured collection will be prominently displayed to catch the attention of visitors. Visitors can interact with the collection through a button leading to the detail collection page.
Mega menu overlay	A visually engaging feature that adds an overlay effect to the mega menu. Use a transparent image with, for example, wavy line or twisted line to complement the image and enhance the menu's attractiveness.

Mega menu overlay

Example

Drawer menu settings

Setting	Description
Add custom drawer menu	Text menu item name to show his submenu as drawer menu.
Promoted product	Choose the image which should be promoted in the drawer menu. Click on “Select Image” to access your media library, upload a new image, or explore free images.
Drawer menu overlay	A visually engaging feature that adds an overlay effect to the drawer menu. Use a transparent image with, for example, wavy line or twisted line or some shapes to complement the image and enhance the menu's attractiveness.

Drawer menu overlay

Example

Search

Setting	Description
Enable search	Check this box to display the search icon in the header.
Search icon color	Select a color for the search icon.

Account

Setting	Description
Account icon color	Select a color for the account icon.

Cart

Setting	Description
Cart icon color	Select a color for the cart icon.

Country/region and language selectors

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.

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.

Mobile layout

Setting

Description

Submenu style

Try two options suggested for the mobile submenu view and choose which is better for your design preferences:

Dropdown
Slide

Spacing

Setting	Description
Bottom margin	This setting allows you to add additional space at the bottom of the header to other section.

Section settings

Setting	Description
Background color	There are six options: Background main, Section Background section 1,2,3,4,5. Colors for these backgrounds, you can set in Theme Settings/Colors block/Background color.
Padding:	You can set equal paddings for the top and bottom of the header, but if you want to add more space at the bottom to other section, you can use the “Bottom margin” option in the “Spacing” block of settings.
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.