Header
Overview:
The Header section controls the top navigation area of your store, including the logo, menu, search, cart, account, localization, and overall layout styling. It provides flexible customization options for desktop and mobile experiences, allowing merchants to create a clean, branded, and user-friendly shopping journey.
Section Configuration:
Site Logo:
| Setting |
Description |
| Logo |
Uploads the main store logo displayed inside the header. |
| Desktop Logo Width |
Controls the width of the logo on desktop devices. |
| Mobile Logo Width |
Controls the width of the logo on mobile devices. |
Main Menu:
| Setting |
Description |
| Menu |
Selects the navigation menu displayed in the header. |
| Menu Weight |
Adjusts the font thickness of menu links. |
| Menu Case |
Changes the text transformation style of menu items (uppercase, lowercase, capitalize, etc.). |
| Menu Family |
Applies a specific font family style to the menu links. |
| Menu Alignment |
Controls the horizontal alignment of the menu on desktop layout. |
| Dropdown Color Scheme |
Applies a color scheme to dropdown and mega menus. |
| Menu Drawer Button Style |
Defines the visual style of buttons inside the mobile menu drawer. |
| Menu Drawer Button Case |
Controls the text case style for drawer buttons. |
| Show Social Icons |
Displays social media icons inside the mobile menu drawer. |
| Enable Country Selector |
Displays a country selector for localization support. |
| Enable Language Selector |
Displays a language selector for multilingual stores. |
| Menu Drawer Color Scheme |
Applies a color scheme to the mobile menu drawer. |
Search Area:
| Setting |
Description |
| Enable Search |
Enables or disables the search functionality in the header. |
| Enable Predictive Search |
Activates predictive search suggestions while typing. |
| Show Search Label (Desktop) |
Displays a text label beside the search icon on desktop devices. |
| Search Label |
Defines the custom text shown beside the search icon. |
| Search Label Weight |
Adjusts the font weight of the search label text. |
| Search Label Case |
Controls the text transformation style of the search label. |
| Search Label Family |
Applies a font family style to the search label. |
| Search Drawer Heading |
Sets the heading text displayed inside the search drawer. |
| Search Drawer Heading Size |
Controls the heading size inside the search drawer. |
| Search Drawer Heading Weight |
Adjusts the font thickness of the search drawer heading. |
| Search Drawer Heading Case |
Changes the text transformation style of the heading. |
| Search Drawer Heading Family |
Applies a font family style to the heading. |
| Search Drawer Heading Color Style |
Applies predefined color styles to the heading text. |
| Show Heading Gradient |
Enables gradient styling on the search drawer heading. |
| Show Menu in Search Drawer |
Displays menu links inside the search drawer. |
| Search Drawer Menu |
Selects the menu shown inside the search drawer. |
| Show Products in Search Drawer |
Displays featured or recommended products inside the search drawer. |
| Search Drawer Products |
Selects products displayed inside the search drawer. |
| Search Drawer Color Scheme |
Applies a color scheme to the search drawer area. |
Cart Area:
| Setting |
Description |
| Show Cart |
Enables or disables the cart icon in the header. |
| Show Cart Label (Desktop) |
Displays a text label beside the cart icon on desktop devices. |
| Cart Label |
Defines the custom cart label text. |
| Cart Label Style |
Controls the button or link style of the cart label. |
| Cart Label Weight |
Adjusts the font thickness of the cart label. |
| Cart Label Case |
Controls the text transformation style of the cart label. |
| Cart Label Family |
Applies a font family style to the cart label. |
Account Area:
| Setting |
Description |
| Show Account |
Enables or disables the customer account icon in the header. |
| Show Account Label (Desktop) |
Displays a text label beside the account icon on desktop devices. |
| Account Label Weight |
Adjusts the font thickness of the account label. |
| Account Label Case |
Controls the text transformation style of the account label. |
| Account Label Family |
Applies a font family style to the account label. |
Store Locator:
| Setting |
Description |
| Show Store Locator |
Enables or disables the store locator icon or link in the header. |
| Show Locator Label (Desktop) |
Displays a text label beside the locator icon on desktop devices. |
| Locator Label |
Defines the custom text label for the locator feature. |
| Locator Label Weight |
Adjusts the font thickness of the locator label. |
| Locator Label Case |
Controls the text transformation style of the locator label. |
| Locator Label Family |
Applies a font family style to the locator label. |
Layout:
| Setting |
Description |
| Layout Style |
Selects the overall header structure and positioning of logo, menu, and action buttons. |
| Sticky Header |
Controls the sticky behavior of the header while scrolling. |
| Actions Separator |
Displays separator lines between header action icons or buttons. |
| Container Layout |
Determines the width behavior of the header container. |
| Container Size |
Controls the maximum width size of the header container. |
| Color Scheme |
Applies a predefined color palette to the header section. |
| Gradient Mode |
Enables gradient styling for the header background. |
Spacing:
Inside Spacing:
| Setting |
Description |
| Top Padding (Desktop) |
Controls the inner top spacing of the header on desktop devices. |
| Bottom Padding (Desktop) |
Controls the inner bottom spacing of the header on desktop devices. |
| Left Padding (Desktop) |
Controls the inner left spacing of the header on desktop devices. |
| Right Padding (Desktop) |
Controls the inner right spacing of the header on desktop devices. |
| Top Padding (Mobile) |
Controls the inner top spacing of the header on mobile devices. |
| Bottom Padding (Mobile) |
Controls the inner bottom spacing of the header on mobile devices. |
| Left Padding (Mobile) |
Controls the inner left spacing of the header on mobile devices. |
| Right Padding (Mobile) |
Controls the inner right spacing of the header on mobile devices. |
Outside Spacing:
| Setting |
Description |
| Top Padding (Desktop) |
Controls the outer top spacing around the header on desktop devices. |
| Bottom Padding (Desktop) |
Controls the outer bottom spacing around the header on desktop devices. |
| Left Padding (Desktop) |
Controls the outer left spacing around the header on desktop devices. |
| Right Padding (Desktop) |
Controls the outer right spacing around the header on desktop devices. |
| Top Padding (Mobile) |
Controls the outer top spacing around the header on mobile devices. |
| Bottom Padding (Mobile) |
Controls the outer bottom spacing around the header on mobile devices. |
| Left Padding (Mobile) |
Controls the outer left spacing around the header on mobile devices. |
| Right Padding (Mobile) |
Controls the outer right spacing around the header on mobile devices. |
Block Configuration:
The Header section includes advanced mega menu blocks that help organize navigation, highlight products, and improve product discovery. These blocks can be added directly inside the Header section from the Shopify Theme Editor.
Follow these steps to create and configure a mega menu inside Shopify:
- Go to Online Store → Themes.
- Click Customize on your active theme.
- Open the Header section.
- Scroll down to the Blocks area.
- Click Add Block.
- Choose one of the following block types:
- Mega Menu Banner
- Mega Menu Products
- Mega Menu Marquee
- Enter the menu item position or index you want the mega menu to appear on.
- Add images, products, or content depending on the selected mega menu type.
- Save the changes.
- Preview the storefront to verify the mega menu display on desktop and mobile devices.
The Mega Menu Banner block allows merchants to display promotional images inside dropdown navigation menus. This is useful for highlighting collections, seasonal campaigns, featured products, or brand promotions directly from the navigation area.
Configuration:
| Setting |
Description |
| Item Position |
Defines which main menu item will display the mega menu banner. The value should match the menu item order inside the navigation menu. |
| Banner Image 1 |
Uploads the first promotional image displayed inside the mega menu. Recommended for featured collections or campaigns. |
| Banner Link 1 |
Adds a clickable URL to the first banner image, allowing customers to navigate directly to a collection, product, or page. |
| Banner Image 2 |
Uploads the second promotional image displayed inside the mega menu area. |
| Banner Link 2 |
Adds a clickable URL for the second banner image. |
The Mega Menu Products block allows merchants to showcase selected products directly inside the navigation dropdown. This helps customers discover featured or bestselling products without navigating multiple pages.
Configuration:
| Setting |
Description |
| Item Position |
Defines which navigation item will display featured products inside the mega menu. |
| Mega Menu Products |
Selects products that will appear inside the dropdown mega menu. Supports up to 6 products. |
The Mega Menu Marquee block creates an animated scrolling image area inside the mega menu. It is designed for brand storytelling, promotions, featured collections, or showcasing multiple visuals in a modern interactive layout.
Configuration:
| Setting |
Description |
| Item Position |
Defines which menu item will display the marquee section. |
| Banner Image 1 |
Uploads the first marquee image. |
| Banner Image 2 |
Uploads the second marquee image. |
| Banner Image 3 |
Uploads the third marquee image. |
| Banner Image 4 |
Uploads the fourth marquee image. |
| Marquee Speed |
Controls the scrolling animation speed of the marquee section. |
| Pause On Hover |
Pauses the marquee animation when the customer hovers over the section. |
