Інтернет-магазин мастил та автохімії на 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 секунди замість блукання по каталогу
Замість сотень пунктів меню і зайвих полів — тільки те що потрібно вашій команді. Кожна роль бачить свій інтерфейс, масові дії виконуються за кліки, а не за хвилини
