Интернет-магазин масел и автохимии на OpenCart: подбор + оплата + доставка в одном сайте``
Услуги: UX/UI-дизайн, разработка на OpenCart, поддержка и сопровождение, интеграция с 1С, платёжной системой и Новой почтой
Ассортимент охватывает моторные и трансмиссионные масла, технические жидкости и автохимию для разных типов транспорта, поэтому покупателю нужно быстро сузить выбор по характеристикам товара.
Выбор товара не должен заканчиваться на карточке: покупателю нужен последовательный переход через корзину, оплату и выбор способа получения заказа.
Для ежедневной работы e-commerce нужен обмен данными с 1С, платёжной системой и Новой почтой без ручного переноса информации между отдельными инструментами.
Магазин уже работал на OpenCart, поэтому основной задачей стало не создание новой платформы, а последовательное улучшение её функций, UX/UI и сценариев покупки.
Товары разделены по типу транспорта и назначению: отдельно представлены решения для легковых и грузовых автомобилей, мототехники и разных систем автомобиля.
В каталоге покупатель сужает ассортимент по цене, продуктовой линейке, ёмкости, вязкости SAE и другим доступным параметрам.
Карточка показывает фотографии, название, цену, характеристики и информацию, необходимую для выбора, после чего товар можно добавить в корзину.
OpenCart интегрирован с 1С, платёжной системой и Новой почтой, чтобы основные операции интернет-магазина работали в связанной среде.
Покупатель выбирает доступный вариант расчёта и доставки, а для части заказов доступен самовывоз из физических точек.
Petronas Shop содержит подбор масла, информационные страницы, новости, акции, полезные материалы, отзывы и контакты — покупатель получает не только каталог, но и сопроводительную информацию для выбора и заказа.
Контрастная палитра связывает магазин с автомобильной тематикой Petronas
- Чёрный цвет формирует основные навигационные зоны
- Белый текст выделяет основную информацию
- Бирюзовый выделяет активные элементы и основные действия
- Светлый геометрический фон поддерживает товарные страницы
Интерфейс построен на резком контрасте тёмных плоскостей, светлого контентного поля и фирменного бирюзового акцента. На больших баннерах используются автомобили и продукция Petronas, тогда как каталог остаётся светлым и не конкурирует с фотографиями товаров. Геометрический фон объединяет эти разные по насыщенности части сайта.
Шапка разделяет постоянные элементы на два уровня
- Сервисная панель вынесена над основной навигацией
- Главные разделы собраны в отдельном горизонтальном меню
- Поиск, корзина и профиль сгруппированы справа от основного меню
- Развёрнутый каталог разделён на отдельные вертикальные колонки
Верхняя часть страницы имеет чёткую иерархию: служебная информация не смешивается с основным меню, а ключевые пользовательские действия получают отдельную контрастную область. В развёрнутом каталоге крупные товарные направления визуально отделены друг от друга, поэтому длинный список не превращается в сплошной текстовый массив.
Футер собирает второстепенную навигацию в отдельной нижней зоне
- Контакты двух городов разнесены по самостоятельным колонкам
- Товарные направления собраны в отдельный список
- Информационные страницы вынесены в нижний ряд
- Социальные сети отделены горизонтальной панелью
Каталог визуально разделён на панель параметров и товарную сетку
-
Левая колонка отделена от основного контента
Параметры занимают узкую вертикальную зону со своими заголовками, границами и отступами.
-
Товарная часть держит стабильную трёхколоночную сетку
Одинаковая ширина карточек и ровные промежутки формируют регулярный ритм длинной страницы.
-
Управление каталогом вынесено над первой линией товаров
Сортировка и переключатель вида образуют отдельный горизонтальный уровень перед сеткой.
-
Пагинация завершает товарный массив
Номера страниц расположены по центру после последнего ряда и визуально отделены от описательного текста ниже.
Товарная карточка выстраивает акценты от статуса предложения до покупки
- Акционная метка занимает верхний угол Красная плашка контрастирует с остальной сдержанной карточкой и сразу отличает специальное предложение.
- Изображению товара оставили много свободного пространства Канистра или упаковка расположена по центру светлого поля без декоративной перегрузки вокруг.
- Новая и предыдущая цена имеют разный визуальный вес Актуальная стоимость подана тёмным жирным текстом, старая — более светлым перечёркнутым значением.
- Основное действие закреплено в нижней части карточки Кнопка покупки завершает карточку, тогда как рейтинг и пиктограмма избранного остаются второстепенными элементами.
Одинаковая последовательность акцентов повторяется во всей товарной сетке. Благодаря этому даже страница с десятками позиций сохраняет предсказуемый ритм: статус, товар, цена и основное действие всегда находятся на своих местах.
Главная страница чередует крупные имиджевые и компактные информационные модули
-
Первый экран объединяет бренд и конкретную продуктовую линейку
Название серии и изображение продукции расположены в одном промомодуле и сразу задают тему страницы.
-
Брендовый блок работает на контрасте масштаба
Крупный знак Petronas занимает одну часть композиции, текст о производителе — другую.
-
Продуктовые линейки представлены через фотоколлаж
Разные форматы изображений складываются в единый прямоугольный модуль без стандартной карточной сетки.
-
Логотипы автомобильных брендов собраны в отдельной секции
Знаки расположены равномерной группой между продуктовыми блоками и материалами сайта.
Информационные страницы продолжают визуальную систему магазина
- Хлебные крошки открывают внутренний контент Небольшая навигационная строка расположена перед основным заголовком страницы.
- Заголовки секций подчёркнуты тонкими горизонтальными линиями Разделители структурируют длинные текстовые страницы без дополнительных цветных блоков.
- Условия и справочная информация дополнены пиктограммами Небольшие монохромные иконки создают точки входа в текстовые списки и не перетягивают внимание на себя.
- Крупные вспомогательные материалы занимают отдельную колонку Карта на странице контактов и тематическое изображение на странице оплаты расположены рядом с текстовым блоком.
Контакты, условия оплаты и доставки и публикации имеют разное наполнение, но сохраняют общую логику заголовков, отступов и размещения контента. Карта, текстовые правила, фотографии и сетка материалов встраиваются в знакомую структуру внутренней страницы.
В каталоге для легковых авто фильтр показывает 29 позиций Petronas Selenia, 60 Petronas Syntium и 12 Petronas Tutela.
Отдельные товарные разделы предусмотрены для легковых автомобилей, грузового транспорта и мототехники.
Покупатель может отбирать продукцию в упаковках на 1, 2, 4, 5, 60 и 200 литров.
На сайте указаны наличная оплата, банковская карта, наложенный платёж в Новой почте и безналичный расчёт.
На главной странице размещено предложение зарегистрироваться и получить скидку на первую покупку.
Бесплатная доставка действует от 8 литров продукции для розничного заказа и от 20 литров для оптового покупателя.
// От каталога масел к связанной системе продаж
Petronas Shop работает в сложной товарной нише, где покупателю недостаточно просто увидеть название и цену. Масла и технические жидкости отличаются назначением, характеристиками, фасовкой и совместимостью с разными типами транспорта. Поэтому работа с действующим магазином была сосредоточена на том, чтобы большое количество товарных данных не усложняло покупку, а последовательно вело пользователя к нужному продукту и заказу.
Технической основой магазина остаётся OpenCart. Вместо перестройки проекта на другой платформе развивали его на существующей архитектуре: совершенствовали отдельные элементы интерфейса, логику покупки и функции, необходимые для ежедневной работы e-commerce. Такой подход сохранил накопленную систему и дал возможность менять её постепенно, без полного перезапуска сайта.
Отдельная часть работы касается связи онлайн-магазина с операционными процессами бизнеса. Интеграция с 1С соединяет сайт с внутренней учётной системой, платёжный сервис закрывает онлайн-расчёты, а Новая почта — доставку заказов. В результате сайт работает не как изолированная витрина, а как часть общего контура продаж.
Логику магазина построили вокруг разных сценариев покупателя. Кто-то приходит за конкретным продуктом, кто-то ищет масло по техническим параметрам, а кому-то сначала нужна информация о продукции Petronas. Каталог, подбор, товарные страницы и сопроводительный контент закрывают эти сценарии в рамках одного ресурса и приводят пользователя к оформлению покупки без перехода на сторонние площадки.
Petronas Shop выполняет и информационную функцию. Материалы о производителе, продуктовой линейке, оплате, доставке, гарантиях, акциях и автомобильной тематике дополняют коммерческую часть сайта. Для специализированного магазина это важно: решение о покупке часто зависит не только от стоимости товара, но и от того, насколько понятно представлены его назначение и условия приобретения.
В итоге Petronas Shop — это e-commerce-система, где OpenCart объединяет специализированный каталог, оформление покупки и внешние сервисы, а дальнейшие изменения можно вносить без перестройки всего проекта. Для Kliox этот кейс показывает другой тип работы с e-commerce: не запуск нового магазина с нуля, а системное совершенствование уже действующего цифрового продукта.
// Решения для автоматизации и управления интернет-магазином
Модуль резервирует остаток автоматически при оформлении заказа, синхронизирует с 1С и несколькими складами в реальном времени и уведомляет менеджера, когда пора пополнять запасы
Умный поиск с исправлением ошибок, синонимами, морфологией и автоподсказками — покупатель находит нужный товар за 2–3 секунды вместо блуждания по каталогу
Вместо сотен пунктов меню и лишних полей — только то, что нужно вашей команде. Каждая роль видит свой интерфейс, массовые действия выполняются за клики, а не за минуты
