Header

The Header includes several dynamic sections that can be added numerous times and in the selected sequence. The same sections will be displayed in the Header of the entire store.

Sections -> Header

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.

The main header type is displayed as follows:

Classic menu

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.

Vertical menu

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.

Titles menu

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.

Closed menu

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.

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.

---

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