Интернет-магазин дверей и фурнитуры
Создать онлайн-магазин для продажи дверей и фурнитуры — задача не из простых. Ниша имеет свою специфику — клиенты хотят видеть товар в деталях и иметь возможность выбирать цвета, материалы и комплектацию. Мультибрендовый салон 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.
В результате сайт получил современный интерфейс с четкими акцентами на действиях, удобной навигации и функционале, который подстраивается под реальные сценарии: сравнение вариаций, быстрый поиск нужных параметров, удобное возвращение к «избранному» и прозрачное резюме заказа. А там, где технические ограничения тормозили развитие, мы сделали прагматичный выбор — оптимизировали кодовую базу, уменьшили лишнюю нагрузку и довели быстродействие до состояния, когда большой ассортимент не ломает пользовательский опыт.
Комментарии