Блоки преимуществ OpenCart 3 (2 вариант)

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

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

Блоки преимуществ OpenCart 3 (1 вариант)

Источник: www.flaticon.com

При необходимости уменьшаем их размер и вес (оптимизируем для веб).

2. Заходим на сайт по фтп и переходим: ../public_html/image/ создаём в ней папку icons и помещаем в неё наши иконки, запоминаем названия иконок.

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

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

*Если прежде не пользовались HTML модулем, если уже используете то пропускаем этот шаг, нажимаем просто Редактировать.

Заголовок не заполняем — он нам не нужен (хотя в одной из следующих статей можем сделать преимущества и с заголовком, если захотите — пишите в комментариях).

Переключаем текстовый редактор (блок Текст) в просмотр кода (Исходный код, иконка </>) и вставляем вот такой код:

<div class="row advantage-home">
    <div class="product-layout col-xs-12 col-md-4">
        <div class="product-thumb transition">
            <div class="col-xs-4"><img src="image/icons/computer.png" class="img-responsive"></div>
            <div class="col-xs-8">
                <h4>Удобная витрина</h4><span>Наш сайт отличается понятным, дружелюбным интерфейсом.</span>
            </div>
        </div>
    </div>
    <div class="product-layout col-xs-12 col-md-4">
        <div class="product-thumb transition">
            <div class="col-xs-4"><img src="image/icons/credit-card.png" class="img-responsive"></div>
            <div class="col-xs-8">
                <h4>Оплачивайте как вам удобно</h4><span>Заказ можно оплатить банковской картой, по выставленному счёту или наличными.</span>
            </div>
        </div>
    </div>
    <div class="product-layout col-xs-12 col-md-4">
        <div class="product-thumb transition">
            <div class="col-xs-4"><img src="image/icons/customer-service.png" class="img-responsive"></div>
            <div class="col-xs-8">
                <h4>Быстрая поддержка</h4><span>Возникли вопросы? Наши специалисты проконсультируют вас, просто оставьте заявку.</span>
            </div>
        </div>
    </div>
    <div class="product-layout col-xs-12 col-md-4">
        <div class="product-thumb transition">
            <div class="col-xs-4"><img src="image/icons/discount-voucher.png" class="img-responsive"></div>
            <div class="col-xs-8">
                <h4>Скидки и акции</h4><span>Подписывайтесь на информационную рассылку и узнавайте о всех наших специальных предложениях.</span>
            </div>
        </div>
    </div>
    <div class="product-layout col-xs-12 col-md-4">
        <div class="product-thumb transition">
            <div class="col-xs-4"><img src="image/icons/present.png" class="img-responsive"></div>
            <div class="col-xs-8">
                <h4>Скидка на первый заказ</h4><span>Всем покупателям предоставляем скидку в 5% на первый заказ!</span>
            </div>
        </div>
    </div>
    <div class="product-layout col-xs-12 col-md-4">
        <div class="product-thumb transition">
            <div class="col-xs-4"><img src="image/icons/tracking.png" class="img-responsive"></div>
            <div class="col-xs-8">
                <h4>Доставка по всей России</h4><span>Сотрудничаем с различными транспортными компаниями (Деловые линии, Сдэк, ПЭК и т.д.).</span>
            </div>
        </div>
    </div>
</div>

Вновь нажимаем иконку </> и только после этого сохраняем наш HTML модуль (меняем преимущества на свои и меняем названия картинок).

4. Переходим в админке: Дизайн > Макеты > Главная/Home > Редактировать, теперь выберем где модуль должен отображаться, в моём случае это верх страницы, выбираем в выпадающем списке наш модуль — Преимущества на главной нажимаем + (добавить) и кнопку сохранить, переходим на витрину сайта и проверяем наш модуль.

Смотрим и видим что все блоки отображаются, но выглядят не очень (и не удивительно, оформление само себя не сделает, будем работать с CSS стилями).

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

.advantage-home .product-layout .product-thumb {
    background: #fdd;
    margin-bottom: 20px;
    padding: 10px 0;
    min-height: 140px;
}
.advantage-home h4 {
    font-size: 1.6rem;
}

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