Header
Overview:
The Header section is designed to serve as the primary navigation and interaction hub at the top of your Shopify store's pages. This section is highly configurable, supporting features like search, social media links, customer account links, and shopping cart integration. It can be tailored to align with the brand’s style and functional needs.
Section Configuration:
Navigation Menus
| Setting | Description |
| Main Menu | Select the primary navigation menu for your store |
| Second Menu | Optionally choose a secondary navigation menu. This can be used for additional links or for special categories. |
| Show Cart Icon | Displays a cart icon in the header, linking to the cart page or opening a cart drawer (based on cart settings). |
Logo Customization
| Setting | Description |
| Logo | Upload a logo image. |
| Logo Position | Choose between left or center alignment for the logo. |
| Logo Desktop Width | Set the width of the logo when viewed on desktop devices. |
| Logo Mobile Width | Set the width of the logo when viewed on mobile devices |
| Logo Spacing | Adjust the space around the logo. |
Search Functionality
| Setting | Description |
| Show Search | Toggle to enable a search bar in the header. |
| Predictive Suggestions | Enable predictive search suggestions to enhance user experience. |
| Open Search by Default | If enabled, the search bar is expanded by default instead of appearing as an icon. |
Header Behavior
| Setting | Description |
| Sticky Header | Select the behavior of the header when scrolling. Options include none, always sticky, sticky on scroll up, or sticky on scroll. |
Layout Settings
| Setting | Description |
| Full Width Section | A checkbox to determine if the section should be displayed full width, defaulting to false. |
| Show bottom border | Toggle to enable a bottom border line. |
Aesthetic Settings
| Setting | Description |
| Color Scheme | Choose a color scheme for the header to match or contrast with your store's design theme. |
Blocks Configuration:
Blocks — Mega Menu
Each Mega Menu block enhances a primary menu item with a structured dropdown, including optional banners and product sliders.
| Block Setting | Description |
|---|---|
| Item Index | Links the mega menu to a specific item in the navigation menu based on its position. |
| Banner Image | Adds a visual banner to the mega menu dropdown. |
| Banner Link | Makes the banner image clickable with a specified URL. |
| Open in New Window | Opens the banner link in a new tab if enabled. |
Product Slider Settings (within Mega Menu)
| Setting | Description |
|---|---|
| Products to Feature | Selects up to 5 products to display in a product slider inside the mega menu. |
| Auto Play | Enables automatic sliding of the featured products. |
| Show Navigation Arrows | Displays left and right navigation arrows for the product slider. |
| Change Slides Every | Sets the interval in seconds between automatic slide changes. |