# Header

{% hint style="info" %}
**Sections -> Header**
{% endhint %}

To create menus in Shopify, go to your Shopify admin panel and navigate to **Content > Menus**. For detailed guidance on menu creation, refer to the [Shopify documentation](https://help.shopify.com/en/manual/online-store/menus-and-links).

The main header type is displayed as follows:

{% tabs %}
{% tab title="Classic menu" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fk8Ytvk3c67MNyClnBigI%2Fheader_01.jpg?alt=media&#x26;token=536e0791-f308-4abd-8f7f-582d15c461db" alt=""><figcaption></figcaption></figure>

It’s a clean, structured design divided into several blocks, which include the following elements:

1. **Top Bar:**\
   A slim bar at the top containing navigation links such as *About, Shipping & Returns, Payment, Warranty, Location,* and *Contacts*.
2. **Logo and Navigation Area:**
   * On the left: the site logo **“Wokiee”** in blue.
   * Center: the main navigation menu with dropdowns for *Home, Shop, Features, Pages, Blog, Portfolio, Women, Men,* and *Buy Theme* (which includes a price badge “$29”).
   * Right: contact details including a **phone number** and **opening hours** (“Open daily from 9:00 AM – 7:00 PM”).
3. **Utility Icons and Options:**
   * On the far right: country/currency selector, language selector, and social media icons (TikTok, Instagram, YouTube).
   * A **search bar** with a magnifying glass icon.
   * User-related icons: profile, compare, wishlist, and cart.

In summary, this **header type** integrates:

* **Badges** (e.g., the “Buy Theme $29” label),
* **Megamenu navigation,**
* **Contact information,**
* **Top bar** with utility links.
  {% endtab %}

{% tab title="Vertical menu" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fg9WbpKCWVeFOngHUcTqr%2Fheader_02.jpg?alt=media&#x26;token=588b5210-8999-45a4-9939-5d27f972b843" alt=""><figcaption></figcaption></figure>

**Structure Overview**

1. **Top Bar:**
   * Positioned at the top of the page, containing quick navigation links such as *About, Shipping & Returns, Payment, Warranty, Location,* and *Contacts.*
   * Helps users find essential informational pages easily.
2. **Logo and Contact Information:**
   * The **brand logo “Wokiee”** is prominently displayed at the top left, ensuring strong brand visibility.
   * On the right side, **contact information** is shown, including the store’s phone number and business hours (*Open daily from 9:00 AM – 7:00 PM*).
   * Additional elements include **currency**, **language selectors**, and **social media icons** for quick global access.
3. **Vertical Menu:**
   * Located on the **left side**, labeled **“Shop by”**, featuring a **list of menu items with icons** for each category.
   * Each menu item (e.g., *Home, Shop, Features, Pages, Blog, Portfolio, Women, Men, Buy Theme*) is paired with a **menu icon** for better visual identification.
   * **Badges** (such as “Sale”) are used to highlight special categories or promotions.
   * Submenus or **megamenu panels** can expand from these items, displaying additional links, categories, or product previews.
4. **Search and User Utilities:**
   * A **search bar** is positioned above the main content for easy product lookup.
   * On the right side, there are user-related icons for **Sign In**, **Compare**, **Wishlist**, and **Cart** functions.
     {% endtab %}

{% tab title="Titles menu" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FCEAhXn9yprT6OGzuLMxL%2Fheader_03.jpg?alt=media&#x26;token=f71ded2e-de96-4b61-93be-3efaf1c78bcc" alt=""><figcaption></figcaption></figure>

**Structure Overview**

1. **Top Bar:**
   * Positioned at the very top of the page.
   * Contains quick-access links such as *About, Shipping & Returns, Payment, Warranty, Location,* and *Contacts*.
   * Designed for providing additional user resources and service information.
2. **Logo and Contact Information:**
   * The **brand logo “Wokiee”** is centered in the header for clear brand visibility.
   * On the right side, **contact details** are displayed, including a phone number and working hours (“Open daily from 9:00 AM – 7:00 PM”).
   * Additional options include **currency**, **language selection**, and **social media icons**.
3. **Titles Menu Area:**
   * Each primary navigation item (e.g., *Home, Shop, Features, Pages, Blog, Portfolio, Women, Men, Buy Theme*) is displayed in a **large, icon-based title box**.
   * Active or selected menu items (e.g., *Home*) are visually highlighted with a bold background color (blue in this example).
   * Certain menu titles, such as *Shop*, can include **badges** like “Sale” for promotional emphasis.
4. **Megamenu Content:**
   * When a menu title is selected, a **megamenu** expands below it.
   * The megamenu is divided into **columns** with text-based links, such as *Main Demos* and *Skins Demos*.
   * Example items include *Home 1–18, Beauty Store, Coffee Store, Tools Store,* etc.
   * The right side of the megamenu can feature **promotional banners or graphics**, such as product updates or customer support ads.
     {% endtab %}

{% tab title="Closed menu" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FYtFYN1LsqMDyXIJ9MlE7%2Fheader_04.jpg?alt=media&#x26;token=9e473e85-7421-44b4-a065-c7808ee14c48" alt=""><figcaption></figcaption></figure>

The header consists of the following key blocks:

1. **Top Bar (optional):**
   * Can include additional links such as *About, Shipping & Returns, Payment, Warranty, Location,* and *Contacts*.
   * Provides quick access to informational pages or customer support sections.
2. **Logo Area:**
   * The brand logo **“Wokiee”** is centered in the header, serving as the main visual focus.
   * Positioned for balanced symmetry across the header.
3. **Closed (Hamburger) Menu:**
   * Located on the **left side** of the header.
   * Expands to reveal navigation categories and menu images when clicked.
   * Supports integration of **badges** (for promotions or new items) and **menu images** for a visually rich navigation experience.
4. **User Utility Icons:**
   * Positioned on the **right side** of the header.
   * Includes icons for **Search**, **User Account**, **Wishlist**, and **Cart**.
5. **Contact Information:**
   * Can be included within the expanded menu or top bar for accessibility.
   * Typically displays the business phone number, email, and operational hours.
     {% endtab %}
     {% endtabs %}

## Header Style Display Restriction

The theme provides several predefined header styles (templates). However, to ensure correct design rendering and prevent layout conflicts, you must only activate (make visible) one header type at any given time.

* Principle: Although all header styles may be present in the theme's backend configuration (as demonstrated, for example, on Demo 1 where multiple types are technically installed but only one is visible), you must ensure that only one chosen template is active and not hidden.
* Technical Consequence: If you activate or enable two or more different header styles simultaneously, they will attempt to render on top of each other, resulting in broken headers and significant layout errors at the top of your site.
* Recommendation: Select your preferred header template and immediately hide or disable all other irrelevant options within your theme settings.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FqCYUeEOCGcM5IysmCF8L%2Fheader_05.jpg?alt=media&#x26;token=204faf68-c7cb-4d52-b170-76a02478954a" alt=""><figcaption></figcaption></figure>

***

## **Header Overview**

The **Header** is the top section of your online store — the first thing customers see when they visit your site. It typically includes your logo, navigation menu, and important store information or promotions.

In this theme, the Header is highly customizable and organized into the following areas:

* **Header Sections** – Add content blocks like announcements, messages, or promotional visuals.
* **Header Design** – Choose from different layout styles (Classic, Closed, Titles, or Vertical) and adjust their specific features.
* **Header Extensions** – Add extra functionality or design enhancements beyond the basic setup.

***

## **Header Sections**

These components let you display extra information or promotions above or within your header.

* **Announcement Bar** – A simple horizontal bar for important store updates, discounts, or shipping information. You can customize text, background color, and link actions.
* **Blurbs** – Short snippets or icons with brief text, perfect for highlighting store features like *Free Shipping*, *24/7 Support*, or *Eco-Friendly Products*.
* **Promo Message** – A dedicated space to showcase promotions, offers, or limited-time deals.
* **Scrolling Text and Images** – Adds a dynamic, moving banner that can scroll text or images to grab customer attention and highlight new arrivals or events.

***

## **Heder Design**

You can select from four main **menu styles**, each offering its own sub-options for customization.

### **Classic Menu**

A traditional horizontal menu layout suitable for most store types.\
Includes options for:

* **Badges** – Small labels (e.g., “New”, “Sale”, “Hot”) that can be added to menu items.
* **Mega Menu** – A large dropdown with multiple columns, images, and links — ideal for stores with many categories.
* **Top Bar** – A thin bar above the main header for contact info, login links, or language/currency selectors.

### **Closed Menu**

A compact menu layout where navigation opens via a toggle or icon (often used for minimal designs).\
Includes options for:

* **Badges** – Highlight products or categories within the menu.
* **Contact Information** – Display phone number, email, or store address directly in the header.
* **Menu Images** – Add small images next to menu links (great for visual navigation).
* **Top Bar** – Optional area for extra links, language switchers, or announcements.

### **Titles Menu**

A clean, text-based layout focusing on titles or labels instead of large navigation areas.\
Includes options for:

* **Contact Information** – Display customer service or business details.
* **Main Menu Icons** – Add icons next to your main menu links for visual emphasis.
* **Mega Menu** – Enable an expanded dropdown with images and category links.
* **Top Bar** – Optional top line for extra information or links.

### **Vertical Menu**

A side-positioned navigation layout ideal for stores that want a unique or content-heavy header.\
Includes options for:

* **Contact Information** – Add address, email, or phone details.
* **Main Menu** – Display your store navigation vertically.
* **Items** – Customize the order and design of the menu items.
* **Top Bar** – Add extra navigation or quick links above the main header area.

***

## **Header Extensions**

The **Header Extensions** section allows you to expand header functionality beyond the standard design — such as adding custom scripts, widgets, or third-party app integrations (for example, search bars, language selectors, or mini-carts).

### **Megamenu Modules**

Megamenus help you organize large or complex product categories with additional visual and interactive elements.

* **Megamenu Item** – Each item represents a section within your megamenu. You can include images, links, collections, or custom content blocks to showcase featured products or categories directly in your dropdown menus.

### **Search Modules**

Search modules extend your header’s search bar, making it more powerful and visually engaging. They can display multiple types of content directly in the search results.

Includes:

* **Banners** – Display promotional banners or featured campaigns inside the search dropdown.
* **Collection List** – Show relevant product collections based on the search query.
* **Navigation Links** – Add quick links to important store pages (e.g., “New Arrivals”, “Best Sellers”).
* **Products** – Display live product results with images, prices, and titles as users type in the search box.

***

## **Summary**

| **Header Area**       | **Purpose**                 | **Examples**                      |
| --------------------- | --------------------------- | --------------------------------- |
| **Header Sections**   | Display info and promotions | Announcement bar, Blurbs          |
| **Header Design**     | Choose layout and structure | Classic, Closed, Titles, Vertical |
| **Header Extensions** | Add advanced features       | Megamenu, Search modules          |
