Header
Overview:
The Header section is a key component of your Shopify store, providing navigation, branding, and search functionalities. It includes options to display a logo, menu, search bar, customer account icon, cart icon, and customizable layouts such as a top header or an aside header. Additional settings allow you to enable predictive search, set menu link styles, and apply color schemes.
First header view
Second header view
Section Configuration:
Settings
| Setting | Description |
|---|---|
| Show Cart | Displays the cart icon in the header for easy access. |
| Show Customer Account | Displays the customer login/register icon. |
| Menu | Selects the main navigation menu to display in the header. |
| Logo | Uploads an image to use as the store's logo. |
| Logo Width (Desktop) | Adjusts the logo width for desktop screens (100px–200px). |
| Logo Width (Mobile) | Adjusts the logo width for mobile screens (90px–150px). |
| Enable Search | Enables the search bar in the header for easy product discovery. |
| Enable Predictive Search | Shows search suggestions as users type. |
| Popular Links Menu | Assigns a menu for displaying popular links in search suggestions. |
| Quick Links Menu | Assigns a menu for displaying quick links in search suggestions. |
| Search Image | Uploads an image to be displayed in the search suggestions section. |
| Predictive Search Caption | Sets a caption for the predictive search section |
| Predictive Search Caption Weight | Defines the font weight of the predictive search caption (Bold, Medium, Normal, etc.). |
| Predictive Search Heading | Sets a heading for the predictive search section. |
| Predictive Search Heading Weight | Defines the font weight of the predictive search heading. |
| Predictive Search Link | Adds a clickable link in the predictive search section. |
| Open Link in New Window | Opens the predictive search link in a new browser tab. |
| Enable Sticky Header | Controls if the header remains fixed when scrolling (None, On Scroll, On Scroll Up). |
| Show Bottom Border | Adds a border below the header for visual separation. |
| Header Color Scheme | Applies a predefined color scheme to the header. |
| Menu Drawer Color Scheme | Applies a color scheme to the mobile menu drawer. |
| Menu Links Font Weight | Adjusts the font weight of the navigation links. |
Layout Options
| Layout Setting | Description |
|---|---|
| Header View | Allows selection between Top Header and Aside Header layouts. |
| Aside Header (Desktop Only) | Displays the aside header on larger screens (hidden on mobile). |
| Sticky Header | Choose whether the header remains visible when scrolling. |
| Show Bottom Border | Adds a bottom border to the header for visual separation. |
Blocks Configuration(For Mega Menu Banner & Collections):
| Block Setting | Description |
|---|---|
| Mega Menu Item Index | Identifies the navigation menu item to trigger the mega menu. |
| Mega Menu Heading | Sets a title for the mega menu section. |
| Mega Menu Banner Image 1 | Uploads an image for the first promotional banner in the mega menu. |
| Mega Menu Banner Image 2 | Uploads an image for the second promotional banner in the mega menu. |
| Mega Menu Collection List | Selects up to 8 collections to display in the mega menu. |
Mega menu with collections
Mega menu with banner
