Hype guides
Header section
What is the Header?
The Header is the main section at the top of your online store. It includes the logo, navigation menu, and utility icons (search, account, cart, and language/currency selector).
In Hype, the header is fully flexible: you can configure different structures to adapt to complex menus, simpler layouts, or headers where you want to highlight specific elements such as the search bar.
Available layouts
Hype includes four header layouts you can choose from depending on the style and needs of your store:
- Middle left: classic structure with the logo on the left and the main menu centered.
- Top center: logo centered, with menu and utilities split across the sides.
- Middle center: designed for complex menus, with logo and main navigation on top plus highlighted icons.
- Top left: alternative layout where the search bar or icons take a more prominent role.
How to configure the Header
To customize the header, follow these steps:
- Open your store’s Theme Editor.
- In the side menu, select the Header section.
- Choose the layout you want to use: Middle left, Top center, Middle center, or Top left.
- Configure the logo position: top left, top center, middle left, or middle center.
- Adjust the visible icons (search, account, cart, language/currency) according to your needs.
Best practices
- Define priorities: if you want to highlight the search bar or cart, choose a layout that gives them more visibility.
- Keep it simple: an overloaded header can distract users.
- Think mobile-first: always check how each layout adapts to the burger menu on small screens.
- Maintain consistency: make sure the header’s colors and typography align with your store’s overall design.
Announcement Bar
What is the announcement bar?
The announcement bar is a strip displayed at the very top of your store, above the header. It’s designed to highlight short messages to all visitors, such as promotions, shipping information, or important updates.
It’s a simple but powerful tool to keep customers informed and engaged without distracting from the main shopping experience.
How to set up the announcement bar
- Open the Theme Editor and find the Announcement bar section in the Header group.
- Click on the section to open its settings panel.
Configuration options:
- Color scheme: Choose a color palette that matches your store design. The announcement bar should stand out but remain consistent with your branding.
- Show separator line: Adds a thin divider below the announcement bar for clearer visual separation from the header.
- Social media icons: Display icons linking to your social media accounts. These are defined in your theme settings.
- Show icons on desktop: Toggle to display or hide social icons for desktop users.
- Announcements:
- Auto-rotate announcements: If you want to display multiple messages, enable this option.
- Change every X seconds: Set the interval for message rotation (e.g., every 5 seconds).
- Country/region selector: Allow visitors to choose their country or region. This setting is connected to your Shopify markets configuration.
- Language selector: Allow visitors to select their preferred language. This is managed via your language settings.
Mega menu
What is the Mega menu?
The Mega menu in Hype is a modular advanced navigation system that allows you to enrich dropdown menus with multiple elements: images, products, collections, banners, or videos.
The key point is that each section is optional: you can enable or disable it and combine them at any level or menu item. This gives you flexibility to design anything from simple text-based menus to highly visual navigation hubs.
How to configure the Mega menu
- Open the Theme Editor and go to Header > Navigation.
- Select the menu item where you want to activate the Mega menu.
- Enable the Custom submenu or Mega menu option.
- Adjust the available modules according to what you want to display.
Configuration options
1. Dropdown Menu
General settings for the selected level or menu item:
- Dropdown image: display a featured image inside the submenu.
- Image link: direct the user to a collection, product, or external URL.
- Caption: add a short title or description to accompany the image.
- Overlay color and opacity: adjust image contrast with a semi-transparent background.
2. Mega Menu Right Menu
Add a secondary menu on the right side of the Mega menu.
- Main and secondary titles: customize the right-side sections (e.g., “Brands” or “New collection”).
- Add additional menus: link Shopify menus to display grouped links.
3. Mega Menu Banner Product
Show a specific product as a banner inside the Mega menu.
- Select product: choose a featured product from your catalog.
- Display options: number of columns, image ratio, secondary image on hover.
- Quick add: allow quick purchase directly from the menu (none, standard, or bulk).
4. Mega Menu Banner Image
Add a promotional banner to the Mega menu.
- Banner image: select an image for campaigns or promotions.
- Banner link: direct users to a collection, product, or page.
- Caption and color settings: customize the banner message and make it readable with overlays.
Background video (optional): use a video file or YouTube/Vimeo link instead of an image.
5. Drawer Menu Collection Carousel
Display a product or collection carousel inside the dropdown.
- Collection: choose the collection to show.
- Number of products: define how many items to display (e.g., 4).
- Desktop columns: choose between 1 or 2 columns.
- Image ratio: adapt to the original image or fix a ratio (square, portrait).
- Quick add: enable quick purchase directly from the carousel.
6. Drawer Menu Image Banner
Add a promotional banner inside the drawer-style dropdown menu.
- Banner image: select a featured image.
- Link: direct users to a page in your store.
- Caption and color settings: personalize the message.
- Overlay and opacity: adjust the visibility of the background image.
- Secondary image/banner: option to add a second promotional block.
Best practices
- Use only what’s necessary: too many elements in a menu can overwhelm users.
- Highlight what matters most: focus on key collections, promotions, and strategic products.
- Optimize for desktop and mobile: Mega menus work best on desktop, but always check the mobile experience.
- Keep visual consistency: ensure colors, typography, and banners align with your brand identity.
