Інтернет-магазин автоаксесуарів TradeAuto з підбором товарів за автомобілем
Послуги: Розробка на Laravel, системні інтеграції, SEO-оптимізація, адаптивна верстка
Попередня команда працювала над інтернет-магазином близько року, але частина ключових функцій залишилася незавершеною або працювала з помилками. Клієнту вже потрібно було запускати рекламу, тому проєкт передали Kliox для технічної перебудови та доведення до робочого стану.
Для частини товарів недостатньо звичайних категорій: сумісність залежить від марки, моделі та року випуску автомобіля. Цю логіку потрібно було врахувати у фільтрах і пошуку.
Товарні дані та залишки потрібно було передавати з 1С на сайт, а оформлені замовлення — повертати в облікову систему без ручного дублювання операцій.
Структуру та сторінки магазину одразу підготували до SEO-просування й рекламних кампаній, щоб технічна перебудова не закінчувалася лише відновленням працездатності сайту.
Каталог, користувацькі сценарії, замовлення та адміністративну частину зібрали на новій технічній основі замість подальшого латання проблемного старого рішення.
Із облікової системи на сайт надходять товари та актуальні залишки, а інформація про оформлені замовлення передається назад у 1С.
Фільтрація враховує марку, модель і рік випуску, тому користувач може звузити каталог до сумісних позицій без ручного перегляду великої кількості товарів.
Пошук працює як окремий шлях до потрібної позиції, а рекомендовані товари продовжують сценарій вибору всередині каталогу.
Керування товарами, замовленнями та пов’язаними даними винесли в адмінпанель, щоб команда працювала з e-commerce-процесами в одному середовищі.
Структуру каталогу й сторінок підготували так, щоб магазин можна було системно просувати в пошуку та використовувати як посадкову платформу для рекламних кампаній.
Головну сторінку побудували як кілька входів у великий автомобільний каталог
- Підбір автомобіля винесений перед основними товарними секціями
- Для щіток склоочисника передбачений окремий підбір за параметрами
- Категорії товарів показані самостійними горизонтальними добірками
- Новинки та спеціальні пропозиції відокремлені від основного асортименту
Асортимент TradeAuto не підпорядковується одному способу вибору: для одних товарів важлива сумісність з автомобілем, для інших — характеристики або товарна категорія. Тому головна сторінка не змушує весь каталог працювати за одним сценарієм, а розводить різні способи пошуку вже на старті.
Великий каталог розкривається від товарного напряму до конкретної підкатегорії
- Основні групи товарів розташовані у вертикальному списку
- Активна категорія виділена окремим станом
- Підкатегорії показані поруч із назвами та зображеннями товарів
- Кілька рівнів асортименту відкриваються в одному каталожному меню
Така структура потрібна для асортименту, де поруч існують автомобільні аксесуари, автохімія, інструменти, дефлектори, ковпаки та десятки інших груп. Користувач спочатку звужує товарний напрям, а вже всередині нього переходить до потрібного типу продукції.
На сторінці категорії підкатегорії залишаються окремим рівнем вибору
- Суміжні групи показані горизонтально над товарною видачею
- Поточний розділ зафіксований у хлібних крихтах і заголовку сторінки
- Сортування винесене перед основним списком товарів
- Перемикач вигляду розташований поруч із сортуванням
Підбір за автомобілем розклали на послідовні залежні параметри
-
Марка задає перший рівень сумісності
Після вибору бренду автомобіля користувач переходить до доступних для нього моделей, а не працює з усім каталогом одразу.
-
Модель звужує перелік відповідних варіантів
Наступне поле залежить від попереднього вибору, тому сценарій рухається від загальної марки до конкретнішої конфігурації автомобіля.
-
Рік випуску уточнює сумісність товару
Окремий параметр враховує відмінності між поколіннями та роками виробництва однієї моделі.
-
Результат підбору відокремлений від звичайної навігації каталогу
Користувач отримує окремий шлях до відповідних позицій без переходу через десятки товарних категорій.
Картка товару поєднує покупку з перевіркою характеристик автотовару
- Фотографії товару займають окрему велику зону Основне зображення доповнене галереєю, щоб деталі комплекту можна було переглянути до характеристик.
- Назва й артикул ідентифікують конкретну позицію Повна назва містить тип товару та сумісність з автомобілем, а артикул відокремлює потрібну модифікацію від схожих позицій.
- Ціна та дія покупки винесені поруч з основною інформацією Комерційний блок залишається на першому екрані картки, тому після перевірки товару користувач одразу переходить до замовлення.
- Умови отримання товару показані до оформлення замовлення Інформація про доставку, оплату та доступні способи отримання розташована безпосередньо на товарній сторінці.
Для автотоварів назви часто містять марку, модель, покоління або роки випуску автомобіля, тому сторінка має одночасно вирішувати дві задачі. Дати достатньо даних для перевірки потрібної позиції та не відсунути саму покупку на другий план. Нижче основного блока користувач може перейти до детальнішої інформації й пов’язаних товарів.
Мобільну версію перебудували навколо постійного доступу до ключових дій
-
Пошук залишили у верхній частині екрана
Поле займає майже всю ширину, тому перехід до конкретного товару не потребує відкривати додаткове меню.
-
Каталог винесли в окрему велику кнопку
Основний шлях до асортименту відокремлений від компактного меню та залишається помітним навіть на вузькому екрані.
-
П’ять основних розділів закріпили в нижній навігації
Головна, каталог, кошик, обране та кабінет доступні під час перегляду довгих товарних і сервісних сторінок.
-
Товарну видачу зберегли у двоколонковій сітці
На екрані одночасно видно кілька позицій з фотографіями, назвами, цінами та кнопками покупки без переходу до однієї картки в ряд.
Контактну сторінку розділили за типом клієнта та форматом звернення
- Роздрібні звернення винесені в окремий блок Покупцям показані прямі контакти менеджера, який працює з питаннями замовлення, підбору, доставки, оплати та обміну.
- Оптових клієнтів розподілили між менеджерами за регіонами Для кожного менеджера вказані контакти та перелік областей, за які він відповідає, тому B2B-клієнт одразу бачить потрібний канал зв’язку.
- Месенджери розмістили безпосередньо біля контактів менеджерів Viber, Telegram і WhatsApp доступні поруч із відповідними контактними картками без окремого пошуку способу зв’язку.
- Самовивіз винесли в окрему сервісну секцію Адреса, графік роботи та карта проїзду зібрані в одному блоці для клієнтів, які забирають замовлення самостійно.
Нижче контактів, регіонального розподілу менеджерів і даних для самовивозу розташована універсальна форма з вибором теми звернення. Так сторінка охоплює різні моделі роботи TradeAuto — роздрібні покупки, оптову співпрацю, дропшипінг і питання щодо отримання замовлень без змішування всіх контактів в один список.
TradeAuto працює на ринку автоаксесуарів багато років, тому технічна перебудова охопила вже сформований каталог, клієнтські сценарії та операційні процеси.
Технічну перебудову виконали для великого асортименту з різними категоріями, правилами підбору, фільтрами та товарними сценаріями.
Марка, модель і рік випуску послідовно звужують вибір до позицій, що відповідають конкретному автомобілю.
Для роздрібних та оптових покупців передбачені різні контакти й сценарії взаємодії з командою TradeAuto.
Основний сценарій скоротили до трьох послідовних дій: знайти відповідний товар, вибрати його та оформити покупку.
На сайті представлені онлайн-оплата, оплата за реквізитами та післяплата при отриманні.
// Від незавершеного проєкту до готового інтернет-магазину для запуску реклами
До Kliox TradeAuto прийшов після року розробки в іншої команди. Інтернет-магазин уже мав дизайн і значну частину функціональності, але до стабільного запуску так і не дійшов. Окремі сценарії працювали з помилками, частина функцій залишалася незавершеною, а клієнт уже планував запускати рекламне просування. Продовжувати нескінченні точкові доробки не було сенсу, тому ми взяли проєкт на етапі, коли потрібно було швидко розібратися в чужій реалізації, визначити критичні проблеми й фактично перебудувати технічну частину без нового дизайну.
Однією з ключових проблем була взаємодія магазину з 1С. Інтеграція не забезпечувала потрібний обмін даними: виникали проблеми з передаванням товарів, залишків і замовлень, а частину операцій доводилося контролювати вручну. Ми перебудували цей контур як двосторонню систему: товарні дані та актуальні залишки надходять із 1С на сайт, а оформлені замовлення передаються назад в облікову систему. У результаті магазин перестав існувати окремо від внутрішнього обліку компанії.
Другим складним рівнем став сам каталог. TradeAuto працює з асортиментом понад 10 000 позицій, причому різні категорії потребують різної логіки. Частину товарів покупець шукає за звичайними характеристиками, а для автомобільних аксесуарів критична сумісність із конкретною машиною. Тому в каталозі поєднали кілька механік підбору, а для товарів, залежних від автомобіля, побудували послідовність марка → модель → рік випуску. Окремо пропрацювали найбільшу категорію «Ковпаки» — для неї використовуються власні правила фільтрації, сортування та рекомендацій.
Паралельно допрацювали ключові точки, де користувач приймає рішення про покупку. Переглянули логіку товарної картки, кошика, каталогу та переходів між ними, щоб шлях від пошуку до оформлення не розпадався на зайві кроки. Основний сценарій звели до зрозумілої послідовності: знайти відповідний товар, вибрати його та оформити замовлення. Це скоротило кількість зайвих дій, зменшило частку відмов і покинутих кошиків та позитивно вплинуло на конверсію покупок і середній чек.
Окремо врахували, що TradeAuto працює не лише з роздрібним покупцем. Для оптових клієнтів передбачені власні контакти та регіональний розподіл менеджерів, а сервісні сторінки охоплюють доставку, оплату, самовивіз і різні формати звернення. Таким чином нова технічна основа підтримує не один універсальний сценарій, а реальну модель роботи магазину з великим асортиментом і різними типами клієнтів.
Фінальним завданням було підготувати магазин до нормальної роботи з трафіком. Структуру каталогу, категорій, фільтрів і сторінок перебудували з урахуванням SEO та рекламних кампаній, щоб після технічного відновлення сайт можна було використовувати як повноцінний канал продажів. Для Kliox цей кейс став прикладом ситуації, коли цінність роботи полягала не у створенні інтернет-магазину з чистого аркуша, а в тому, щоб забрати проблемний проєкт після року незавершеної розробки, розібрати його по системах і довести до стабільного робочого запуску.
// Рішення для автоматизації великого інтернет-магазину
Модуль резервує залишок автоматично при оформленні замовлення, синхронізує з 1С і кількома складами в реальному часі та сповіщає менеджера коли пора поповнювати запаси
Розумний пошук з виправленням помилок, синонімами, морфологією і автопідказками — покупець знаходить потрібний товар за 2–3 секунди замість блукання по каталогу
Модуль генерує унікальні SEO-сторінки для пріоритетних комбінацій фільтрів каталогу — «купити червоні кросівки Nike розмір 42» стає окремою сторінкою що ранжується в пошуку
