hanut

Store Settings

Menu Editor

The Menu Editor lets you design and manage all navigation menus across your storefront. Edit top header links, main navigation, and footer sections with a visual click-to-edit interface that mirrors your actual website layout.

Accessing the menu editor

  1. From your admin, go to Settings > Menu Editor
  2. Edit your navigation menus using the visual interface
  3. Click Save changes

Your store has three distinct navigation areas, each serving a different purpose:

Small utility links that appear above the main header, typically for account access, support, and quick actions.

Common uses:

  • Login / My Account
  • Contact Us
  • Track Order
  • Help & Support
  • Store Locator

Best practices:

  • Keep to 3-5 links maximum
  • Use for secondary actions and utilities
  • Keep link text short (1-3 words)

Header Navigation

Your main navigation menu that appears prominently in the site header. Supports multiple levels and different menu item types.

Menu item types:

Link - A simple clickable link to any page:

  • Internal pages (e.g., /about-us)
  • External URLs (e.g., https://example.com)
  • Custom pages created with the page builder

Dropdown - A parent item with nested child links:

  • Displays as a dropdown menu on hover
  • Can contain multiple child links
  • Good for organizing related pages
  • Supports one level of nesting

Category List - Automatically displays all your product categories:

  • Shows all root-level categories as dropdown items
  • Updates automatically when you add/remove categories
  • No manual maintenance required
  • Perfect for product category navigation

Category List from Parent - Displays child categories from a specific parent category:

  • Choose which parent category to show children from
  • Only shows subcategories of the selected parent
  • Updates automatically
  • Good for focused category sections

Best practices:

  • Limit to 5-7 main menu items for clarity
  • Use dropdowns to organize related content
  • Place most important pages first
  • Use category lists for product-focused stores
  • Keep menu depth to one level when possible

Multi-column footer navigation with organized link groups. Each section has a heading and a list of links.

Section structure:

  • Section Name - The heading displayed above the links (e.g., "Shop", "Customer Service")
  • Section Code - Auto-generated URL-friendly identifier (e.g., "shop", "customer-service")
  • Links - List of links under this section

Common footer sections:

  • Shop - Product categories, collections, new arrivals
  • Customer Service - Contact, shipping info, returns policy
  • About - About us, our story, careers
  • Legal - Privacy policy, terms of service, cookie policy
  • Connect - Social media links, newsletter signup

Best practices:

  • Use 3-4 footer sections for balance
  • Keep 4-6 links per section
  • Group related links together
  • Include essential legal/policy links
  • Use consistent link text across your site

Store Notice

The Menu Editor also lets you add a store-wide notice that appears across your entire website. This is perfect for announcements, promotions, or important updates.

Common uses:

  • Limited-time sales or promotions
  • Shipping delays or service updates
  • Holiday hours or closures
  • New product launches
  • Important announcements

The store notice typically appears as a banner at the top of your site, making it highly visible to all visitors.

Tip

Keep your store notice concise and actionable. Short messages like "Free shipping this weekend only!" are more effective than long paragraphs.

Adding a store notice

  1. Go to Settings > Menu Editor
  2. Find the Store Notice section
  3. Enter your announcement text
  4. Click Save changes

The notice will appear immediately on your storefront.

Removing a store notice

When your announcement is no longer relevant:

  1. Go to Settings > Menu Editor
  2. Clear the Store Notice field
  3. Click Save changes

The notice will be removed from your store.

Important

The store notice appears on every page of your site. Only use it for genuinely important or time-sensitive information.

Editing menus

The Menu Editor provides a visual WYSIWYG (What You See Is What You Get) interface where each navigation section is displayed as it appears on your website.

Click-to-edit interface

Each section (Top Header Links, Header Navigation, Footer Sections) is presented as a visual card:

  1. View the current menu - See exactly how it looks on your site
  2. Click Edit - Opens a dialog modal for that section
  3. Make changes - Add, edit, remove, or reorder items
  4. Save - Changes are applied to that section

This approach lets you focus on one navigation area at a time while seeing the complete layout.

Adding menu items

To add a new menu item:

  1. Click Edit on the relevant section
  2. Click Add Item or the + button
  3. Choose the item type (for header navigation)
  4. Fill in the details:
    • Text - The visible link text
    • URL - The destination (internal path or full URL)
    • Children - For dropdown items, add child links
  5. Click Save

URL formats:

Internal pages:

  • Use relative paths: /about-us, /contact, /products
  • No need to include your domain

External pages:

  • Use full URLs: https://example.com
  • Opens in the same window by default

Editing existing items

To edit a menu item:

  1. Click Edit on the section containing the item
  2. Click on the item you want to change
  3. Update the text, URL, or other properties
  4. Click Save

Reordering items

To change the order of menu items:

  1. Click Edit on the relevant section
  2. Drag items up or down using the drag handle
  3. Drop in the desired position
  4. Click Save

Menu items appear in the order you arrange them, from left to right (header) or top to bottom (footer).

Removing items

To delete a menu item:

  1. Click Edit on the section
  2. Click the delete/remove icon next to the item
  3. Confirm the deletion
  4. Click Save

Deleted items are removed immediately and cannot be recovered (unless you cancel before saving).

Header navigation in detail

The header navigation supports the most complex menu structures. Here's how to use each menu item type effectively:

Creating dropdown menus

  1. Click Edit on Header Navigation
  2. Click Add Item
  3. Select Dropdown as the type
  4. Enter the parent item text (e.g., "Shop")
  5. Add child links:
    • Click Add Child Link
    • Enter text and URL for each child
    • Add multiple children as needed
  6. Click Save

Example dropdown:

Shop (parent)
  ├─ All Products (/products)
  ├─ New Arrivals (/collections/new)
  ├─ Best Sellers (/collections/best-sellers)
  └─ Sale (/collections/sale)

Using category lists

All categories:

  1. Click Edit on Header Navigation
  2. Click Add Item
  3. Select Category List as the type
  4. Enter the display text (e.g., "Shop by Category")
  5. Click Save

The system automatically populates the dropdown with all your product categories. When you add or remove categories in Product Management, the menu updates automatically.

Specific parent category:

  1. Click Edit on Header Navigation
  2. Click Add Item
  3. Select Category List from Parent as the type
  4. Choose the parent category from the dropdown
  5. Enter the display text
  6. Click Save

This shows only the child categories of the selected parent, useful for focused navigation (e.g., "Men's Clothing" showing only men's subcategories).

Mixing menu types

You can mix different menu item types in the same navigation:

Home (link)
Shop (dropdown with manual links)
New Arrivals (link)
Categories (category list)
About (link)

This flexibility lets you design navigation that matches your store's structure.

Footer sections organize links into columns with headings. Here's how to create effective footer navigation:

  1. Click Edit on Footer Sections
  2. Click Add Section
  3. Enter the section name (e.g., "Customer Service")
  4. The section code is auto-generated from the name (e.g., "customer-service")
  5. Add links to the section:
    • Click Add Link
    • Enter link text and URL
    • Repeat for additional links
  6. Click Save

Section codes

Section codes are URL-friendly identifiers automatically generated from section names:

  • "Customer Service" → customer-service
  • "About Us" → about-us
  • "Shop by Category" → shop-by-category

These codes are used internally for organization but are not visible to customers.

Logical grouping:

Group related links together under appropriate section headings:

  • Shop - Product-related links
  • Support - Customer service links
  • Company - About and corporate links
  • Legal - Policies and terms

Balance:

Aim for similar numbers of links in each section:

  • 4-6 links per section works well
  • Avoid one section with 10 links and another with 2
  • If a section grows too large, consider splitting it

Best practices

Clarity:

  • Use clear, descriptive link text
  • Avoid jargon or internal terminology
  • Make it obvious where links lead

Consistency:

  • Use the same link text for the same destination across all menus
  • Maintain consistent terminology throughout your site

Hierarchy:

  • Most important pages in the header navigation
  • Utility and secondary pages in top header links
  • Comprehensive link collection in footer
  • Keep navigation depth shallow (1-2 levels maximum)

Header navigation

Prioritize:

  • Place most important categories/pages first
  • Limit to 5-7 main items
  • Use dropdowns to reduce clutter

Category lists:

  • Great for product-focused stores
  • Automatically stays current with your catalogue
  • Reduces manual maintenance

Avoid:

  • Too many top-level items (causes horizontal overflow)
  • Deep nesting (more than one dropdown level)
  • Duplicating the same links in multiple places

Organize logically:

  • Group related links under clear headings
  • Use 3-4 sections for visual balance
  • Include essential links (contact, shipping, returns, privacy)

Keep current:

  • Review footer links periodically
  • Remove outdated or irrelevant links
  • Add new important pages

Legal compliance:

  • Include required policy links (privacy, terms, cookies)
  • Make sure links actually work
  • Keep policies up to date

Testing

After making changes:

  • Visit your website and test each link
  • Check that dropdowns work correctly
  • Verify mobile navigation (responsive design)
  • Test on different browsers
  • Ensure all URLs are correct

Permissions

The Menu Editor requires the Store Configuration permission. Users without this permission will not see the menu editor menu item or be able to access the editor.

Next steps

Previous
Branding configuration
Next
Store configuration