Additional menu

Technical Q&A
,
1

I have a header menu with triple nesting of categories in my store. How can I show on the first nesting page or the second nesting that there are more nested categories? Maybe I can add a new menu to the page? I tried to implement this using a category carousel, but it doesn’t look very good.

Screenshot_4
Screenshot_41850×777 93 KB

Maybe someone has come up with a better solution. I would be grateful for any help.

2

Hello @VladimirGura

Yes, you can add an extra menu by creating a new, dedicated theme section.

First, go to Online Store → Navigation in your admin to create your new menu (e.g., “Top Bar Menu”). Next, for safety, duplicate your theme. Then, in the code editor for the duplicated theme, go to the Sections folder, click “Add a new section,” name it secondary-menu-bar.liquid, delete all the default content, and paste in this exact code:

<div class="secondary-menu-bar color-{{ section.settings.color_scheme }}">
  <div class="page-width">
    <ul class="secondary-menu-list list-unstyled" role="list">
      {%- for link in section.settings.menu.links -%}
        <li>
          <a href="{{ link.url }}" class="secondary-menu-link link-styled">
            {{ link.title }}
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>

{%- style -%}
  .secondary-menu-bar { padding: 10px 0; }
  .secondary-menu-list { display: flex; justify-content: center; align-items: center; gap: 2rem; margin: 0; }
  .secondary-menu-link { font-size: 1.4rem; text-decoration: none; }
{%- endstyle -%}

{% schema %}
{
  "name": "Secondary Menu Bar",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" }
      ],
      "default": "background-1"
    }
  ],
  "presets": [
    {
      "name": "Secondary Menu Bar"
    }
  ]
}
{% endschema %}

In the Theme Editor, go to the page where you want the menu. In the left panel, click “+ Add section” and select your new “Secondary Menu Bar”. Click on the new section, use the settings on the right to choose the menu you created in the first step, and drag it to your desired position (e.g., above the main header).

Hope this helps!

3

Thank you. Everything is pretty good

4

Also tell me how I can set up the background colors. Because now it doesn’t work.