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

У большинства интернет магазинов на главной странице витрины есть небольшой блок с преимуществами этого магазина над конкурентами, в этой статье я расскажу вам как сделать такой же блок на вашем сайте.

Подбираем преимущества

В первую очередь нам необходимо придумать преимущества или достоинства нашего магазина, для примера я возьму вот такие (для примера):

Быстрая доставка (оперативная доставка любых заказов по России и странам СНГ)
Бонусная программа (начисляем бонусы за каждый ваш заказ, с помощью бонусов можно частично оплатить следующие заказы)
Широкий ассортимент и доступные цены (работаем с ведущими производителями напрямую, без участия посредников)
Клиентоориентированность (оперативно ответим на любой ваш вопрос по ассортименту нашего магазина)

Подбираем иконки

Мы придумали ряд преимуществ, теперь необходимо подобрать иконки (можно заказать на фриланс бирже или воспользоваться фотостоками), для примера я возьму вот такие иконки:

Ссылка на иконки: Package delivery icons created by FACH — Flaticon

После подбора зальём наши иконки на сайт, заходим на ftp и переходим в папку: ../public_html/image/ и переносим в неё наши иконки.

Работаем с админкой сайта

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

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

В блоке текст нажимаем первую кнопку Источник и вставляем этот код (картинки используйте свои? поменяйте название и расширение — delivery.png, discount.png, cart.png, support.png):

<div class="row preim-block">
  
<div class="col-sm-12 col-md-3">
  <div class="preim">
  	<img class="img-fluid" src="/image/delivery.png" />
    <p class="big">Бесплатная доставка</p>
    <p class="small">оперативная доставка любых заказов по России и странам СНГ</p>
  </div>
</div>

<div class="col-sm-12 col-md-3">
  <div class="preim">
 	 <img class="img-fluid" src="/image/discount.png" />
    <p class="big">Бонусная программа</p>
    <p class="small">начисляем бонусы за каждый ваш заказ, с помощью бонусов можно частично оплатить следующие заказы</p>
  </div>
</div>

<div class="col-sm-12 col-md-3">
  <div class="preim">
 	<img class="img-fluid" src="/image/cart.png" />
    <p class="big">Широкий ассортимент и доступные цены</p>
    <p class="small">работаем с ведущими производителями напрямую, без участия посредников</p>
  </div>
</div>

<div class="col-sm-12 col-md-3">
  <div class="preim">
  	<img class="img-fluid" src="/image/support.png" />
    <p class="big">Клиентоориентированность</p>
    <p class="small">оперативно ответим на любой ваш вопрос по ассортименту нашего магазина</p>
  </div>
</div>
  
</div>

Вновь нажимаем кнопку источник и нажимаем кнопку Сохранить.

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

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

Работаем со стилями

Открываем ftp и переходим: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла добавляем эти строки:

/* preim */
.preim-block {
    margin-bottom: 20px;
}
.preim {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.preim img {
    max-width: 60px;
    margin: 10px 0;
}
.preim .big {
    font-size: 14px;
    font-weight: bold;
    min-height: 40px;
}
.preim .small {
    font-size: 12px;
    min-height: 70px;
}

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