Стилизуем категории opencart на главной странице

С левой части экрана на главной странице магазины выведем категории с товарами для opencart2.

Для этого у пункта меню макеты редактируем нашу страницу home и добавляем левую колонку с категориями.

Вывод категории на странице будет возле слайдера .

Как добавить категорию прочитаем тут.

Переопределим список категорий, как мы хотим.

1. Для всей цепочки list-group-item сделаем отступы padding: 15px 20px.
2. Уберем все полосы между элементами задав border-bottom: 1px transparent solid и top.
3. Зададим фиолетовый цвет бордюру.
4. Для первого &:first-child добавим border-top: 1px #b641b0 solid.
5. Наводим мышку на главной странице на вывод категорий и переходим посмотреть код, копируем все классы в sublime text.

• При наведении на категорию будем менять цвет на синий.
• Цвет текста будет белый.
• Добавим отступ у текста свойством text-indent: 10px.

6. У активной категории затемним синий цвет background-color: darken (#1f62e9, 10%) и оставим отступ от остальных на десять пикселей.

Код в stylesheet.sass

Итог отображения в браузере категорий товаров на главной странице opencart.

Seo описание для категорий.

1. При добавление категории описание должно быть уникальным.
2. Количество символов должно быть от 1500 до 2500.
3. Одно точное вхождение название категории в описании.
4. Использовать синонимы категории.

Html тег title заполняется модулем autourl.ocmod.xml.

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