Інтернет-магазин дверей і фурнітури
Створити онлайн-магазин для продажу дверей і фурнітури — завдання не з простих. Ніша має свою специфіку — клієнти хочуть бачити товар у деталях і мати можливість вибирати кольори, матеріали та комплектацію. Мультибрендовий салон Mr. Door звернувся до команди Webnauts, аби оновити сайт для інтернет-магазину — з унікальним дизайном, розширеним функціоналом і оптимізацією швидкодії. Як ми це зробили — читайте в нашому кейсі.
Про клієнта та редизайн інтернет магазину
Mr. Door — це салон дверей і фурнітури з Кривого Рогу, що вже 5 років забезпечує клієнтів якісною продукцією. В асортименті магазину представлено понад 15 000 товарів українських та європейських виробників.
Компанія прагнула повністю оновити наявний інтернет-магазин на WordPress, який би забезпечував комфортний онлайн-шопінг для клієнтів з усієї країни. Через застарілий дизайн, незручну навігацію й обмежений функціонал онлайн-магазин уже не відповідав сучасним вимогам e-commerce.
Тож перед командою Webnauts постало завдання розробити редизайн інтернет магазину Mr. Door — зі зручним каталогом, спрощеним оформленням замовлення й особистим кабінетом покупця. Крім того, технічне завдання на розробку сайту передбачало верстку й імплементацію нових макетів на наявну платформу WordPress, а також SMS-авторизацію користувачів, оптимізацію швидкості та інтеграцію з маркетплейсами Umall, Rozetka та Prom.
Унікальний дизайн інтернет магазину дверей
Дизайн сайту для продажу вхідних і міжкімнатних дверей мав підкреслити преміальну якість і викликати довіру споживачів. Для цього ми вибрали стриману колірну гаму з енергійним жовтим акцентом, який наголошує на важливих діях користувача. Додатковий контраст для інших елементів — хедера, карток і каруселей — створює білий фон, що надає магазину сучасного та мінімалістичного вигляду.
Навігація сайту та мегаменю
Навігація сайту салону дверей реалізована через дворівневий хедер. Верхня панель містить покликання на інформаційні сторінки сайту, CTA-кнопку, перемикач мови, вхід до особистого кабінету та контактні дані — телефонні номери та популярні месенджери.
Нижня панель навігаційного меню зберігає логотип, основні товарні категорії з випадними списками, пошукове поле, список вподобань і товарний кошик. У разі наведення курсора на категорію розгортається повноцінне мегаменю з фото та підкатегоріями товарів.
Створення головної сторінки
Головна сторінка сайту починається з яскравого hero-банера, де слайдер демонструє ключові категорії товарів, а слоган одразу транслює позиціювання бренду. Нижче розташовані блоки популярних категорій, акційних пропозицій, хітів продажу та брендів-партнерів.
Головну сторінку також складають секції «Наші переваги» з іконками та стислими описами, «Раніше переглянуті» для швидкого повернення до товарів і стрічка останніх публікацій блогу. Довіри додають інформаційний блок «Про нас» зі світлинами салону та секція відгуків задоволених клієнтів Mr. Door.
Кожен елемент сайту ретельно продуманий для конверсії відвідувачів у покупці та забезпечує швидкий доступ до внутрішніх сторінок для подальшого вивчення сайту.
Інформаційні сторінки
Розділ «Про нас» демонструє місію, галерею та досягнення компанії в цифрах, а сторінка «Контакти» містить email, телефони, фото й адресу з Google-мапою салону.
Сторінка «Доставка та оплата» оформлена в форматі акордеона з питаннями та відповідями про варіанти покупки, способи отримання й умови повернення товару.
Каталог і картка товару
Сторінка каталогу складається з каруселі підкатегорій і розгорнутої системи фільтрації товарів. Бічна панель містить повзунок діапазону цін і ще 8 фільтрів у форматі чекбоксу. Користувач може сортувати товари за рейтингом і ціною, та переглядати в режимі плитки та списку.
Картки каталогу містять фотослайдер, назву, ціну, наявність і бейджі товарів («Акція», «Хіт продажу», «Безплатна доставка», «єВідновлення»), що допомагають користувачам швидко орієнтуватися в асортименті. Наведення курсора на картку викликає додаткові характеристики та кнопки для додавання товару до списку вподобань і кошика.
Сторінка товару охоплює хлібні крихти для навігації та базову інформацію, доповнену блоком варіацій. Ціна перераховується залежно від кількості товарів, яку можна регулювати за допомогою степера. Крім оформлення замовлення через кнопку кошика клієнт може вибрати «Виклик замірника», «Оплату частинами» чи «Швидке замовлення». Докладна інформація про товар, умови покупки та відгуки покупців організована за допомогою відповідних вкладок.
Окрема сторінка сайту «Акції» агрегує всі товари зі знижками в єдиному просторі. Картки акційних позицій відрізняє відповідний бейдж і стара/нова ціна з відсотком знижки. Такий підхід дозволяє покупцям швидко знайти вигідні пропозиції без необхідності переглядати весь каталог.
Сторінка оформлення замовлення
Мінімальна кількість полів скорочує час на оформлення замовлення та зменшує відсоток покинутих кошиків. А тому чек аут сторінка Mr. Door спроєктована максимально просто та зрозуміло.
Двоколонковий макет розділяє інтерфейс на дві логічні зони: ліворуч — форма введення даних, а праворуч — резюме замовлення з переліком вибраних товарів.
Check out сторінка дозволяє оформити замовлення за кілька кроків: заповнити контактні дані, вибрати спосіб доставки й оплати, та залишити коментар. Авторизовані користувачі можуть відстежувати замовлення в особистому кабінеті.
Особистий кабінет користувача
Створення особистого кабінету стало одним з ключових завдань проєкту. Профіль клієнта Mr. Door охоплює кілька розділів: «Мої замовлення» з історією покупок, «Список вподобань» для збереження вибраних товарів, «Мої дані» для редагування контактної інформації та функцію виходу з облікового запису. Швидкий доступ до всіх розділів кабінету забезпечує випадне меню профілю в хедері сайту.
Створення блогу онлайн-магазину
Блог інтернет-магазину — важлива частина контент-стратегії Mr. Door. Тут публікуються статті про тренди в дизайні дверей, огляди матеріалів, поради з вибору фурнітури та новини компанії. Кожна публікація містить обкладинку, заголовок, анонс і кнопку «Читати повністю».
Сторінка статті оформлена з огляду на читабельність: оптимальна ширина тексту, достатні міжрядкові інтервали, якісні зображення та зручна навігація для повернення до списку публікацій.
Наприкінці кожної статті розміщено блок «Схожі новини» — слайдер із релевантними публікаціями, що заохочує до подальшого перегляду контенту та позитивно впливає на поведінкові фактори SEO.
Читайте також:
Чому бізнесу обов’язково потрібний блог?Адаптивна верстка сайту та вебанімація
Верстка інтернет-магазину Mr. Door базується на HTML, CSS/SCSS і JavaScript — сучасних технологіях, які забезпечують ефективну взаємодію з інтерфейсом на будь-яких пристроях.
Анімація для сайту магазину
Мікроанімація та hover-ефекти написані мовою стилізації CSS. Так, під час наведення курсора змінюють колір кнопки та лінки, розгортаються товарні картки, списки випадних меню й акордеонів.
Модальні вікна на сайті завдячують своєю появою мові JavaScript, а каруселі та слайдери карток і зображень — бібліотеці Swiper.js.
Верстка кошика інтернет-магазину
Для керування функціями, що пов’язані з електронною комерцією через плагіни WordPress/WooCommerce, ми використали бібліотеку jQuery. Вона забезпечує динамічне оновлення кошика, додавання/видалення товарів і фільтрацію за ціною через інтерактивний повзунок.
Адаптивна верстка та кросбраузерність
Адаптивна верстка сайту забезпечує коректне відображення сторінок на мобільних пристроях, ноутбуках і компʼютерах. Інтерфейс навігації, фільтрації та сортування реалізований за допомогою медіазапитів CSS, які керують відображенням елементів залежно від розміру екрана. Так, на смартфонах і планшетах ці блоки згортаються в зручні випадні меню та трансформуються в бічні панелі.
Натяжка верстки на WordPress та доопрацювання сайту
Редизайн інтернет магазину, що вже функціонує — завдання не легше за створення сайту з нуля. Нам належало інтегрувати нові макети в наявну структуру магазину на WordPress і при цьому зберегти всі дані — товари, категорії, замовлення, облікові записи клієнтів. І все це — без зупинки продажів.
Натяжка верстки на WooCommerce
Для безпечного впровадження змін ми скопіювали робочий сайт і розгорнули тестове середовище, де імплементували верстку на WordPress. Зверстані за новим дизайном шаблони поступово замінювали старі, а після перевірки функціоналу на різних пристроях і браузерах ми синхронізували бази даних і перенесли оновлений сайт на бойовий сервер.
Ключові плагіни WordPress / WooCommerce
Функціонування сайту для інтернет-магазину Mr. Door забезпечує ретельно підібраний стек плагінів. WooCommerce слугує ядром електронної комерції, а ACF (Advanced Custom Fields) дозволяє створювати гнучкі поля для товарів, категорій і службових сторінок. Фільтрація каталогу реалізована через WOOF — професійний інструмент із підтримкою AJAX і множинних параметрів.
Для SEO-оптимізації встановлено Yoast SEO, що аналізує контент сторінок, формує XML-карту сайту та керує метатегами. Плагін Cyr-To-Lat конвертує кириличні символи в латиницю для формування зрозумілих URL-адрес. Redirection відстежує помилки 404 та керує 301-редиректами, що критично важливо для збереження пошукових позицій після редизайну.
Логістику забезпечує WC Nova Poshta Shipping — офіційний плагін для інтеграції з найпопулярнішою службою доставки України. Платіжні шлюзи LiqPay і ПриватБанк 24 приймають онлайн-оплати, а WC Cash On Pickup обробляє готівкові розрахунки за самовивозу. Захист від спаму та автоматизованих атак гарантує Advanced Google reCAPTCHA.
Інтеграція з KeyCRM через відповідний плагін автоматизує обробку замовлень і ведення клієнтської бази. Contact Form 7 обробляє звернення з форм зворотного зв’язку, а Loco Translate забезпечує переклад інтерфейсу для двомовної версії сайту.
Оптимізація швидкодії інтернет-магазину
Одним із ключових викликів проєкту стала оптимізація продуктивності. Інтернет-магазин із понад 15 000 позицій з численними варіаціями товарів помітно «гальмував». Головною причиною виявився візуальний конструктор Elementor. Попри зручність плагіна він генерує значний обсяг додаткового коду, що критично навантажує сайти з розгалуженою структурою та великою базою даних. Відмова від Elementor на користь стандартних механізмів WordPress виявилася радикальним, але ефективним рішенням.
Додатково ми провели комплексну оптимізацію зображень за допомогою плагіна Imagify, який автоматично стискає фото без втрати якості, та налаштували конвертацію у формат WebP через WebP Express, що додатково зменшило вагу графічного контенту. Плагін Clear WP trash допоміг позбутися непотрібних скриптів і стилів, а правильно налаштоване кешування стало логічним завершенням роботи над швидкодією. Зрештою, час завантаження сторінок суттєво скоротився.
Адміністрування сайту без програміста
Адмінпанель інтернет-магазину на WordPress дозволяє менеджерам самостійно керувати контентом без особливих технічних знань. Плагін ACF забезпечує зручне редагування текстів, керування блоками та налаштування сторінок. А завдяки нативним можливостям WooCommerce зручно управляти товарами, замовленнями та знижками. Плагіни WC Advanced Bulk Edit і Bulk Editor дозволяють масово редагувати товари, а WP All Import і WP All Export автоматизують імпорт та експорт даних у форматах XML і CSV.
SMS-авторизація користувачів
Реєстрація й авторизація користувачів онлайн-магазину відбувається за номером телефону. Такий підхід усуває потребу запамʼятовувати паролі та підвищує конверсію реєстрацій. Готового рішення, що повністю задовольняла б потреби проєкту, ми не знайшли, тому реалізували авторизацію самостійно.
Механізм працює через інтеграцію з API SMS-сервісу. Користувач вводить номер телефону, отримує одноразовий код підтвердження та потрапляє до персонального кабінету. Якщо номер новий — система автоматично створює обліковий запис. Такий підхід усуває потребу запам’ятовувати паролі та підвищує конверсію реєстрацій.
Інтеграція з маркетплейсами
Для розширення каналів продажу клієнт потребував присутності на популярних торгових майданчиках — Prom, Umall та Rozetka. Для цього ми налаштували плагін CTX Feed Pro, який автоматично генерує товарні фіди у форматі XML відповідно до вимог кожного маркетплейсу.
Інтеграція з Rozetka виявилася найскладнішою: майданчик висуває жорсткі вимоги до якості даних, структури атрибутів і відповідності товарних характеристик. Тому тут знадобилася кастомізація фідів. Якби архітектура магазину від початку враховувала стандарти маркетплейсів, складнощів можна було б уникнути. Проте ми успішно адаптували наявну структуру, і тепер товари Mr. Door автоматично синхронізуються з усіма платформами.
Результат — оновлений сайт інтернет магазину на WordPress
Редизайн інтернет магазину Mr. Door учергове довів: у нішах зі складними варіативними товарами перемога не за тим, хто має найбільший асортимент, а за тим, хто найкраще допомагає покупцеві вибрати. Тому ми не просто «перефарбували фасад» — ми переосмислили користувацький досвід, усунули технічні борги та відкрили для бізнесу додаткові канали продажів.
Отже, команда Webnauts:
- оновила UI дизайн інтернет магазину та прокачала UX каталогу;
- спростила сторінку чекаут, аби шлях до покупки був коротшим;
- зверстала й імплементувала нові сторінки на CMS WordPress;
- спростила реєстрацію на сайті через SMS-авторизацію;
- синхронізувала товари з маркетплейсами Rozetka, Prom і Umall;
- підвищила продуктивність через оптимізацію зображень, кешування та відмову від Elementor.
У підсумку сайт отримав сучасний інтерфейс із чіткими акцентами на діях, зручній навігації та функціоналі, що підлаштовується під реальні сценарії: порівняння варіацій, швидкий пошук потрібних параметрів, зручне повернення до «вподобань» і прозоре резюме замовлення.
А там, де технічні обмеження гальмували розвиток, ми зробили прагматичний вибір — оптимізували кодову базу, зменшили зайве навантаження та довели швидкодію до стану, коли великий асортимент не ламає користувацький досвід.
Комментарии