How to setup the megamenu and mobile menu in our Shopify themes

How to Set Up Desktop & Mobile Menus in Shopify (SEO Optimized)

Creating well-structured navigation menus is essential for user experience (UX) and SEO. In this guide, we will walk you through setting up both desktop and mobile menus for the Shopify theme.

Step 1: Create Two Separate Menus

To optimize the navigation structure, Shopify recommends creating two separate menus:

• Desktop Menu (supports megamenu with three child levels)

• Mobile Menu (supports only two child levels for easier navigation)

How to Create Menus in Shopify:

1. Log into your Shopify Admin Panel.

2. Navigate to Online Store → Navigation.

3. Click Add Menu and create:

   • "Desktop Menu" (for larger screens)

   • "Mobile Menu" (for smaller screens)

4. Click Save Menu after creating both.

Step 2: Structure the Desktop Megamenu

The desktop menu in the theme supports a megamenu layout. To enable it, ensure that at least three child levels exist under a parent menu item.

Steps to Structure the Desktop Megamenu:

1. Under Navigation, open the Desktop Menu.

2. Add your top-level menu items (e.g., Shop, Collections, New Arrivals, etc.).

3. Under a top-level item (e.g., Shop), create sub-menu items (Level 2).

4. Under a Level 2 item, add another set of sub-items (Level 3).

5. The theme automatically converts the dropdown to a megamenu when three levels exist.

6. Click Save Menu.

Example:

Shop
  ├── Women
  │    ├── Dresses
  │    ├── Tops
  │    ├── Bottoms
  ├── Men
  │    ├── Jackets
  │    ├── Shirts
  │    ├── Pants

Step 3: Add Images & Subtitles to the Megamenu

To enhance the megamenu visually, follow these rules:

1. To display an image on the left side of dropdown items:

   • Use the | (pipe) character in the menu title.

   • Example: Hoodies | Image_URL

2. To add subtitles below menu items:

   • Use the | (pipe) character between the main title and subtitle.

   • Example: Shoes | Trending Styles

Example Structure:

Shop
  ├── Women | women.jpg
  │    ├── Dresses | Elegant Styles
  │    ├── Tops | Summer Collection

Step 4: Create Headers & Separators in Dropdowns

Headers and separators help organize the dropdown and improve readability.

1. To create a header (non-clickable menu item):

   • Set the menu item’s link to # (hash symbol).

   • Example: Shop by Category (#)

2. To add a horizontal separator:

   • Set the menu item’s link to - (hyphen).

   • Example: ------ (-)

Example:

Shop
  ├── # Women’s Fashion
  ├── Dresses
  ├── Tops
  ├── -
  ├── # Men’s Collection
  ├── Jackets
  ├── Shirts

Step 5: Add a Button to the Megamenu

You can create call-to-action (CTA) buttons inside the megamenu using specific classes.

How to Add Buttons:

• Use the | (pipe) character followed by a button class.

• Available classes:

  • btn-primary (main button)

  • btn-light-primary (lighter version)

  • btn-outline-primary (outline button)

  • Replace primary with secondary for alternative styling.

Example:

Best Sellers | btn-primary

Step 6: Structure the Mobile Menu

The mobile menu should be simpler than the desktop version for easy navigation.

Mobile Menu Rules:

• Only two levels are supported (not three like desktop).

• Avoid overcomplicating submenus to enhance user experience.

Steps to Structure the Mobile Menu:

1. Go to Online Store → Navigation.

2. Open the Mobile Menu.

3. Add top-level categories (e.g., Shop, Collections, New Arrivals).

4. Under each top-level category, add one level of sub-items only (e.g., Dresses, Tops).

5. Click Save Menu.

Example:

Shop
  ├── Women
  │    ├── Dresses
  │    ├── Tops
  ├── Men
  │    ├── Jackets
  │    ├── Shirts

Final Thoughts

By following these steps, you will create SEO-optimized and user-friendly navigation menus for the KS Millennium Shopify theme.

Desktop Menu Highlights:

• Supports 3 levels (megamenu)

• Allows images, subtitles, headers, and separators

• Can feature buttons for CTAs

Mobile Menu Highlights:

• Supports only 2 levels

• Designed for quick, easy navigation

Need More Help?
Feel free to ask any questions! 🚀