How to use a header menu outside of header.liquid

[rosstik333]

In my header.liquid there is a menu in shema:

    {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },

And there is a mobile drawer menu: 

 {% render 'component-menu-drawer' %}

The problem is that I need to use a menu drawer outside of header.liquid in theme.liquid. How is it possible to take a menu from the header without adding it to global settings_schema.json. For example, as in the theme https://themes.shopify.com/themes/sleek/styles/glossy/preview . There, the drawer menu is located at the top level, along with the sections, and in the global menu settings there is no section under the menu, it is taken from what is in header.liquid. How is it possible to do the same?

[VipulBudhiraja]

To use the menu drawer from header.liquid in theme.liquid without modifying settings_schema.json, you can follow these steps:

Solution

1. Create a Global Menu Drawer Snippet:

   • Instead of directly rendering the menu drawer within header.liquid, create a separate snippet for the drawer menu, such as menu-drawer.liquid, to make it reusable across the theme.
   • Go to Online Store > Themes > Edit Code > Snippets > Add a new snippet and name it menu-drawer.liquid.
   • Inside menu-drawer.liquid, add the code for rendering the drawer menu:
     liquid

     Copy code

     {% render 'component-menu-drawer' %}
   • This separates the drawer component so it can be used in both header.liquid and theme.liquid.

2. Reference the Menu Drawer in theme.liquid:

   • Go to Online Store > Themes > Edit Code > Layout > theme.liquid.
   • Locate the place in theme.liquid where you want the menu drawer to appear (typically near the top-level elements).
   • Include the snippet:
     liquid

     Copy code

     {% render 'menu-drawer' %}
   • This will pull in the same menu drawer structure that’s used in header.liquid.

3. Use Conditional Logic in Header (Optional):

   • If you want to avoid duplicating the menu drawer in both header.liquid and theme.liquid, add conditional logic in header.liquid to only display the drawer if it’s not already rendered in theme.liquid.
   • For example:
     liquid

     Copy code

     {% unless menu_drawer_loaded %} {% assign menu_drawer_loaded = true %} {% render 'menu-drawer' %} {% endunless %}
   • This approach defines a global variable menu_drawer_loaded to prevent duplicate rendering across templates.

4. Set menu as a Block Element (Optional):

   • If you prefer, you can also modify schema in header.liquid to make the menu a block element, which gives you control over adding it where needed without repeating settings.
   • In header.liquid, add menu as a block like this:
     json

     Copy code

     { "type": "link_list", "id": "menu", "default": "main-menu", "label": "t:sections.header.settings.menu.label" }
   • Then reference this in the new menu-drawer snippet to display the menu dynamically.

By using a snippet for the drawer, you create a reusable component accessible from any template, keeping your settings organized and avoiding unnecessary edits to settings_schema.json.

---

Need seamless customer engagement on your site? Try the Debales AI Chatbot on Shopify for personalized support—let’s chat!

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!