CMS OpenCart 3.0 выводим преимущества магазина на домашнюю страницу (1 вариант)

Всем привет, сегодня мы с вами выведем преимущества нашего магазина на домашнюю страницу витрины CMS OpenCart 3.0.

Список задач на сегодня:

1. Подбираем иконки и закидываем их на FTP
2. Работаем с HTML модулем (В админке)
3. Работаем с CSS стилями (catalog/view/theme/default/stylesheet/stylesheet.css)

Приступим:

1. Для подбора иконок я использую вот этот ресурс: https://www.flaticon.com, для примера я подобрал вот такие иконки:

Теперь открываем свой файловый менеджер (в моём случае это FileZilla) и переносим наши иконки в папку image/catalog (для удобства можно создать отдельную подпапку icons, но я буду делать без неё) и переносим в неё все наши изображения, обязательно запомните названия и расширение изображений, нам это понадобится чуть позже!

2. Заходим в админку и переходим: Модули / Расширения > Модули / Расширения > Текстовый блок HTML > Активировать > Редактировать и заполняем:

• Название модуля: Преимущества
• Заголовок: Преимущества
• Статус: Включено

А в поле текст в панели редактирования ищем иконку Code View (выглядит вот так — </>) и нажимаем на неё, текстовый редактор меняет свой вид на такой:

и вставляем этот код:

<div class="row">
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image"><img src="image/catalog/conversation.png"></div>
    <div class="caption preim"><h4>Грамотные консультанты</h4></div>
   </div>
  </div>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image"><img src="image/catalog/credit-card.png"></div>
    <div class="caption preim"><h4>Онлайн кредитование </h4></div>
   </div>
  </div>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image"><img src="image/catalog/delivery-truck.png"></div>
     <div class="caption preim"><h4>Бесплатная доставка при заказе от <b>5.000р.</b></h4></div>
   </div>
  </div>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image"><img src="image/catalog/shopping-bag.png"></div>
    <div class="caption preim"><h4>Широкий ассортимент</h4></div>
   </div>
  </div>
</div>

Вновь нажимаем кнопку Code View и только после этого нажимаем кнопку Сохранить!

P.S. — Названия картинок и преимущества меняем на свои, я написал эти просто в качестве примера!

Теперь нам необходимо вывести наши преимущества на главную страницу, для этого переходим: Дизайн > Макеты > Home > Редактировать и выводим наш HTML модуль:

После этого нажимаем кнопку Сохранить и переходим на витрину нашего магазина, если всё сделано правильно вы увидите это:

Неплохо, но у карточек преимуществ очень большая высота, исправим это в следующем шаге.

3. Откроем файл stylesheet.css и в конец файла вставим эти строки:

.product-thumb .preim {
  min-height: 40px;
  text-align: center;
}

Чистим все кеши и проверяем:

При необходимости добавляем дополнительные стили и меняем оформление.

На сегодня всё, вступайте в нашу группу в ВК и следите за выходом новых материалов.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru