Header
The header section is used to configure and customize the main navigation area of your website, including elements like the logo, navigation menu, and contact information. These settings help you shape the overall layout and style to align with your brand identity and enhance user experience.
🔧 Feature Overview
1. Basic Settings
Color Scheme Choose or edit a color palette to define the visual style of all elements on the page (backgrounds, text, etc.), and align them with your brand’s identity.
Logo Upload or update your website’s logo. A high-resolution image is recommended for clarity across all devices.
Logo Width Adjust the logo width using a slider to fit different layout needs.
Info Block Display Add a custom icon, title, and subtitle (e.g., business hours, contact info), with an optional link to relevant pages.
2. Menu Settings
Select Navigation Menu Choose from existing menus or create a new one to be used as the primary navigation. This will appear at the top of the page for easy access to main content.
Menu Position (Desktop)
Display on the same line as the logo (logo can be aligned left or centered).
Display below the logo as a second row — supports a Category Menu with up to 10 top-level items.
Category Menu Select or create a separate category menu for product group navigation.
Menu Color Scheme Customize the colors of the menu area to maintain consistent branding.
Default Expand (Homepage) When enabled, the category menu expands by default on the homepage.
Show Category Images Displays the first product image of each category when enabled.
Store Locator Button Adds a "Find Store" button on the right side of the menu. Clicking it opens a drawer displaying store address info set in the backend.
Quick Link Button Add a custom button next to the store locator. Removing the button text will hide the button automatically.
3. Search Settings
Color Scheme Customize the appearance of the search bar to match your site’s style.
Show Product Types When enabled, users can filter search results by product type based on backend data.
Voice Search Support Enable speech recognition for search input, improving accessibility and ease of use.
4. Other Settings
Sticky Header Type Choose how the sticky header behaves when scrolling (e.g., shrink logo). This ensures the header remains visible for easy navigation.
Enable Hover to Expand Menu Allows menus to expand on hover rather than requiring a click — improving desktop user interaction.
5. Mobile Settings
Mobile Logo Width Adjust the logo size specifically for mobile devices to ensure proper visibility.
Default Expand Category Menu (Mobile) Enable this to have the category menu expanded by default on mobile view.
📦 Addable Content Blocks
Using the “Add Block” feature, you can enrich the header menu with the following modules:
Mega Menu - Featured Image Add custom visuals to the navigation menu for enhanced aesthetics.
Mega Menu - Custom Menu Build flexible and complex custom menu structures for large websites.
Mega Menu - Featured Collection List Display specific product collections and their items directly in the menu for promotional purposes.
Category Menu Image (Sidebar) Insert images into sidebar menus to boost visual appeal.
Badges Highlight items like “Hot” or “New” with text or icons; can appear in the main or category menus.
Icons Add visual icons to menu items for emphasis. These can be applied to both the main and category menus.
✅ Best Practices
Visual Consistency Keep colors, icons, and logo style aligned with your brand to enhance recognition.
Optimized Navigation Use clear menu layouts and structured categories to improve usability and help users find content easily.
Mobile Optimization Ensure elements such as the logo, menu, and contact information are clear and easy to interact with on smaller screens.
Last updated