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

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

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

   

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

   

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

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

   {
   "type": "link_list",
   "id": "megamenu5_sub",
   "label": "Dropdown"
   },
            

   

5. В папке Snippets, найдите и нажмите на файл widget-megamenu.liquid, для того чтобы открыть его в онлайн редакторе кода.

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

   {{ settings.megamenu5_text }}{% if settings.megamenu5_badge and settings.megamenu5_badge != '' %}{{ settings.megamenu5_badge }}{% endif %}

   {% capture linklist_iteration %}megamenu5_sub{% endcapture %}
            {% capture linklist_name %}{{ settings[linklist_iteration] }}{% endcapture %}
   	
   	
   
   	  {% for link in linklists[linklist_name].links %}
   	  
   {{ link.title | link_to: link.url }}
   	  {% endfor %}
          

   

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;}

   

9. Сохраните изменения.

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

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