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

Всем привет, очень часто на главной странице интернет магазина необходим блок о компании (изображение и небольшой текст о компании и ассортименте магазина), именно созданием такого блока мы и займёмся.

1. Сначала нужно подобрать и подготовить наше изображение (уменьшить размер, оптимизировать вес изображения для веб), для примера я взял вот такое изображение:

Фотосток: ru.freepik.com

2. Заходим на сайт с помощью ftp и переходим: ../public_html/image/ и загружаем в эту папку наше изображение.

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

• Название магазина: О компании — Главная
• Статус: Включено

Блок текст переключаем на исходный код (иконка </>) и заполняем:

<div class="row company">
  <div class="col-xs-12 col-sm-6">
    <img src="image/shop.png" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-6">
    <h3>Интернет магазин "Demo"</h3>
    <hr>
    <p>Добро пожаловать в интернет магазин "Demo", вот уже 10 лет, наша компания занимается оптовыми и розничными поставками 
      различных товаров для офисных и домашних компьютеров, в нашем каталоге вы найдёте самые разнообразные товары:</p>
      <ul>
        <li>Компьютерные клавиатуры</li>
        <li>Проводные и беспроводные мыши для ПК</li>
        <li>Игровые и офисные коврики для мыши</li>
        <li>Колонки, наушники, микрофоны</li>
        <li>HDD и SSD диски, USB флеш карты</li>
        <li>Кабельная продукция</li>
        <li>и многое другое</li>
      </ul>
    <p>Наша компания осуществляет доставку ваших заказов по всей России</p>
    <ul>
      <li>Доставка по Москве и области - собственный транспорт</li>
      <li>Доставка по России - транспортные компании (Сдэк, ПЭК, Деловые линии)</li>
    </ul>
    <p>Заказы можно оплатить любым удобным вам способом (выбирайте при оформлении заказа)</p>
    <ul>
      <li>Банковской картой Мир, Visa, MasterCard</li>
      <li>Оплата по выставленному счёту</li>
      <li>Наличными курьеру*<br> (только для доставок нашим транспортом по Москве и области)</li>
    </ul>
  </div>
</div>

После вновь нажимаем кнопку исходный код и только после этого нажимаем кнопку Сохранить.

4. В админке сайта переходим: Дизайн > Макеты > Главная / Home > Редактировать >Верх страницы > О компании > Добавить (синяя кнопка с плюсом) > Сохранить. Переходим на витрину и проверяем:

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

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

.company {
    border: 1px solid #ddd;
    padding: 15px 0;
    font-size: 1.4rem;
    margin: 20px 0;
    display: flex;
    align-items: center;
}

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

На мой взгляд неплохо получилось, так и оставим.

Живой пример: op34.moushe.ru (Обновляется одновременно с выходом новых статей).

На этом всё, до новых встреч.