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

Всем привет, в этой статье мы вновь будем работать с преимуществами нашего интернет магазина на CMS OpenCart 3.0, но в этот раз мы немного изменим дизайн — сделаем блок преимуществ компактнее и немного изменим оформление с помощью CSS стилей.

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

Открываем свой файловый менеджер (к примеру FileZilla) и переходим в папку: ../image/catalog, теперь перемещаем в эту папку наши иконки.

(P.S. — у меня уже есть иконка delivery-truck.png — из прошлой статьи по преимуществам нашего магазина, поэтому я её переименовываю в delivery-truck-new.png)

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

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

Поле ввода Текст переключаем в режим Code View ( иконка </> ) и заполняем:

<div class="row preim-2">
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image col-sm-4"><img src="image/catalog/chat.png" class="img-responsive"></div>
    <div class="caption col-sm-8"><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 col-sm-4"><img src="image/catalog/circular-clock.png" class="img-responsive"></div>
    <div class="caption col-sm-8"><h4>Работаем 7 дней в неделю!</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 col-sm-4"><img src="image/catalog/delivery-truck-new.png" class="img-responsive"></div>
     <div class="caption col-sm-8"><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 col-sm-4"><img src="image/catalog/banking.png" class="img-responsive"></div>
    <div class="caption col-sm-8"><h4>Скидки и акции для постоянных покупателей</h4></div>
   </div>
  </div>
</div>

После заполнения вновь нажимаем кнопку Code View и только после этого нажимаем кнопку Сохранить.

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

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

.preim-2 .product-thumb {
  border: 1px solid #00BCD4;
  border-radius: 3px;
}
.preim-2 img {
  margin: 10px auto;
}
.preim-2 .product-thumb .caption {
  min-height: 80px;
}
.preim-2 .product-thumb:hover {
  background: #FAFAFA;
}

Чистим все кеши и проверяем результат нашей работы:

Пожалуй неплохо, так и оставим (конечно вы можете поиграть стилями, вставить ссылки на необходимые статьи и т.д.).

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

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