Как заменить Mega Menu на выпадающее меню (Dropdown) в теме Shopify Horizon

22 август 2026 г.

В бесплатной теме Horizon навигация по умолчанию работает в формате Mega Menu. Если структура вашего каталога небольшая и содержит всего по несколько ссылок в разделах, такое меню выглядит громоздко и оставляет много пустого пространства.

В этом руководстве мы заменим стандартную структуру на аккуратное выпадающее меню (Dropdown) 2-го и 3-го уровня без сторонних платных приложений.

Шаг 1: Создаем новый сниппет

В админ-панели Shopify откройте Online Store → Themes.
Нажмите кнопку с тремя точками ... и выберите Edit code.
В левой панели откройте папку Snippets и нажмите Add a new snippet.
Назовите файл header-menu-dropdown.liquid

Шаг 2: Вставляем Liquid и CSS код

Вставьте следующий код в созданный файл и сохраните изменения:

header-menu-dropdown.liquid

{% liquid
  assign nav_menu = block.settings.menu
%}

<div class="horizon-dropdown-nav desktop-only">
  <nav class="hdr-nav" aria-label="Main Navigation">
    <ul class="hdr-nav__menu list-unstyled" role="list">
      {% for link in nav_menu.links %}
        <li class="hdr-nav__item{% if link.links.size > 0 %} has-dropdown{% endif %}">
          <a href="{{ link.url }}" class="hdr-nav__link{% if link.active %} is-active{% endif %}">
            <span>{{ link.title }}</span>

            {% if link.links.size > 0 %}
              <span class="hdr-nav__arrow" aria-hidden="true">
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            {% endif %}
          </a>

          {% if link.links.size > 0 %}
            <div class="hdr-dropdown">
              <ul class="hdr-dropdown__menu list-unstyled" role="list">
                {% for childlink in link.links %}
                  <li class="hdr-dropdown__item{% if childlink.links.size > 0 %} has-dropdown-sub{% endif %}">
                    <a href="{{ childlink.url }}" class="hdr-dropdown__link{% if childlink.active %} is-active{% endif %}">
                      {{ childlink.title }}

                      {% if childlink.links.size > 0 %}
                        <span class="hdr-nav__arrow--sub" aria-hidden="true">›</span>
                      {% endif %}
                    </a>

                    {% if childlink.links.size > 0 %}
                      <div class="hdr-dropdown hdr-dropdown--sub">
                        <ul class="hdr-dropdown__menu list-unstyled" role="list">
                          {% for grandchildlink in childlink.links %}
                            <li>
                              <a href="{{ grandchildlink.url }}" class="hdr-dropdown__link{% if grandchildlink.active %} is-active{% endif %}">
                                {{ grandchildlink.title }}
                              </a>
                            </li>
                          {% endfor %}
                        </ul>
                      </div>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </nav>
</div>

{% stylesheet %}
.horizon-dropdown-nav {
  display: block;
}

.hdr-nav__menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hdr-nav__item {
  position: relative;
  list-style: none;
}

.hdr-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  color: var(--color-foreground, #121212);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.hdr-nav__link:hover,
.hdr-nav__link.is-active {
  opacity: 0.75;
}

.hdr-nav__arrow {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.hdr-nav__item:hover > .hdr-nav__link .hdr-nav__arrow {
  transform: rotate(180deg);
}

.hdr-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-background, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease-in-out;
  z-index: 100;
}

.hdr-dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
}

.hdr-nav__item:hover > .hdr-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hdr-dropdown__item {
  position: relative;
  list-style: none;
}

.hdr-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--color-foreground, #121212);
  text-decoration: none;
  font-size: 0.9em;
  transition: background 0.15s ease;
}

.hdr-dropdown__link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.hdr-dropdown--sub {
  top: 0;
  left: 100%;
  transform: translateX(8px);
}

.hdr-dropdown__item:hover > .hdr-dropdown--sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media screen and (max-width: 1024px) {
  .horizon-dropdown-nav.desktop-only {
    display: none !important;
  }

  .header__drawer {
    display: flex !important;
  }

  .header__row.header__navigation-bar-row {
    display: none;
  }
}
{% endstylesheet %}

Шаг 3: Заменяем стандартное меню

Перейдите в папку Blocks.
Откройте файл _header-menu.liquid
Найдите код разметки <div class="header-menu__inner"> и закомментируйте его.
Вставьте вызов нашего сниппета вместо него:

_header-menu.liquid

{% comment %}
<div class="header-menu__inner">
  <nav
    class="menu-list"
    aria-label="{{ 'accessibility.header_navigation_label' | t }}"
    style="{% render 'menu-font-styles', settings: block_settings, menu_type: 'mega_menu' %}"
  >
    {% assign class = 'overflow-menu' | append: background_color_classes %}
    {% render 'overflow-list',
      class: class,
      ref: 'overflowMenu',
      children: children,
      minimum-items: 2,
      data-testid: 'header-menu-overflow-list',
      attributes: 'data-skip-node-update'
    %}
  </nav>
</div>
{% endcomment %}

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

Шаг 4: Выравниваем шапку по высоте

Откройте папку Assets.
Выберите файл base.css
В самый конец файла вставьте следующий код:

base.css

.header__columns.spacing-style {
  align-items: center;
}

Нужна помощь с настройкой Shopify?

Если вам нужна помощь с кастомизацией темы, навигации или других элементов Shopify-магазина, обратитесь к нам:

Email: info@icestoregroup.com
Telegram: @icestoregroupshopify

Язык

Корзина пуста