View demo store Support

Header Section

The Header is a prominent section that appears at the top of every page, serving as the main navigation hub of your store. It includes your brand logo, menu links, and key action icons such as search, account, and cart, ensuring customers can easily explore and interact with your store.

In the Voltix theme, the header is thoughtfully designed with an announcement bar at the very top to highlight offers, discounts, or time-sensitive deals. The header features a category dropdown search bar, account icon, and cart icon. This layered approach not only captures attention instantly but also enhances user engagement while maintaining a clean and organized layout for seamless navigation.

Voltix Header Screenshot

How to Configure the Header

  • From your Shopify admin, go to Online Store > Themes.
  • Click Customize on the Voltix theme.
  • In the Theme Editor, select the Header section from the left sidebar.
  • Customize the settings as per your store requirements and click Save.
Voltix Header Settings

Header Settings

  • Color Scheme: Choose a predefined color scheme (e.g., Scheme 4) to control the header's background, text, and icon colors.
  • Enable Sticky Header: Toggle this on to keep the header fixed at the top of the page while the customer scrolls, ensuring constant access to navigation.
  • Header Overlay (Home page): Enable this to make the header transparent on the home page, allowing it to overlay the hero/banner section for a more immersive look.
  • Select Logo: Upload your store logo by clicking Select image. This logo will appear across all pages in the header.
  • Logo Width: Adjust the logo display size in pixels (e.g., 200px) to ensure it fits perfectly within the header layout without affecting alignment.
  • Logo Position: Control how the logo is placed in the header:
    • Logo Left Menu Bottom: Logo sits on the left with the navigation menu displayed below it.
    • Logo Left: Logo on the left with navigation links beside it.
    • Logo Center: Centers the logo for a balanced, modern look.
  • Select Menu: Choose the primary navigation menu (e.g., Main menu) that will be displayed in the header.
  • Text Display: Set the menu link text style — Default (mixed case) or Uppercase.
  • Menu Primary Label Color: Sets the text color for primary menu items (e.g., #000000).
  • Menu Primary Background Color: Sets the background color behind primary menu items (e.g., #F7F7F7).
  • Child Menu Label Color: Color of the sub-menu item text (e.g., #000000).
  • Child Menu Background Color: Background of sub-menu items (e.g., #F7F7F7).
  • Menu Bottom Label Color: Text color for the bottom section of the menu drawer (e.g., #000000).
  • Menu Bottom Background Color: Background color for the bottom section (e.g., #F7F7F7).
  • Header Border Radius: Controls the corner roundness of the header (e.g., 25px).
  • Account Type: Choose between Account page or other account display options to determine how the account icon behaves when clicked.
  • Drop Down Button Text: Sets the label for the category dropdown in the search bar (e.g., "All categories").
  • Search Text: Placeholder text displayed in the search input field (e.g., "What are you searching for?").
  • Top Spacing: Controls the space above the header section (e.g., 12px).
  • Bottom Spacing: Controls the space below the header section (e.g., 12px).
  • Margin Left-Right Spacing: Controls horizontal margins on both sides (e.g., 10px).

FAQs

How can I set up my navigation and mega menu?

Setting up your navigation and mega menu is easy! Check out our comprehensive Mega Menu Guide for detailed, step-by-step instructions to create a visually stunning and functional menu layout.

Why isn't my mega menu displaying an image?

Make sure an image is properly uploaded and added inside the mega menu block.

Why isn't my mega menu showing?

Enter the name of the parent level menu item to apply the mega menu.

How do I enable the header overlay on the home page?

In the Header settings panel, toggle on the Header Overlay (Home page) option. This will make your header transparent over the hero banner on the home page only.

How do I change the category dropdown text in the search bar?

Go to the Header settings, find Search Block Setting, and update the Drop Down Button Text field with your preferred label (e.g., "All categories").