CMS OpenCart 3.0 переделка стандартного шаблона (5 часть)

Всем привет, наконец то появилась минутка свободного времени и пришло время для новой статьи по доработке стандартного шаблона CMS OpenCart 3.0, сегодня мы с вами добавим на главную (домашнюю) страницу сайта преимущества нашего магазина.

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

1. Выводим преимущества нашего магазина

Приступим:

1.1. Подбираем иконки для преимуществ нашего магазина, я обычно нахожу их здесь: www.flaticon.com, для примера я использую вот такие иконки (а вы можете выбрать любые другие):

1.2. Открываем админку нашего магазина и переходим: Каталог — Товары — Открываем любой товар и переходим на вкладку Изображения, открываем там файловый менеджер создаём любую папку (я создал папку icons) и загружаем в неё наши иконки:

Закрываем наш файловый менеджер и отменяем редактирование товара.

P.S. — Для заливки изображений можно воспользоваться и своим файловым менеджером (Filezilla, менеджер от хостинга и т.д.)

1.3. Админка — Модули/Расширения — Модули/Расширения — Текстовый блок HTML — Активировать (если вы ещё не добавляли никаких html блоков) — Редактировать и заполняем (вкладку текст переключаем на режим редактирования кода, иконка </>, после вставки кода обязательно вновь нажимаем эту иконку и только после этого нажимаем кнопку сохранить, иначе ваши правки не сохранятся):

Название модуля: Преимущества — Витрина

Текст:

<div class="row preim">
 <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
     <div class="col-sm-12 col-xs-4 image"><img src="image/catalog/icons/address.png" class="img-responsive"></div>
     <div class="col-sm-12 col-xs-8 caption"><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="col-sm-12 col-xs-4 image"><img src="image/catalog/icons/card.png" class="img-responsive"></div>
     <div class="col-sm-12 col-xs-8 caption"><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="col-sm-12 col-xs-4 image"><img src="image/catalog/icons/message.png" class="img-responsive"></div>
     <div class="col-sm-12 col-xs-8 caption"><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="col-sm-12 col-xs-4 image"><img src="image/catalog/icons/sale.png" class="img-responsive"></div>
     <div class="col-sm-12 col-xs-8 caption"><h4>Акции</h4>Выгодные цены и постоянные акции для всех покупателей</div>
   </div>
 </div>
</div>

Статус: Включено

P.S. — Название и разрешение ваших изображений могут отличаться от моих (address.png / card.png / message.png / sale.png)

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

P.S. — При желании вы можете поменять местоположение модуля.

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

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

Вступайте в нашу группу в ВК и следите за выходом новых материалов. До встречи.

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