The Header is the section located at the top of the website, playing a key role in displaying elements that help users navigate and recognize the brand. In the image, the Header includes: the Logo (brand image, adjustable in size for both desktop and mobile), the navigation menu (ex: Home, Shop, Product, Page, Blog), functional icons (search, account, shopping cart), as well as country/region and language selectors.

Additionally, the Header supports 4 types of Mega Menu blocks to extend its functionality:

• Mega menu promo images: displays a mega menu with promotional images, ideal for showcasing collections or featured products.
• Mega menu collections: displays product collections directly in the menu, allowing users to access them quickly.
• Mega menu products: displays specific products in the mega menu, often used for new arrivals or best-sellers.
• Mega menu standard: a standard mega menu with a list of text links, suitable for multi-level menus without images.

The following guide provides step-by-step instructions to help you design and customize your website header effectively.

1. How to access Header section?

You can access Header by following these simple steps:

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

Step 02: In the theme editor (Customize), click the Sections button > In the Header group tab, select the Header section.

2. Main menu on Header section

Before customizing the Header effectively, refer to the following section to learn how to create a main menu.

From the Shopify admin > Content > Menus, you create a navigation for the main menu.

Note: Shopify allows you to create a Navigation up to 3 levels, so the maximum level for a dropdown is 3

2.1. Default menu

Step 1: From the Shopify admin > Content > Menus > Create main menu items, add Sub menu items & Add Sub menu with 3 levels

Step 2: In Header section > Choose the menu in Menu option

2.2. Mega menu

There are 4 blocks for mega menu: Mega menu promo images, Mega menu collections, Mega menu products, Mega menu standard.

• Mega menu promo images

Display large promotional images with headlines, supporting text, and a call-to-action button — perfect for highlighting campaigns or featured collections.

• Mega menu collections

Showcase selected product collections visually with images and titles, allowing users to quickly browse key product categories.

• Mega menu products

Feature individual products directly in the menu, including image, title, price, and a quick link — ideal for spotlighting bestsellers or new arrivals.

• Mega menu standard

A traditional dropdown menu that displays links in columns — clean and text-focused, best for organizing many links without images.

3. How to customize Header section?

This section is divided into two parts: customizing the Header section and configuring the Mega Menu blocks.

3.1. Customize the Header section

• Make section full width: Expands the header to span the entire width of the page.
• Color scheme: Sets the overall color theme for the header.
• Menu color scheme: Sets the color theme specifically for the navigation menu.
• Desktop logo position: Determines the placement of the logo and menu on desktop devices, with options such as:

+ Logo left, menu inline: Places the logo on the left and the menu next to it in the same row.

+ Logo left, menu center: Places the logo on the left and centers the menu horizontally.

+ Logo center, menu inline: Places the logo in the center with the menu on the same row.

+ Logo left, menu below: Places the logo on the left with the menu positioned below it.

+ Logo center, menu below: Places the logo in the center with the menu below.

+ Logo center, remaining below: Centers the logo and positions the remaining elements below.

+ Logo center, menu drawer: Centers the logo and hides the menu inside a slide-out drawer.

• Logo: Uploads or changes the brand’s logo.
• Logo width: Adjusts the width of the logo on desktop devices.
• Mobile logo width: Adjusts the width of the logo on mobile devices.

• Sticky header: Keeps the header fixed at the top of the screen while scrolling, with options like “On scroll up.”
• Enable glass sticky header: Adds a frosted glass visual effect to the sticky header.

Navigation

• Menu: Selects the main navigation menu to display in the header on desktop devices.
• Mobile menu: Selects the navigation menu to display on mobile devices.
• Text font: Chooses whether the menu items use the heading font style or the body text style.

You can customize the heading font and body font in the Theme Settings under Typography.

• Text style: Sets the menu text to display in normal case or uppercase letters.
• Open dropdown on event: Determines how dropdown menus open:Click: Opens the dropdown when clicked (default behavior on touch devices).Hover: Opens the dropdown when hovering over a menu item.

Country/region selector

To add a country/region, go to your market settings.

• Enable country/region selector: Activates a dropdown menu that allows customers to choose their preferred country or region.
• Show country name: Displays the name of the selected country or region in the selector.
• Show country flag: Displays the flag of the selected country or region in the selector.

Language selector

To add a language, go to your language settings.

• Enable language selector: Activates a dropdown menu that allows customers to choose their preferred language.

Customer accounts log in

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

• Show avatar: Displays the customer’s avatar in the header when they are signed in via Shop.

Mobile layout

• Mobile logo position: Sets the position of the logo on mobile devices (Center or Left).
• Enable country/region selector: Activates the country/region selector in the mobile header.
• Enable language selector: Activates the language selector in the mobile header.
• Social links: Displays social media icons in the mobile header, managed via the “Manage social links” settings.

Transparent header

To show a transparent header, add a compatible section (such as slideshow, hero media) as the first section.

• Enable transparent header: Activates the transparent header feature, which overlays the header on top of a compatible section (such as a slideshow or hero media) at the top of the page.
• Logo image: Sets the logo to be displayed when the transparent header is enabled. This logo should have the same dimensions as the main logo.
• Color scheme: Defines the color theme for the transparent header. The background is automatically set to transparent.

3.2. Mega Menu blocks.

To add a Mega menu block to the Header section, click the Add block button (plus icon ➕) under the Header section.

After adding the Mega menu block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device.

Here is the detailed customization guide for each type of mega menu

3.2.1. Mega menu promo images

In addition to displaying menu items in the main menu, Mega Menu promo images allow you to add promo images to highlight collections or promotions using visuals and call-to-action buttons.

• Menu item label: The name of the menu item that will trigger the mega menu (e.g., "Shop").

Make sure the 'Menu item label' is the same as 'menu items' title in Navigation, including upper and lower case characters, spaces, etc...

• Show promo images on mobile: Toggle this option ON/OFF to display or hide promotional images in the mega menu on mobile devices.
• Enable first item highlighting: Toggle this option to highlight the first menu item for better visual emphasis.
• Color scheme: Choose a color scheme for the mega menu section to match your site’s design (e.g., "Scheme 1").

Promo image

• Image: Upload or select an image that will be used as a promotional visual in the mega menu.
• Heading: A short headline to grab attention, usually highlighting a promotion or featured collection (e.g., "Glow into the holiday season").
• Text: Optional supporting text to provide more details or context for the promotion.
• Button label: The text displayed on the call-to-action button (e.g., "Shop Collection").
• Button link: The destination URL or page the button will direct users to when clicked (e.g., "All collections").

3.2.2. Mega menu Collections

Mega Menu Collections lets you feature curated product collections directly within your main navigation.

• Menu item label: The name of the menu item that will trigger the mega menu (e.g., "Collections").

Make sure the 'Menu item label' is the same as 'menu items' title in Navigation, including upper and lower case characters, spaces, etc...

• Show collections on mobile: Toggle this option ON/OFF to display or hide the collection images in the mega menu when viewed on mobile devices.
• Enable first item highlighting: When enabled, the first collection item is visually emphasized to draw attention.
• Color scheme: Select a predefined color style (e.g., Scheme 9) to apply a consistent design theme to the mega menu background and text.

Collections

• Collections: Choose which product collections you want to feature. Each collection is displayed with its image and label (e.g., Serum, Shop Body, Shop Hair). Click "Show more" to add or change additional collections.
• Style: Defines how the collection name and button appear over the image.

+ Overlay: Text and button appear directly on top of the image.

+ Overlay with blur: Adds a blurred background behind the text for better readability.

+ Overlay with underline: Shows text on the image with an underline effect for emphasis or hover state.

• Image ratio: Adjusts how the collection images are cropped or sized.

+ Adapt to image: Keeps the original aspect ratio of the uploaded image without cropping.

+ Portrait: Displays images in a vertical rectangular shape, taller than it is wide.

+ Square: Displays images in an equal width-to-height ratio, cropping if necessary to fit.

3.2.3. Mega menu Products

The Mega Menu Products feature to showcase a curated list of products directly within the navigation menu.

• Menu item label: The name of the menu item that will trigger the mega menu (e.g., "Product").

Make sure the 'Menu item label' is the same as 'menu items' title in Navigation, including upper and lower case characters, spaces, etc...

• Show products on mobile: Toggle this option ON/OFF to display or hide the products in the mega menu when viewed on mobile devices.
• Enable first item highlighting: When enabled, the first product item is visually emphasized to draw attention.
• Color scheme: Select a predefined color style (e.g., Scheme 9) to apply a consistent design theme to the mega menu background and text.

Products

• Products: Displays which products will appear in the mega menu. You can add, remove, or change these items.
• Image ratio: Adjusts how the product images are cropped or sized.

+ Adapt to image: Keeps the original aspect ratio of the uploaded image without cropping.

+ Portrait: Displays images in a vertical rectangular shape, taller than it is wide.

+ Square: Displays images in an equal width-to-height ratio, cropping if necessary to fit.

+ Landscape: Displays images in a horizontal rectangular shape, wider than it is tall.

+ 4:3: Displays images with a 4:3 aspect ratio, a balanced rectangle shape often used for product photos.

• Show vendor: When enabled, the product vendor will be shown below the product title.

3.2.3. Mega menu standard

The Mega Menu Standard is a dropdown menu style that allows you to display multiple columns each paired with large images and sub-links.

• Menu item label: The name of the menu item that will trigger the mega menu (e.g., "Product").

Make sure the 'Menu item label' is the same as 'menu items' title in Navigation, including upper and lower case characters, spaces, etc...

• Color scheme: Defines the overall styling (background, text color, hover effects). The current selection is Scheme 10, which likely includes a light yellow gradient background as seen in the dropdown.
• Show mega menu images: Toggle is ON, which allows collection images to be displayed in each category column
• Show mega menu images on mobile: When enable, so the collection images will appear in the mega menu when viewed on mobile devices.
• Image ratio: Controls the shape of the images.

+ Adapt to image: Keeps the original aspect ratio of the uploaded image without cropping.

+ Portrait: Displays images in a vertical rectangular shape, taller than it is wide.

+ Square: Displays images in an equal width-to-height ratio, cropping if necessary to fit.

+ Landscape: Displays images in a horizontal rectangular shape, wider than it is tall.

+ 4:3: Displays images with a 4:3 aspect ratio, a balanced rectangle shape often used for product photos.

Updated on: 16/08/2025