Categories

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

Shopify. Как работать с количеством колонок в элементах Мегаменю

Charlotte Bennett Июнь 15, 2016
Rating: 5.0. From 2 votes.
Please wait...

В этом туториале мы покажем Вам, как работать с количеством колонок в элементах Мегаменю в наших шаблонах Shopify.

Как правило, в выпадающем списке пункта меню «Товары» отображается несколько колонок. Каждая колонка ссылается на определённую коллекцию.

Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_1

Для того чтобы добавить новую колонку с категорией в выпадающий список, следуйте таким инструкциям:

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

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_2
  2. В правом верхнем углу нажмите на три точки и выберите Редактировать HTML/CSS (Edit HTML/CSS).

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_3
  3. Откройте файл settings_schema.json, который расположен в папке Настройка (Config), и найдите код «Megamenu».

  4. Вы можете узнать код элемента по его номеру, например «megamenu2_sub_col__4». Скопируйте код любого элемента и введите его после последнего элемента, заменив его номер следующей цифрой. В нашем случае, нужно заменить 4 на 5. Сохраните файл.

    Обратите внимание: Код может отличаться в некоторых шаблонах.

  5. Верните в раздел Интернет-магазин (Online Store) -> Темы (Themes) и нажмите на кнопку Настроить тему (Customize Theme).

  6. Нажмите на вкладку Мегаменю (Megamenu) и поставьте галочку напротив элемента Каталог товаров (products catalog) (как правило, это второй элемент в списке).

  7. Выберите Коллекцию для созданного элемента и Сохраните изменения (Save changes).

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_8

Теперь Вам нужно настроить макет вашего выпадающего списка, который построен на фреймворке Bootstrap.

  1. Откройте файл widget-megamenu.liquid, который расположен в папке Сниппеты (Snippets).

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_9
  2. Найдите код элемента меню. Вы можете узнать его по классу «megamenu_item_2», где ‘2’ – это порядковый номер этого элемента.

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_10
  3. Измените код {% for i in (1..4) %} на {% for i in (1..5) %}, для того чтобы иметь 5 колонок.

  4. Замените класс bootstrap:

    <div class="col-sm-3">

    на:

    <div class="col-sm-2"> 

    Обратите внимание: количество колонок отличается в разных шаблонах, по этому ваш код шаблона может содержать другой класс bootstrap.

  5. Сохраните файл и проверьте изменения на сайте.

Мы надеемся, что этот туториал был для Вас полезен.

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

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

Submit a ticket

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