Інтернет-магазин меблів
Створення інтернет-магазину для меблевого бізнесу рідко зводиться до каталогу, кошика й кнопки «Купити». До проєкту досвідченого ритейлера меблевої продукції 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, що запобігає автоматичним відправкам і спаму, зберігаючи при цьому комфортний досвід для покупців.
Плагін покинутих кошиків
Далеко не кожен відвідувач, який додав товар у кошик, завершує покупку. Аби створити сайт для продажу з максимальною конверсією, ми підключили плагін відкладених кошиків, який відстежує незавершені замовлення. Він зберігає склад і суму кошика, контактні дані покупця (якщо вони були введені) й автоматично надсилає імейл про незавершену покупку. Менеджер інтернет-магазину теж отримує сповіщення, а разом із ним — і аналітику повернень покупців після нагадування.
Для меблевого бізнесу, де середній чек високий, а рішення про покупку часто відкладається на кілька днів, такий інструмент має відчутний вплив на продажі.
Дивіться схожий кейс:
Тригерне розсилання «Покинутий кошик»Вибране та порівняння товарів
Покупець меблів рідко приймає рішення відразу — він порівнює, радиться та повертається через кілька днів. Плагін вибраного дозволяє зберігати вподобані позиції в окремий список, аби потім знову не шукати товар і оформити замовлення в декілька кліків.
Проблему вибору меблів із десятків схожих моделей розв’язує плагін порівняння: покупець додає товари й отримує зведену таблицю характеристик — оббивки, розмірів, країни-постачальника тощо.
Обидва рішення інтегровані в Shop-Script через систему хуків. Дані зберігаються у сесії гостя чи профілі клієнта, тож у разі закриття браузера список товарів не зникне.
Результат — оновлений сайт інтернет магазину меблів
Mebel Boom отримав редизайн інтернет-магазину з кастомною версткою на звичній e-commerce платформі Shop-Script. Продуманий каталог із гнучкою фільтрацією, зручний кабінет користувача, кошик з промокодами, блоки допродажу, плагін покинутих кошиків — кожен елемент онлайн-магазину працює на те, щоб відвідувач став покупцем, а покупець повернувся знову.
Плагін-архітектура Shop-Script залишає клієнту простір для розвитку: магазин зможе розширювати каталог, додавати нові функції та підключати додаткові сервіси без перебудови сайту.
Комментарии