Categories

Новые шаблоны

Shopify. Как добавить выпадающее меню в Мегаменю

Eva Fox Июнь 13, 2016
Rating: 5.0. From 2 votes.
Please wait...

Из этого туториала Вы узнаете, как добавить выпадающее меню в Мегаменю вашего магазина Shopify.

  1. Откройте админ панель сайта и перейдите на вкладку Интернет-магазин -> Темы (Online Store -> Themes).

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_1
  2. Найдите шаблон, в который Вы хотите внести изменения, нажмите на кнопку , затем, нажмите на кнопку Редактировать HTML/CSS (Edit HTML/CSS).

    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_2
  3. В папке Config, найдите и нажмите на файл settings_schema.json, для того чтобы открыть его в онлайн редакторе кода.

  4. Добавьте следующий фрагмент кода в редакторе:

    {
    "type": "link_list",
    "id": "megamenu5_sub",
    "label": "Dropdown"
    },
             
    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_3
  5. В папке Snippets, найдите и нажмите на файл widget-megamenu.liquid, для того чтобы открыть его в онлайн редакторе кода.

  6. Добавьте фрагмент кода для выпадающего списка после строки пятого элемента в редакторе:

    <a href="{{ settings.megamenu5_link }}">{{ settings.megamenu5_text }}{% if settings.megamenu5_badge and settings.megamenu5_badge != '' %}<span class="menu_badge">{{ settings.megamenu5_badge }}</span>{% endif %}</a>
    {% capture linklist_iteration %}megamenu5_sub{% endcapture %}
             {% capture linklist_name %}{{ settings[linklist_iteration] }}{% endcapture %}
    	
    	<ul>
    	  {% for link in linklists[linklist_name].links %}
    	  <li>{{ link.title | link_to: link.url }}</li>
    	  {% endfor %}
           </ul>
    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_4
  7. В папке Assets, найдите и нажмите на файл style.css.liquid, для того чтобы открыть его в онлайн редакторе кода.

  8. Добавьте стили выпадающего списка в редакторе:

    li.megamenu_item_5 {
      position: relative;
      }
    
    .sf-menu > li.megamenu_item_5 > ul {
      width: 200px;
      position: absolute;
      left: 0;
      top: 50px;
      }
    .sf-menu > li.megamenu_item_5 > ul li a {
      padding-left: 5px;
      padding-bottom: 10px;
      font-size: 25px;}
    Shopify._How_to_add_drop-down_menu_to_Mega_Menu_5
  9. Сохраните изменения.

  10. Перейдите на вкладку Интернет-магазин -> Темы > Настроить тему > Мегаменю (Online Store -> Themes > Customize theme > Mega Menu) и добавьте выпадающее меню для элемента меню (в нашем случае, это 5 элемент).

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Shopify. Как добавить выпадающее меню в Мегаменю
Шаблоны Shopify
Эта запись была размещена в Shopify туториалы и помечена как dropdown, menu, Shopify, submenu. Добавьте в закладки постоянную ссылку.

Submit a ticket

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

Чат
We help you to choose the right product.