Categories

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

Shopify. Как добавить ещё одну группу (ряд) баннеров

Ryan DeWitt Январь 12, 2016
Rating: 5.0. From 2 votes.
Please wait...

Из этого туториала Вы узнаете, как добавить ещё одну группу (ряд) баннеров в шаблонах Shopify.

Shopify. Как добавить ещё одну группу (ряд) баннеров

  1. В нашем случае в шаблоне 6 баннеров:

    Shopify. How to add one more set (row) of banners-1

  2. Давайте добавим ещё 3 баннера (ряд баннеров). Откройте Инструмент разработчика Chrome (Chrome developer tool). Вы можете также использовать Firebugв браузере Firefox. Вы можете видеть, что используются такие классы, как custom_showcase и custom_showcase__1. Для того чтобы добавить баннера, Вам нужно внести изменения в файлы и стили шаблона. Вы можете использовать эти классы, для того чтобы найти соответствующий фрагмент кода в файлах шаблона:

    Shopify. How to add one more set (row) of banners-2

  3. Убедитесь, что Вы скачали и разархивировали файлы. Откройте программное обеспечение, такое как Notepadd++, для того чтобы найти фрагмент кода в файлах шаблона . Откройте диалоговое окно поиска, для того чтобы открыть вкладку Найти и заменить (Find and replace). Укажите название класса в поле Что искать (Find what). Выберите папку, где находятся файлы шаблона, убедитесь, и нажмите на кнопку Найти всё (Find All):

    Shopify. How to add one more set (row) of banners-3

  4. Мы нашли файлы со стилями. Внесите изменения в файлы responsive.css.liquid и style.css.liquid. Откройте файл responsive.css.liquid в редакторе Shopify. Найдите нужный фрагмент кода. Скопируйте код первых трёх баннеров:

    Shopify. How to add one more set (row) of banners-4

  5. Вставьте код ниже кода css последнего баннера. Измените классы и сохраните изменения:

    custom_showcase__1 to custom_showcase__7
    
    custom_showcase__2 to custom_showcase__8
    
    custom_showcase__3 to custom_showcase__9 

    Shopify. How to add one more set (row) of banners-5

  6. Теперь Вам нужно внести аналогичные изменения в файле style.less.liquid. Откройте этот файл в редакторе Shopify. Найдите соответствующий фрагмент кода для трёх баннеров. Вставьте код ниже стилей для последнего блока. Измените классы, так как Вы это делали ранее:

    Shopify. How to add one more set (row) of banners-6

  7. Теперь Вам нужно найти файлы, в которых находится код и настройки для баннеров. В наше случае лучше всего его искать в файлах шаблона, используя ключевое слово custom_showcase. В нашем случае, изменения нужно внести в файлы: settings_data.json, settings_schema.json, widget-homepage-showcase.liquid. Откройте файл settings_data.json в редакторе Shopify. Найдите нужный фрагмент кода, используя ключевое слово custom_showcase. Скопируйте код для первых трёх баннеров:

    Shopify. How to add one more set (row) of banners-7

  8. Внесите изменения в классы и добавьте их ниже кода последнего баннера. Сохраните изменения:

    Shopify. How to add one more set (row) of banners-8

  9. Теперь нужно внести изменения в файл settings_schema.json. Найдите соответствующий фрагмент кода, используя ключевое слово custom_showcase. Вы увидите код для первого блока. Скопируйте код для трёх баннеров и измените названия классов. Вставьте изменённый код ниже кода последнего баннера. Измените номера блоков (Блок #1 нужно изменить на Блок #7 и т. д.) Обратитесь к видео-туториалу для более детальных инструкций:

    Shopify. How to add one more set (row) of banners-9

  10. Более того, Вам нужно внести изменения в файл widget-homepage-showcase.liquid. Откройте файл в редакторе Shopify:

    Shopify. How to add one more set (row) of banners-10

  11. Измените количество баннеров в соответствии с количеством баннеров на сайте. У нас на сайте теперь 9 баннеров:

    Shopify. How to add one more set (row) of banners-11

  12. Перейдите в раздел «Темы» и нажмите на кнопку Настроить тему (Customize theme). Откройте раздел Пользовательские блоки (Custom blocks). Вы добавили новые баннера. Теперь загрузите изображения для баннеров:

    Shopify. How to add one more set (row) of banners-12

  13. Обновите страницу. Вы успешно добавили новый ряд баннеров:

    Shopify. How to add one more set (row) of banners-13

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

Shopify. Как добавить ещё одну группу (ряд) баннеров

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

Submit a ticket

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