Інтернет-магазин мастил та автохімії на OpenCart: підбір + оплата + доставка в одному сайті
Послуги: UX/UI-дизайн, розробка на OpenCart, підтримка та супроводження, інтеграція з 1С, платіжною системою та Новою поштою
Асортимент охоплює моторні й трансмісійні оливи, технічні рідини та автохімію для різних типів транспорту, тому покупцеві потрібно швидко звузити вибір за характеристиками товару.
Вибір товару не повинен закінчуватися на картці: покупцеві потрібен послідовний перехід через кошик, оплату та вибір способу отримання замовлення.
Для щоденної роботи e-commerce потрібен обмін даними з 1С, платіжною системою та Новою поштою без ручного перенесення інформації між окремими інструментами.
Магазин уже працював на OpenCart, тому основним завданням стало не створення нової платформи, а послідовне покращення її функцій, UX/UI та сценаріїв покупки.
Товари розділені за типом транспорту та призначенням: окремо представлені рішення для легкових і вантажних автомобілів, мототехніки та різних систем автомобіля.
У каталозі покупець звужує асортимент за ціною, продуктовою лінійкою, ємністю, в’язкістю SAE та іншими доступними параметрами.
Картка показує фотографії, назву, ціну, характеристики й інформацію, необхідну для вибору, після чого товар можна додати до кошика.
OpenCart інтегрований з 1С, платіжною системою та Новою поштою, щоб основні операції інтернет-магазину працювали в пов’язаному середовищі.
Покупець обирає доступний варіант розрахунку й доставки, а для частини замовлень доступний самовивіз із фізичних точок.
Petronas Shop містить підбір оливи, інформаційні сторінки, новини, акції, корисні матеріали, відгуки та контакти — покупець отримує не лише каталог, а й супровідну інформацію для вибору й замовлення.
Контрастна палітра пов’язує магазин з автомобільною тематикою Petronas Жирний 1
- Чорний колір формує основні навігаційні зони
- Бірюзовий виділяє активні елементи й основні дії
- Світлий геометричний фон підтримує товарні сторінки
- Світлий геометричний фон підтримує товарні сторінки
Інтерфейс побудований на різкому контрасті темних площин, світлого контентного поля й фірмового бірюзового акценту. На великих банерах використовуються автомобілі та продукція Petronas, тоді як каталог залишається світлим і не конкурує з фотографіями товарів. Геометричний фон об’єднує ці різні за насиченістю частини сайту.
Шапка розділяє постійні елементи на два рівні
- Сервісна панель винесена над основною навігацією
- Головні розділи зібрані в окремому горизонтальному меню
- Пошук, кошик і профіль згруповані праворуч від основного меню
- Розгорнутий каталог поділений на окремі вертикальні колонки
Верхня частина сторінки має чітку ієрархію: службова інформація не змішується з основним меню, а ключові користувацькі дії отримують окрему контрастну область. У розгорнутому каталозі великі товарні напрями візуально відокремлені один від одного, тому довгий список не перетворюється на суцільний текстовий масив.
Футер збирає другорядну навігацію в окремій нижній зоні
- Контакти двох міст рознесені по самостійних колонках
- Товарні напрями зібрані в окремий список
- Інформаційні сторінки винесені в нижній рядок
- Соціальні мережі відокремлені горизонтальною панеллю
Каталог візуально розділений на панель параметрів і товарну сітку
-
Ліва колонка відокремлена від основного контенту
Параметри займають вузьку вертикальну зону зі своїми заголовками, межами та відступами.
-
Товарна частина тримає стабільну трьохколонкову сітку
Однакова ширина карток і рівні проміжки формують регулярний ритм довгої сторінки.
-
Керування каталогом винесене над першою лінією товарів
Сортування та перемикач вигляду утворюють окремий горизонтальний рівень перед сіткою.
-
Пагінація завершує товарний масив
Номери сторінок розташовані по центру після останнього ряду й візуально відділені від описового тексту нижче.
Товарна картка вибудовує акценти від статусу пропозиції до покупки
- Акційна мітка займає верхній кут Червона плашка контрастує з рештою стриманої картки й одразу відрізняє спеціальну пропозицію.
- Зображенню товару залишили багато вільного простору Каністра або упаковка розташована по центру світлого поля без декоративного перевантаження навколо.
- Нова й попередня ціна мають різну візуальну вагу Актуальна вартість подана темним жирним текстом, стара — світлішим перекресленим значенням.
- Основна дія закріплена в нижній частині картки Кнопка купівлі завершує картку, тоді як рейтинг і піктограма обраного залишаються другорядними елементами.
Однакова послідовність акцентів повторюється в усій товарній сітці. Завдяки цьому навіть сторінка з десятками позицій зберігає передбачуваний ритм: статус, товар, ціна та основна дія завжди знаходяться на своїх місцях.
Головна сторінка чергує великі іміджеві та компактні інформаційні модулі
-
Перший екран поєднує бренд і конкретну продуктову лінійку
Назва серії та зображення продукції розташовані в одному промомодулі й одразу задають тему сторінки.
-
Брендовий блок працює на контрасті масштабу
Великий знак Petronas займає одну частину композиції, текст про виробника — іншу.
-
Продуктові лінійки представлені через фотоколаж
Різні формати зображень складаються в єдиний прямокутний модуль без стандартної карткової сітки.
-
Логотипи автомобільних брендів зібрані в окремій секції
Знаки розташовані рівномірною групою між продуктовими блоками та матеріалами сайту.
Інформаційні сторінки продовжують візуальну систему магазину
- Хлібні крихти відкривають внутрішній контент Невеликий навігаційний рядок розташований перед основним заголовком сторінки.
- Заголовки секцій підкреслені тонкими горизонтальними лініями Розділювачі структурують довгі текстові сторінки без додаткових кольорових блоків.
- Умови та довідкова інформація доповнені піктограмами Невеликі монохромні іконки створюють точки входу в текстові списки й не перетягують увагу на себе.
- Великі допоміжні матеріали займають окрему колонку Карта на сторінці контактів і тематичне зображення на сторінці оплати розташовані поруч із текстовим блоком.
Контакти, умови оплати й доставки та публікації мають різне наповнення, але зберігають спільну логіку заголовків, відступів і розміщення контенту. Карта, текстові правила, фотографії та сітка матеріалів вбудовуються в знайому структуру внутрішньої сторінки.
