Блок преимуществ на CMS OpenCart 3.0.3.8.

Всем привет, сегодня мы с вами создадим и выведем на витрину блок преимуществ нашего интернет магазина на CMS OpenCart 3.0.3.8. Русская сборка.

Давайте сначала придумаем преимущества нашего интернет магазина, например такие:

Доступные цены — Широкий ассортимент и выгодные цены
Быстрая доставка — Отправляем заказы почтой и транспортными компаниями
Онлайн оплата — Удобная оплата банковскими картами РФ
Акции и скидки — Информируем вас о всех новинках, акциях и скидках

После этого подберём подходящие нам иконки, к примеру вот такие:

Заходим на ftp и переходим в папку: ../image/catalog/, переносим в неё наши изображения.

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

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

Блок текст переключаем на исходный код и вставляем в него эти строки:

<hr>
 <div class="row preim">
  <div class="col-sm-3">
    <img src="image/catalog/wallet.png" class="img-responsive"><br>
    <h3>Доступные цены</h3><br>
    <p class="small">Широкий ассортимент и выгодные цены</p>
  </div>
  <div class="col-sm-3">
    <img src="image/catalog/delivery.png" class="img-responsive"><br>
    <h3>Быстрая доставка</h3><br>
    <p class="small">Отправляем заказы почтой и транспортными компаниями</p>
  </div>
  <div class="col-sm-3">
    <img src="image/catalog/card.png" class="img-responsive"><br>
    <h3>Онлайн оплата</h3><br>
    <p class="small">Удобная оплата банковскими картами РФ</p>
  </div>
  <div class="col-sm-3">
    <img src="image/catalog/star.png" class="img-responsive"><br>
    <h3>Акции и скидки</h3><br>
    <p class="small">Информируем вас о всех новинках, акциях и скидках</p>
  </div>
 </div>
<hr>

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

Теперь нам необходимо вывести наш модуль на витрину нашего магазина, переходим: Дизайн > Макеты > Главная / Home > Редактировать > Верх страницы > Преимущества магазина > Добавить > Сохранить.

Смотрим на результат:

Изображения крупноваты, конечно их можно уменьшить с помощью css стилей, но я немного обработаю их в графическом редакторе, подгоню по высоте друг к другу и уменьшу размеры и вес (100px x 160px), после обработки и заливки обновлённых изображений блок выглядит вот так:

Смотрится получше, теперь поработаем со стилями (уменьшим заголовки, увеличим мелкий текст, отцентрируем текст и изображения). Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в него эти строки:

.preim,
.preim img {
    text-align: center;
    margin: 0 auto;

}
.preim h3 {
    font-size: 15px;
    margin: 0px;
}
.preim .small {
    font-size: 12px;
    font-weight: bold;
    color: #f44336;
    padding: 0;
    margin: 0;
}

Смотрим результат: