Skip to main content

Menus

Menus are the navigation system of your online store. Without them, customers can't find your products, policies, or contact information—even if those pages exist. Think of menus as the signposts that guide visitors through your website, helping them discover what they're looking for quickly and easily.

This guide will show you how to create and manage menus in Soppiya, regardless of your technical background.

Location: Content → Menus

What Are Menus?​

The Menus settings allow you to organize the navigation structure of your store. While Soppiya provides standard pages (like Home, Catalog, and Contact), customers need a clear way to find them.

Menus allow you to create lists of links—such as a "Main Menu" for the top of your site, "Footer Links" for the bottom, or "Sidebar Menus" for specific collection filtering. Common places menus appear include:

  • Header/Top Navigation - Your main menu where customers browse product categories
  • Footer - Links to policies, about pages, and social media
  • Sidebar - Additional navigation for filtering or quick links
  • Mobile Menu - Simplified navigation for smartphone users
For Store Owners

Start with just two menus: Main Menu (header) and Footer Menu. You can always add more specialized menus later as your store grows.

The Menus landing screen is the control center for all site navigation.

  • Menu List (The Containers): When you open Content → Menus, you'll see a list of your navigation groups. Think of these as the "buckets" that hold your links. Common examples are Main Menu, Footer Menu, and Mobile Menu.

  • Menu Items (The Links): Once you click into a menu, you manage the actual links. Each item consists of a Name (what the customer reads) and a Link (where the customer goes).

  • Nested Items (Sub-menus): Menu items can be organized in a hierarchy with parent items and sub-items, creating dropdown navigation for better organization.

Quick Start Guide​

If you're setting up menus for the first time, follow these steps:

  1. Create a Main Menu - This will be your primary navigation at the top of your site
  2. Add 5-7 key items - Shop, About, Contact, and your top product categories
  3. Organize with sub-items - If you have many products, nest them under parent categories (optional)
  4. Create a Footer Menu - Add links to policies, social media, and support pages
  5. Test on mobile - Make sure your menus look good on smaller screens

For detailed instructions, continue reading below.

Creating a New Menu​

To start building a navigation list, you first need to create the menu container.

  1. Navigate to Content → Menus.
  2. Click the button.
  3. Complete the configuration form detailed below.
View Configuration Settings Details
SettingFunction & Rules
TitleThe Admin Label.
Enter a descriptive name so you can identify this menu later (e.g., Footer Menu or Sidebar). This is only visible to you in the admin panel, not to customers.
HandleThe System ID.
This is a behind-the-scenes identifier that your website's theme code uses to know where to display this menu. It auto-generates based on your Title (e.g., "Main Menu" becomes main-menu), but you can manually edit it before saving.
Important: Once saved, avoid changing this. If your theme expects the handle main-menu and you change it to header-link, the menu will disappear from the site.
For Developers

Menu handles are used in theme code to reference specific menus (e.g., menu.handle). Always document any custom menu handles you create in your theme documentation so other team members know which handles are in use.

Click button to create the menu container.

Adding Menu Items​

Once the menu is created, it will be empty. You must add items to define where customers can go.

  1. Open an existing menu (e.g., Main Menu).
  2. Click the button.
  3. The Add Menu Item modal will appear.
SettingFunction & Rules
NameThe Link Text.
This is the text the customer sees and clicks on. Keep it short and actionable (e.g., Shop Now instead of Click Here to Shop). Use clear, familiar words like "Shop," "Contact," or "About Us."
LinkThe Destination.
Select where this item leads.
• For Store Content: Simply search for the product or page name (no URL needed).
• For External Sites: You will need to paste the full website address.

You can link menu items to almost any part of your store or the web:

  • Internal Resources: Search for existing Products, Collections, Pages, or Blog Posts by typing their name. The system will find them for you—no URLs needed.

  • System Routes: Select built-in pages like Account (customer login), Cart, or Search from the dropdown.

  • Home: A direct link to your front page.

  • External URL: Used for links outside your store (like social media or partner sites). To add an external link:

    1. Go to the website in your browser
    2. Copy the full address from the address bar (e.g., https://instagram.com/yourbrand)
    3. Paste it in the Link field

    The address must start with https:// or http:// to work properly.

Click to save the item.

Creating Nested Menu Items (Sub-menus)​

Menu items can be nested under other items to create dropdown or hierarchical navigation. This is useful for organizing products into categories and subcategories, or grouping related pages together.

Understanding Menu Hierarchy​

Soppiya supports up to 3 levels of menu nesting:

  • Level 1: Parent Item → Main menu item (e.g., "Shop")
  • Level 2: Sub-item → Appears under the parent (e.g., "Women's Clothing")
  • Level 3: Sub-sub-item → Appears under the sub-item (e.g., "Dresses")

Example hierarchy:

Shop (Level 1 - Parent)
├── Women's Clothing (Level 2 - Sub-item)
│   ├── Dresses (Level 3 - Sub-sub-item)
│   ├── Tops (Level 3 - Sub-sub-item)
│   └── Shoes (Level 3 - Sub-sub-item)
└── Men's Clothing (Level 2 - Sub-item)
    ├── Shirts (Level 3 - Sub-sub-item)
    └── Pants (Level 3 - Sub-sub-item)
note

You cannot create a 4th level. If you try to add an item under a Level 3 item, the system will prevent it or move it to Level 3.

How to Create a Sub-item​

To nest menu items and create a hierarchical structure:

  1. Open your menu (e.g., Main Menu).
  2. Locate the item you want to turn into a sub-item.
  3. Drag the item by its drag handle and move it slightly to the right under its intended parent item.
  4. When positioned correctly, you'll see the item indent beneath the parent.
  5. Release to drop it. The hierarchy is saved automatically.

Visual indicator: Sub-items appear indented and may show a small connecting line to their parent item.

Moving Items Between Levels​

To change an item's nesting level:

  • Make a sub-item into a parent: Drag it all the way to the left until it's no longer indented.
  • Move to a different parent: Drag it under a different menu item.
  • Change the depth: Drag it slightly left (move up a level) or right (move down a level).
View Detailed Nested Menu Example

Here's how a typical e-commerce Main Menu uses nested items:

Menu Settings:

  • Title: Main Menu
  • Handle: main-menu

Menu Structure:

Name (Level)LinkNotes
Home (Level 1)HomeTop-level item
Shop (Level 1)Collection: All ProductsParent for categories
├── Women (Level 2)Collection: Women's ProductsSub-item under Shop
│ ├── Dresses (Level 3)Collection: Women's DressesSub-sub-item
│ └── Accessories (Level 3)Collection: Women's AccessoriesSub-sub-item
├── Men (Level 2)Collection: Men's ProductsSub-item under Shop
│ ├── Shirts (Level 3)Collection: Men's ShirtsSub-sub-item
│ └── Shoes (Level 3)Collection: Men's ShoesSub-sub-item
└── Sale (Level 2)Collection: Sale ItemsSub-item under Shop
About (Level 1)Page: About UsTop-level item
Contact (Level 1)Page: ContactTop-level item

When customers hover over or click "Shop," they'll see "Women," "Men," and "Sale." Hovering over "Women" reveals "Dresses" and "Accessories."

For Store Owners

Use nested menus to organize large product catalogs, but keep Level 1 to 5-7 items maximum. Too many nested levels can confuse mobile users, so only nest when it genuinely helps navigation.

Theme Compatibility & Display Options

Important: How nested menus display depends on your theme:

  • Desktop: Usually shows as dropdown menus (hover or click to reveal)
  • Mobile: Often shows as expandable accordion lists (tap to expand)
  • Some themes: May not support nested menus at all

If your nested items aren't appearing as dropdowns, check your theme documentation or contact your theme developer.

For Developers

Nested menu rendering depends on theme implementation. When building themes, test nested menus thoroughly on both desktop and mobile. Consider using menu_item.children to iterate through sub-items and apply appropriate CSS classes for dropdown styling.

Best Practices for Nested Menus

Do:

  • Use nesting for large product catalogs (e.g., Fashion → Women → Dresses)
  • Keep parent items clickable (they should link somewhere, not just be labels)
  • Test on mobile devices—nested menus behave differently on small screens
  • Limit Level 2 items to 5-8 per parent to avoid overwhelming dropdowns

Don't:

  • Nest just because you can—only nest when it improves navigation
  • Create Level 3 items unless absolutely necessary (they're hard to use on mobile)
  • Hide important pages 3 levels deep (customers won't find them)
  • Use nesting in footer menus (footers work better as flat lists)

Real World Examples​

To help you understand how menus work in practice, here are examples of common menu setups.

Example 1: Footer Menu (Flat Structure)

Menu Settings:

  • Title: Footer Menu
  • Handle: footer

Menu Items:

Name (What User Sees)Link (Where they go)
About UsPage: About Us
Shipping InfoPage: Shipping Policy
ReturnsPage: Refund Policy
ContactPage: Contact
Instagramhttps://instagram.com/yourbrand
Facebookhttps://facebook.com/yourbrand

This creates a simple footer with company information, policies, and social media links. Footer menus typically use a flat structure (no nesting).

Example 2: Simple Header Menu (No Nesting)

Menu Settings:

  • Title: Main Menu
  • Handle: main-menu

Menu Items:

Name (What User Sees)Link (Where they go)
HomeHome
Shop AllCollection: All Products
New ArrivalsCollection: New Arrivals
SaleCollection: On Sale
AboutPage: About Us
ContactPage: Contact

This creates a clean header navigation with shopping categories and essential pages. Use this structure for stores with fewer than 20 products.

tip

Keep your main header menu to 5–7 top-level items. Too many items can clutter the navigation and make it difficult to use, especially on mobile devices.

Managing Existing Menus​

As your store evolves, you may need to rearrange items or remove outdated links.

Editing and Reordering​

Open any Menu to modify its contents.

  • Edit Details: Click button next to an item to rename it or change where it links. Make your changes in the modal, then click to apply them.
  • Reorder Items: Use the drag handle next to an item to drag and drop it into a new position. You can also drag items left or right to change their nesting level (see Creating Nested Menu Items for details). Changes are saved automatically. Items at the top of the list appear first in the menu on your website.
  • Change Nesting: Drag items horizontally to nest them under other items or promote them to parent items. See the Nested Menu Items section for full details.

Deleting a Menu Item​

To remove a single link (e.g., removing a "Christmas Special" link in January):

  1. Locate the item in the list.
  2. Click the button next to the item.
  3. Confirm the action.

The link will be removed immediately from your live website.

warning

If you delete a parent item that has sub-items, all sub-items under it will also be deleted. Make sure to check the hierarchy before deleting.

Deleting an Entire Menu​

To remove a menu and all its contents:

  1. Open the menu details page.
  2. Click the button.
  3. Confirm the action.
Permanent Action

Deleting a menu is permanent and cannot be undone. If this menu is currently displayed on your live website (e.g., in the Header), that section will immediately become empty. You'll need to create a new menu and add all items again if you delete by mistake.

Troubleshooting​

Common issues and how to fix them:

My menu isn't showing on my website

Possible causes:

  • The menu Handle doesn't match what your theme expects. Check with your theme documentation or developer to confirm the correct handle name.
  • The menu is empty. Menus need at least one menu item to display.
  • Your theme isn't configured to display this menu location. You may need to adjust theme settings or contact your developer.
Links go to the wrong place

Solution:

  • Click Edit next to the menu item and verify the selected destination.
  • For external links, ensure the full URL includes https:// at the beginning (e.g., https://instagram.com/... not instagram.com/...).
  • For internal links, try searching for the page again to make sure you've selected the correct resource.
Menu looks broken on mobile

Possible causes:

  • Too many items in the main menu (try reducing to 5-7 top-level items).
  • Very long menu item names (shorten to 1-3 words when possible).
  • Theme-specific mobile menu issues (contact your theme developer).
My nested menu items aren't showing as dropdowns

Possible causes:

  • Your theme doesn't support nested menus. Check your theme documentation.
  • The nesting isn't saved correctly. Open the menu and verify items are indented.
  • JavaScript or CSS issues with your theme. Try a different theme to test.

Solution: Contact your theme developer or switch to a theme that explicitly supports dropdown/nested menus.

I can't create a 4th level of nesting

This is intentional. Soppiya limits menus to 3 levels maximum (Parent → Sub-item → Sub-sub-item). Four levels of navigation are difficult for customers to use, especially on mobile devices.

Solution: Reorganize your menu structure to stay within 3 levels, or consider creating separate menus for complex navigation needs.

My nested items disappeared after saving

Possible causes:

  • You dragged the item too far left, making it a top-level item instead of a sub-item.
  • The parent item was deleted, and child items were removed with it.

Solution: Re-create the nesting by dragging items back under their intended parent, or check if the parent item still exists.

I changed the Handle and now the menu disappeared

Solution:

  • Change the Handle back to the original value, or
  • Update your theme code to use the new handle name (requires developer access).
Need More Help?

If you're still experiencing issues, contact Soppiya support or your web developer. Have your menu Handle and a description of the problem ready.

Best Practices​

To ensure a smooth user experience (UX) for your customers:

Naming and Organization​

  • Use Clear Titles: Use standard naming conventions like "Shop," "Contact," and "Support." Customers look for familiar words, not creative labels.
  • Keep Names Short: Menu item names should be 1-3 words maximum. "Contact Us" is better than "Get In Touch With Our Team."
  • Group Related Items: If you have many products, group them by category (e.g., "Men's Shoes," "Women's Shoes") rather than listing individual products.
  • Limit Header Items: Try to keep your main header menu to 5–7 top-level items. If you have more, use nested sub-items to organize them under parent categories (e.g., all clothing under a "Shop" parent).
  • Use Nesting Wisely: Only create nested menus when they genuinely improve navigation. For simple stores with fewer than 20 products, a flat menu structure often works better.
  • Prioritize Important Links: Put your most important pages (Shop, New Arrivals, Sale) at the beginning of the menu. Customers scan from left to right.
  • Always Include Contact: Make it easy for customers to reach you by including a Contact or Support link in your main menu or footer.
  • Test Nested Menus on Mobile: Dropdowns work differently on touchscreens. Always preview your nested menus on a smartphone before publishing.

Technical Considerations​

  • Use Handles Carefully: If you're editing theme code, always check the Handle (e.g., main-menu) to ensure your code references the correct menu.
  • Test After Changes: Always preview your website after modifying menus to ensure links work correctly and the layout looks good.
  • Mobile First: Check how your menus appear on smartphones—most customers browse on mobile devices.

Maintenance​

  • Review Regularly: Check your menus quarterly to remove outdated links (expired sales, discontinued products).
  • Update Seasonally: Swap in seasonal collections or promotions as they become relevant.
  • Keep Footer Updated: Ensure policy links in your footer point to current, accurate information.

Summary​

Menus are essential for guiding customers through your online store. By creating clear, organized navigation, you help visitors find what they need and increase the likelihood they'll make a purchase.

Key takeaways:

  • Menus are containers that hold navigation links
  • Start with a Main Menu and Footer Menu
  • Keep header menus to 5-7 top-level items for best usability
  • Use nested menus (up to 3 levels) to organize large product catalogs
  • Test your menus on mobile devices after making changes
  • Review and update menus regularly to keep navigation current

If you're just getting started, create your Main Menu first with links to your most important pages. You can always refine and expand your navigation as your store grows.