Помощь
Войти

Настройка выпадающих меню в интернет-магазине

С помощью выпадающих меню можно группировать товары, коллекции или страницы, чтобы клиентам было проще ориентироваться в вашем интернет-магазине. Например, если у вас много товаров, вы можете объединить их в коллекции, а затем использовать выпадающее меню в главном меню для их упорядочивания. Это поможет клиентам находить нужные им категории товаров.

Вы также можете добавлять, удалять или редактировать пункты меню в выпадающих или стандартных меню.

Просматривать и изменять меню интернет-магазина можно в разделе Контент > Меню в панели администратора Shopify.

На этой странице

Вложение пунктов меню для создания выпадающих меню

Выпадающие меню создаются путем вложения пунктов меню (через создание или перемещение) в пункт верхнего уровня. Пункт верхнего уровня отображается в главном меню вашего интернет-магазина, а вложенные пункты — в выпадающем меню. Пункт верхнего уровня может содержать до двух уровней вложенных выпадающих меню.

Во всех темах вложенные пункты отображаются как выпадающие меню в составе главного меню, а в некоторых — и в других местах.

Расположение главного и выпадающих меню в интернет-магазине зависит от используемой темы. В некоторых темах рядом с названием выпадающего меню в главном меню отображается значок, чтобы клиенты понимали, что за ним скрывается дополнительное меню.

Добавление выпадающего меню из главного меню

Вы можете добавить выпадающее меню из любого пункта главного меню.

Порядок действий:

Компьютер

  1. В панели администратора Shopify перейдите в раздел Контент > Меню.

  2. Нажмите на название главного меню.

  3. Выберите один из пунктов главного меню, который станет заголовком вашего выпадающего меню, или добавьте новый пункт меню. Если вы не хотите, чтобы заголовок был ссылкой, введите # в поле Найти или вставить ссылку для этого пункта.

  4. Чтобы добавить пункт в выпадающее меню, выполните следующие действия:

    1. Нажмите «Добавить пункт меню».
    2. В поле Название введите название пункта меню.
    3. В поле Найти или вставить ссылку введите или выберите место назначения для пункта меню.

  5. Нажмите «Добавить», а затем щелкните значок Перетащить и перетащите пункт меню, чтобы вложить его в пункт-заголовок.

  6. Нажмите «Сохранить меню».

Мобильное устройство

  1. В приложении Shopify нажмите значок Меню.

  2. В меню «Содержимое» нажмите значок стрелка вниз, а затем нажмите «Меню».

  3. Нажмите на название вашего главного меню.

  4. Выберите один из пунктов главного меню, который будет заголовком вашего выпадающего меню, или добавьте новый пункт меню, который станет заголовком. Если вы не хотите, чтобы заголовок был ссылкой, введите # в поле «Найти или вставить ссылку» для этого пункта меню.

  5. Чтобы добавить пункт в выпадающее меню, выполните следующие действия:

    1. Нажмите «Добавить пункт меню».
    2. В поле Название введите название пункта меню.
    3. В поле Найти или вставить ссылку введите или выберите место назначения для пункта меню.

  6. Нажмите «Добавить», а затем нажмите Перетащить и перетащите пункт меню, чтобы вложить его под пункт-заголовок.

  7. Нажмите «Сохранить» или ✓.

Выпадающие меню также можно использовать в нижних меню.

Порядок действий:

  1. В панели администратора Shopify перейдите в раздел Контент > Меню.
  2. Необязательно: следуйте тем же принципам вложенности, что и для главных меню, например, перетаскивая пункты меню под пункт-заголовок для создания выпадающей структуры. Для этого нажмите Перетащить и перетащите пункты на нужное место.
  3. Введите # в поле «Ссылка» для пунктов-заголовков, которые не должны вести на страницу (например, для заголовков «Поддержка» или «Обзор»).

Совместимость с темами

Ознакомьтесь со следующими рекомендациями по добавлению выпадающих меню в вашу тему:

  • Большинство тем поддерживает до двух уровней вложенности выпадающих меню. Чтобы подтвердить совместимость, изучите документацию по вашей теме или протестируйте вложенные пункты.
  • Некоторым темам может потребоваться настройка CSS для улучшения удобства использования на мобильных устройствах. Не изменяйте код темы, если вы с ним не знакомы. Подробнее о настройке темы.

Как определить, поддерживает ли ваша тема вложенные выпадающие меню

Чтобы определить, поддерживает ли ваша текущая тема необходимое вам количество уровней вложенности выпадающих меню, воспользуйтесь следующими ресурсами:

  1. Проверьте документацию по теме: изучите документацию по теме, чтобы найти информацию о возможностях меню и поддерживаемых уровнях вложенности.
  2. Протестируйте вложенные пункты: создайте тестовую структуру меню с нужным вам количеством уровней вложенности и убедитесь, что она правильно отображается и на компьютерах, и на мобильных устройствах.

Большинство тем поддерживает до двух уровней вложенности выпадающих меню. Если у вас возникают проблемы с выпадающими меню, убедитесь, что ваша тема поддерживает то количество уровней вложенности, которое вы пытаетесь реализовать, поскольку некоторым темам может потребоваться дополнительная настройка для поддержки нескольких уровней вложенности.

Лучшие практики для выпадающих меню

Ознакомьтесь со следующими лучшими практиками по созданию полезной структуры меню, которая будет хорошо работать на всех устройствах:

  • Используйте описательные названия, например «Покупка по категориям», для пунктов меню верхнего уровня со ссылками #.
  • Убедитесь, что меню оптимизированы для мобильных устройств. Вы можете протестировать меню на мобильных устройствах, чтобы убедиться, что выпадающие меню раскрываются должным образом.
  • Добавляйте не более семи пунктов меню верхнего уровня, чтобы избежать перегруженности.
  • Используйте понятные и описательные названия ссылок. Например, «Коллекции» и «Летние платья».
  • В каждом меню может быть до 10 000 пунктов, а всего в вашем магазине может быть до 1000 меню. Любой пункт меню с подпунктами в выпадающем меню считается отдельным меню в рамках этого лимита.

Доступность выпадающих меню

В большинстве тем заголовки выпадающих меню реализованы как кнопки, а не кликабельные ссылки. Это сделано намеренно для обеспечения доступности, чтобы помочь клиентам, использующим ассистивные технологии, понять структуру навигации.

Когда пункт меню верхнего уровня управляет выпадающим подменю, он работает как кнопка для раскрытия меню, а не как ссылка на новую страницу. Такой подход гарантирует, что клиенты, использующие программы чтения с экрана или другие ассистивные устройства, смогут правильно перемещаться по системе меню вашего магазина.

Если вы хотите, чтобы клиенты могли перейти на страницу основной категории (например, «Все товары» или «Все коллекции»), то добавьте ссылку на неё как первый пункт в само выпадающее меню, а не делайте заголовок кликабельным.

Устранение распространённых проблем

Ознакомьтесь со следующими решениями распространённых проблем, с которыми вы можете столкнуться при настройке меню навигации:

  • Перенаправление в мобильном меню: если при нажатии на ссылку в меню верхнего уровня происходит перенаправление на новую страницу, проверьте меню в своей панели администратора Shopify и убедитесь, что в поле для ссылки указан символ #.

  • Проблемы с видимостью: если вложенные пункты не отображаются, убедитесь, что они перетащены под пункт-заголовок и имеют отступ в интерфейсе «Меню». Проверьте, поддерживает ли ваша тема настроенное вами количество уровней вложенности.

  • Совместимость с темой: если у вас возникают проблемы с выпадающими меню, убедитесь, что ваша тема поддерживает то количество уровней вложенности, которое вы пытаетесь реализовать. Некоторым темам может потребоваться дополнительная настройка для поддержки нескольких уровней вложенности.

  • Создание вложенного меню заблокировано: если вы столкнулись с ошибкой «Меню не может содержать вложенные меню. Чтобы использовать эту возможность, подключите функцию вложенной навигации», возможно, в вашем магазине необходимо активировать функцию вложенной навигации. Обычно это касается магазинов, созданных до 2018 года. В этом случае обратитесь в Службу поддержки Shopify.

  • Отображается не то меню: если у вас есть несколько навигационных ссылок, ведущих на одну и ту же страницу (например, на главную), ваша тема может отображать не то подменю. Чтобы избежать путаницы, убедитесь, что каждый раздел навигации ссылается на уникальную страницу.

  • Исчезновение пунктов меню: если ссылки в меню исчезают, хотя вы их не удаляли, проверьте, не удалили ли вы товары, коллекции или страницы, на которые ссылались эти пункты. При удалении связанного ресурса удаляется и соответствующий пункт меню.

Настройка кода темы для выпадающих меню

Для тем, требующих более глубокой настройки, вы можете рассмотреть возможность изменения кода темы.