How to Add a Split Menu to Your Shopify Store

Welcome to this guide on enhancing your Shopify store with a split menu! A split menu is a stylish navigation feature where menu items are displayed on both the left and right sides of the screen, often with a centered logo. This design is popular among shop owners as it provides a clean and professional look, making navigation intuitive for customers. By default, Shopify only allows a single menu, but with a few code tweaks, you can implement a split menu to elevate your store’s user experience. In this article, we’ll walk you through the process of adding a split menu, specifically for the Dawn theme, and provide guidance for other themes.

Why Use a Split Menu?

A split menu offers several benefits:

• Enhanced Aesthetics: It creates a balanced, modern look with the logo at the center and menus flanking both sides.
• Improved Navigation: Customers can easily access different sections of your store.
• Customization Appeal: It allows shop owners to showcase their brand identity prominently.

Since Shopify doesn’t natively support this feature, we’ll show you how to add it using custom code.

Prerequisites

Before you begin, ensure you have:

• Access to your Shopify store’s code editor.
• Basic knowledge of HTML, Liquid, and Shopify’s file structure.
• A backup of your theme to avoid accidental data loss.

Step-by-Step Guide to Adding a Split Menu

Step 1: Open the Code Editor

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Locate your active theme (e.g., Dawn) and click the three-dot menu.
4. Select Edit Code to open the code editor.

Step 2: Create a Snippet

1. In the code editor, go to the Snippets section.
2. Click Add a new snippet and name it (e.g., grt-header-menu).
3. Add the necessary code for the split menu. The exact code will depend on your theme, but you can find a sample in the resources linked below.
4. Save the snippet.

Step 3: Render the Snippet

1. Search for the header.liquid file in the Sections folder.
2. Locate the appropriate line to render your snippet (e.g., around line 220 in the Dawn theme).
3. Add the following code to render the snippet:

{% render 'grt-header-menu' %}

• Save the file.

Step 4: Add a Schema

1. In the header.liquid file, scroll to the bottom where the schema block begins (below the @app type).
2. Add a schema to enable the split menu in the Shopify customizer. This schema will allow you to select a second menu. A sample schema might look like this:

{
  "type": "select",
  "id": "right_menu",
  "label": "Select Right Menu",
  "options": [
    {
      "value": "",
      "label": "None"
    },
    {
      "value": "main-menu",
      "label": "Main Menu"
    },
    {
      "value": "secondary-menu",
      "label": "Secondary Menu"
    }
  ]
}

• Save the file.

Step 5: Update the Header Drawer

1. Open the header-drawer.liquid file in the Sections folder.
2. Around line 135, add the code to display the second menu in the drawer for mobile devices. The exact code will vary, but it should reference the snippet created earlier.
3. Save the file.

Step 6: Configure the Split Menu in the Customizer

1. Go to Online Store > Customize in your Shopify admin.
2. In the customizer, you’ll now see an option to select a right menu (thanks to the schema added in Step 4).
3. Choose your desired menu (e.g., a secondary menu or search menu).
4. Save and preview your store to ensure the split menu appears on both desktop and mobile devices.

Testing the Split Menu

• Desktop View: Check that the menu items appear on both the left and right sides, with the logo centered.
• Mobile View: Ensure both menus are accessible in the drawer menu.
• Functionality: Test all menu links to confirm they navigate correctly.

Notes for Non-Dawn Themes

This guide is tailored for the Dawn theme. If you’re using a different theme, the file structure or line numbers may vary. You may need to:

• Adjust the code to match your theme’s structure.
• Consult a developer for theme-specific customizations.
• Contact a professional service (like ours!) for assistance with integrating this feature.

Benefits of a Split Menu

• Branding: A centered logo enhances brand visibility.
• User Experience: Customers can quickly access different sections, improving navigation.
• Flexibility: You can customize menu items for promotions, categories, or other links.