Интернет-магазин мебели
Создание интернет-магазина для мебельного бизнеса редко сводится к каталогу, корзине и кнопке «Купить». К проекту опытного ритейлера мебельной продукции Mebel Boom мы подошли так, чтобы в онлайн-магазине покупатель чувствовал себя, словно в хорошо обустроенной гостиной, когда всё под рукой и на своих местах.
Большой ассортимент от десятков поставщиков, понятная навигация по многоуровневому каталогу, удобный личный кабинет пользователя и другие инструменты для комфортных покупок — всё это мы реализовали на привычной клиенту CMS Shop-Script. Как именно проходила разработка интернет магазина мебели, читайте в нашем кейсе.
Проект: разработка интернет магазина для мебельного бренда
Наш клиент — интернет-магазин Mebel Boom, который предлагает широкий выбор продукции для дома, дачи, офиса и бизнеса с 2007 года. В ассортименте магазина представлены обеденные комплекты, мягкая мебель и предметы интерьера, а также товары для заведений индустрии гостеприимства и частной медицины.
Со временем каталог достиг десятков тысяч позиций от 150 производителей, а интерфейс онлайн-магазина перестал соответствовать ожиданиям покупателей. Поэтому компания решила провести полный редизайн и вёрстку страниц на проверенной годами CMS Shop-Script.
Задача — создать интернет-магазин под ключ
Итак, команда Webnauts получила чёткое техническое задание на разработку сайта — обновить дизайн интернет магазина и имплементировать вёрстку на CMS Shop-Script. Речь шла не просто о создании сайта интернет-магазина, а об удобной коммерческой системе, которая должна была включать:
- главную страницу с акционными предложениями, новинками и хитами продаж;
- трёхуровневый каталог с фильтрацией, сортировкой и двумя режимами отображения товаров;
- детальную карточку товара с фотогалереей, характеристиками, отзывами, а также вариантами цветов, сопутствующими товарами и возможностью создать собственный комплект;
- корзину и check out страницу с промокодом;
- кабинет пользователя с историей заказов и списком избранных / просмотренных товаров;
- блог, информационные и промостраницы;
- функцию мультиязычности (украинский, русский и английский).
По сути, нам нужно было создать интернет-магазин под ключ — от индивидуального дизайна до работающего сайта с полным циклом покупки.
Дизайн интернет магазина Mebel Boom
Цветовая палитра и визуальный стиль
Для создания дизайна сайта по продаже мебели, который ассоциируется с теплом и уютом домашнего интерьера, мы выбрали соответствующую цветовую палитру. Основным акцентным цветом стал насыщенный медово-горчичный, который используется в кнопках, иконках, активных состояниях ссылок и других элементах сайта.
Фоном для интерфейса служит мягкое сочетание светло-бежевых оттенков, а текстура натурального дерева в хедере и футере тонко поддерживает тематику мебельного магазина, придавая страницам природное тепло. Тёмно-коричневый шрифт Open Sans добавляет тексту контрастности и облегчает восприятие контента. Такой сдержанный и в то же время выразительный стиль позволяет товару оставаться в фокусе внимания, а не конкурировать с другими элементами магазина.
Структура и навигация сайта
Структура интернет-магазина построена вокруг разветвлённого каталога, который охватывает более десяти основных категорий — от мебели для кухни, спальни и гостиной до офисной, дачной, детской и даже медицинской мебели.
В хедере сайта собраны ссылки на информационные страницы компании, переключатель языка, кнопка входа в личный кабинет, а также иконки мессенджеров и социальных сетей. Рядом — телефон горячей линии, список избранного и корзина.
Ниже расположено навигационное меню в виде горизонтальной панели с тематическими иконками категорий. Наведение курсора вызывает мегаменю с подкатегориями, сгруппированными по типам продукции. Такая двухуровневая структура сайта позволяет покупателю найти нужный раздел или товар за минимум кликов.
Футер, или нижняя часть сайта, содержит колонки с информацией о компании, её преимуществах и контактах, а также график работы call-центра и кнопки обратной связи. А кнопка «Наверх» избавляет от ручной прокрутки длинных страниц и быстро возвращает пользователя к первому экрану.
Главная страница сайта в дизайне
Знакомство с сайтом начинается с развёрнутого баннерного слайдера, совмещённого с вертикальным деревом категорий в левой части экрана. Под первым экраном размещена информационная лента с преимуществами магазина — с иконками и краткими описаниями.
Далее страница сайта переходит к четырём промоблокам, которые позволяют покупателю сразу перейти к товарам со статусом «Акция», «Новинка», «Хит продаж» и «Распродажа». Ещё ниже разворачиваются тематические блоки с товарными каруселями, каждый из которых выполняет свою коммерческую функцию — от стимуляции покупки выгодной ценой до подогрева интереса к новым поступлениям.
Каждая карточка содержит фотослайдер и название, бейджи статуса, рейтинг и код товара, старую и новую цену, а также кнопку корзины и иконку подсказки. При наведении курсора карточка раскрывает дополнительные возможности: пролистывание и масштабирование фото, добавление в избранное и сравнение товаров. А клик по иконке подсказки выводит краткие характеристики товара, чтобы покупатель мог оценить материал, размеры и конструкцию, не переходя на отдельную страницу.
Дизайн каталога интернет-магазина
Каталог товаров предусматривает два уровня просмотра. На верхнем уровне категории — например, «Мягкая мебель» — посетитель видит плиточную навигацию по подкатегориям («Диваны», «Кресла» и т. д.) с перечнем популярных ссылок внутри каждой подкатегории.
На уровне конкретной подкатегории — скажем, «Диваны» — отображается полноценный каталог с сеткой товарных карточек и боковой панелью слева, которая содержит ползунок ценового диапазона и различные фильтры с возможностью множественного выбора.
Вверху — панель сортировки и переключатель отображения товаров в формате плитки и списка, а также пагинация страниц и выбор количества товаров на страницу. Здесь же отображаются выбранные теги фильтров с возможностью их быстрого сброса.
В режиме списка товарная карточка разворачивается горизонтально, показывая полный перечень характеристик рядом с фото, ценой и кнопками действия. Это удобно для быстрой оценки параметров без необходимости переходить на страницу товара.
Товарная карточка мебельного магазина
Карточка товара организована с помощью вкладок «Всё о товаре», «Характеристики», «Отзывы» и «Варианты цветов». Она содержит название, фотогалерею, цену со скидкой и таймер акции, а также иконки и кнопки действия. Ниже — описание товара с характеристиками, контакты магазина и данные об оплате, доставке и гарантии.
Также страница содержит блоки, стимулирующие дополнительные продажи — «С этим товаром часто покупают», «Похожие товары» и «Вы недавно просматривали».
Вкладка «Варианты цветов» заслуживает отдельного внимания. Дизайн отображает варианты обивки по цвету, составу и ценовой категории. Для мебельной ниши, где одно изделие часто имеет десятки цветов, блок с образцами палитр помогает покупателю быстро сориентироваться в доступных решениях.
Личный кабинет пользователя
Создание личного кабинета — важная часть разработки интернет-магазина, ведь именно здесь и формируется лояльность клиентов. Личный кабинет пользователя в «Mebel Boom» содержит пять разделов: Корзина, Личная информация, Мои заказы, Избранное и Просмотренные товары.
Вход и регистрация реализованы через модальное окно с двумя вкладками. Для входа достаточно воспользоваться авторизацией через Google, а при регистрации — указать имя, почту и пароль.
Профиль клиента сохраняет контактную информацию и позволяет сменить пароль и добавить несколько адресов доставки.
Раздел «Мои заказы» отображает историю покупок в формате таблицы со статусами и строками, которые разворачиваются и показывают детальный состав заказа.
Вкладки «Избранное» и «Просмотренные товары» построены на основе стандартной товарной сетки каталога с пагинацией.
Корзина и чек аут страница
Интерфейс корзины — как на сайте, так и в личном кабинете пользователя — отображает нумерованный список товаров с названиями, миниатюрами, селекторами цвета и размера, счётчиком количества и ценой. Покупатель может изменить параметры товара прямо в корзине, не возвращаясь в каталог.
Под списком товаров — поле для промокода и итоговый блок с количеством единиц и суммой заказа. Кнопка «Перейти к заказу» ведёт на check out страницу.
Страница оформления заказа разделена на две колонки. Слева — контактные данные получателя, блоки выбора доставки и оплаты, а также поле для комментария. Правая колонка — это итог заказа со списком товаров и финальной суммой. После отправки данных покупатель попадает на страницу подтверждения с номером заказа.
Покупка мебели в кредит и расстрочку
Дизайн интернет магазина предусматривает возможность покупки мебели в рассрочку. Оформить кредит или рассрочку через банки-партнёры покупатель может двумя способами — на соответствующей странице сайта либо непосредственно из карточки товара.
Для каждого банка отображается условие, срок кредита с выпадающим списком количества платежей, ежемесячный платёж и общая стоимость. Кнопка «Выбрать» открывает модальное окно, где покупатель видит выбранный тариф и заполняет контактные данные для оформления покупки.
Сравнение товаров
Отдельную страницу сайта занимает функция сравнения мебели. Выбранные товары отображаются в горизонтальном слайдере карточек, а ниже — развёрнутая таблица характеристик, где каждый параметр выровнен построчно для наглядного сопоставления вариантов. Страница показывает общее количество добавленных товаров и позволяет удалять позиции выборочно либо очистить весь список одним кликом.
Информационные страницы и блог
Дизайн интернет магазина «Mebel Boom» предусматривал и ряд таких информационных страниц, как:
- Страница «О нас» — знакомит покупателя с историей салона, которая сопровождается интерьерными фото и слайдером акционных предложений.
- Страница «Оплата и доставка» — структурирована как FAQ с боковым навигационным меню.
- Страница «Бренды» — группирует производителей по странам, где клик на карточку с логотипом отображает все товары выбранного бренда.
- Страница «Контакты» — объединяет несколько блоков с адресом, встроенной картой, графиком работы и формой обратной связи.
Блог онлайн-магазина состоит из сетки публикаций и самой статьи — с основным контентом, иллюстрациями и рекомендованными материалами.
Кастомная вёрстка и разработка интернет магазина на Shop-Script
Платформа и архитектура
В основе сайта магазина «Mebel Boom» — CMS Shop-Script, коммерческая PHP-платформа со встроенной системой шаблонов и развитой архитектурой плагинов. Проект построен как классический монолитный e-commerce с серверным рендерингом (SSR): бекенд и фронтенд работают в единой системе, а страницы сайта генерируются на сервере и отдаются браузеру в виде готового HTML. Для сайта магазина с большим каталогом это принципиально, поскольку SSR обеспечивает быструю загрузку контента и корректную индексацию страниц поисковыми системами.
Вёрстка интернет-магазина с нуля
Вёрстка сайта интернет-магазина предусматривала создание кастомной HTML-разметки с адаптивной вёрсткой под все типы устройств — от смартфонов до стационарных мониторов. Стилизация веб-страниц выполнена с помощью CSS, что обеспечивает модульную структуру стилей и удобную поддержку кода в будущем.
Клиентская логика реализована на JavaScript. Динамические элементы сайта — фильтрация в каталоге, обновление корзины и подгрузка товаров — работают через AJAX-запросы без обновления страницы. Покупатель мгновенно видит результат, когда взаимодействует с каталогом — устанавливает фильтры, меняет количество товаров или применяет промокод.
Слайдеры и галереи товаров
Банерные слайдеры на главной странице, слайдеры подкатегорий, товарные карусели и галереи в карточках реализованы с помощью библиотеки Swiper. Она обеспечивает плавную анимацию, поддержку сенсорных жестов на мобильных устройствах и высокую производительность даже при большом количестве изображений.
Для увеличенного просмотра фото товаров мы применили библиотеку Fancybox. Она открывает изображения в полноэкранном lightbox-режиме — с панелью масштабирования и вращения, а также навигацией между снимками через стрелки либо ленту миниатюр. Корректный адаптив сайта обеспечивает удобный просмотр галереи на любом устройстве.
SEO-оптимизация интернет-магазина
Для интернет-магазина с тысячами товарных позиций и десятками категорий поисковая оптимизация — один из ключевых факторов успеха. В проекте «Mebel Boom» задействован SEO-плагин, который автоматически генерирует метатеги title и description, разметку Open Graph для социальных сетей, canonical-ссылки для устранения дублей, а также файлы sitemap.xml и robots.txt. Это существенно снижает риск дублирования контента и улучшает индексацию каждой страницы сайта — от главной до самых глубоких подкатегорий каталога.
Читайте также:
Продвижение сайта окон ПВХ и балконовМультиязычность
Для обеспечения мультиязычности на сайте подключён виджет Google Translate, который переводит контент на стороне клиента средствами JavaScript. Такое решение позволяет быстро сделать интерфейс магазина понятным для иноязычных посетителей без необходимости ручного перевода каждой страницы.
Защита форм от спама
Все формы на сайте — обратной связи, оформления заказа, отзывов и запросов на скидку — защищены с помощью reCAPTCHA. Проверка токена выполняется на сервере через API Google, что предотвращает автоматические отправки и спам, сохраняя при этом комфортный опыт для покупателей.
Плагин брошенных корзин
Далеко не каждый посетитель, добавивший товар в корзину, завершает покупку. Чтобы создать сайт для продажи с максимальной конверсией, мы подключили плагин отложенных корзин, который отслеживает незавершённые заказы. Он сохраняет состав и сумму корзины, контактные данные покупателя (если они были введены) и отправляет автоматический email о незавершённой покупке. Менеджер интернет-магазина также получает уведомление, а вместе с ним — и аналитику возвратов покупателей после напоминания.
Для мебельного бизнеса, где средний чек высокий, а решение о покупке часто откладывается на несколько дней, такой инструмент имеет ощутимое влияние на продажи.
Смотрите похожий кейс:
Триггерная рассылка «Брошенная корзина»Покупатель мебели редко принимает решение сразу — он сравнивает, советуется и возвращается через несколько дней. Плагин избранного позволяет сохранять понравившиеся позиции в отдельный список, чтобы потом не искать товар заново и оформить заказ в несколько кликов.
Проблему выбора мебели из десятков похожих моделей решает плагин сравнения: покупатель добавляет товары и получает сводную таблицу характеристик — обивки, размеров, страны-поставщика и т. д.
Оба решения интегрированы в Shop-Script через систему хуков. Данные сохраняются в сессии гостя либо профиле клиента, поэтому при закрытии браузера список товаров не исчезнет.
Результат — обновлённый сайт интернет-магазина мебели
Mebel Boom получил обновлённый интернет-магазин с индивидуальным дизайном и кастомной вёрсткой на привычной e-commerce платформе Shop-Script. Продуманный каталог с гибкой фильтрацией, удобный личный кабинет пользователя, корзина с промокодами, блоки допродаж, плагин брошенных корзин — каждый элемент онлайн-магазина работает на то, чтобы посетитель стал покупателем, а покупатель вернулся снова.
Плагинная архитектура Shop-Script оставляет клиенту пространство для развития: магазин сможет расширять каталог, добавлять новые функции и подключать дополнительные сервисы без перестройки сайта.
Комментарии