Header Section
The Header is a key part of the Voltix theme and appears at the top of every page, providing customers with easy access to your store's main navigation and essential shopping features. It includes your brand logo, navigation menu, search, account, and cart options, creating a smooth and intuitive browsing experience.
The Voltix theme offers a flexible and feature-rich header with a dropdown menu and mega menu for organizing your store's navigation. Customers can quickly explore categories and collections through structured menu layouts. The header also includes a convenient search drawer for quickly finding products and a cart drawer that allows customers to review and manage their cart without leaving the current page. Together, these features provide a clean, organized, and user-friendly navigation experience across your store.
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.
Header Settings
- Color Scheme: Select a color scheme to define the header's background, text, and icon colors.
-
Header Width:
Choose how wide the header should appear:
- Full Width: Extends the header across the full width of the screen.
- Container Width: Keeps the header content within a defined container for a more structured layout.
- Divider Line: Enable this option to display a divider below the header. Use the Divider Line Color setting to customize its color.
- Enable Header Overlay: Enable a transparent header overlay to display the header over the homepage's hero or banner section.
- Overlay Logo: Upload a separate logo to be displayed when the header is shown as an overlay. This allows you to use a logo that provides better visibility against the hero image.
- Overlay Color Scheme: Select a color scheme specifically for the header overlay to ensure that navigation links, icons, and other header elements remain clearly visible over the background image.
- Select Logo: Upload the primary logo that will be displayed in the header across your store.
- Logo Width: Adjust the width of the logo to achieve the desired size and maintain proper alignment within the header.
-
Logo Position:
Choose how the logo is positioned within the header:
- Logo Left: Places the logo on the left side of the header.
- Logo Center: Centers the logo within the header.
- Logo Left, Menu Right: Positions the logo on the left with the navigation menu on the right.
- Logo Center, Menu Bottom: Centers the logo above the navigation menu.
- Select Menu: Select the primary navigation menu, such as Main menu, to display your store's navigation links in the header.
- Menu Font Family: Choose the font style used for navigation links: Heading or Body.
- Uppercase Navigation Text: Enable this option to display navigation menu labels in uppercase letters.
- Enable Sticky Header: Enable this option to keep the header fixed at the top of the screen while customers scroll, providing continuous access to navigation and shopping features.
- Customer Account: Select the menu to be displayed for customer account-related navigation and account options.
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 Enable header overlay (Home page) option. This will make your header transparent over the hero banner on the home page only.