Categories

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

Shopify. Как добавить новый элемент меню в MegaMenu

Ray Taylor Июнь 23, 2015
Rating: 5.0. From 2 votes.
Please wait...

В этом уроке мы Вам покажем, как добавить новый элемент меню в MegaMenu в шаблонах Shopify.

Shopify. Как добавить новый элемент меню в MegaMenu

  1. Войдите в Админ Панель и перейдите в секцию Темы (Themes).

  2. Нажмите на кнопку Изменить тему (Customize theme).

  3. Откройте опцию Megamenu, чтобы увидеть 6 элементов заданных по умолчанию.

  4. В этом примере, мы добавим новый элемент меню с помощью Пользовательской ссылки (Custom Link), как например элементы меню О Нас (About Us) или Свяжитесь с нами (Contact Us).

  5. Вернитесь на страницу Темы и выберите опцию Изменить HTML/CSS (Edit HTML/CSS option).

  6. Под секцией Фрагменты (Snippets), найдите и откройте файл widget-megamenu.liquid. В секции Настройки (Config), откройте файлы settings_data.json и settings_schema.json.

  7. В файле widget-megamenu.liquid выберите элемент меню, который Вы хотите продублировать, в нашем примере мы используем элемент 6.

  8. Скопируйте код элемента 6 и вставьте ниже.

  9. Замените все цифры 6 на 7:

    <li class="megamenu__6">
    <a href="{{ settings.megamenu6_link }}">{{ settings.megamenu6_text }}{% if settings.megamenu6_badge and settings.megamenu6_badge != '' %}<span class="menu_badge">{{ settings.megamenu6_badge }}</span>{% endif %}</a>
    </li>
    <li class="megamenu__7">
    <a href="{{ settings.megamenu7_link }}">{{ settings.megamenu7_text }}{% if settings.megamenu7_badge and settings.megamenu7_badge != '' %}<span class="menu_badge">{{ settings.megamenu7_badge }}</span>{% endif %}</a>
    </li>
    

    shopify_how_to_add_menu_item_to_megamenu1

  10. Сейчас нам надо продублировать и добавить наш новый элемент для мобильной версии.

  11. Найдите следующий код: megamenu_mobile visible-xs visible-sm.

  12. Продублируйте элемент 6. Измените все цифры 6 на 7, как мы делали это раньше:

    <li class="megamenu__7">
    <a href="{{ settings.megamenu7_link }}">{{ settings.megamenu7_text }}</a>
    </li>
    

    shopify_how_to_add_menu_item_to_megamenu2

  13. Сохраните файл.

  14. Откройте settings_data.json и добавьте следующий код:

    "megamenu7_text": "Test",
    "megamenu7_link": "\/pages\/contact-us",
    "megamenu7_badge": "",
    

    shopify_how_to_add_menu_item_to_megamenu3

  15. После этого, откройте файл settings_schema.json и добавьте следующий код:

    "type": "header",
    "content": "Item 7 (new custom link)"
    },
    {
    "type": "text",
    "id": "megamenu7_text",
    "label": "Item name"
    },
    {
    "type": "text",
    "id": "megamenu7_link",
    "label": "Item URL"
    },
    {
    "type": "text",
    "id": "megamenu7_badge",
    "label": "Item badge (optional)"
    }
    

    На заметку: так как элемент 6 больше не последний в списке, мы должны добавить комму перед новым кодом:

    shopify_how_to_add_menu_item_to_megamenu4

  16. Сохраните этот файл и выберите опцию Изменить Тему (Customize theme), чтобы увидеть добавленные элементы:

    shopify_how_to_add_menu_item_to_megamenu5

Спасибо, что ознакомились с уроком. Теперь вы знаете, как добавить новый элемент меню в MegaMenu.

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

Shopify. Rак добавить новый элемент меню в MegaMenu

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

Submit a ticket

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

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