Портфолио

Разработка интернет-магазина роботов для уборки iRobot52

Разработали магазин роботов для уборки iRobot52 на Webasyst Shop-Script: адаптивный дизайн пяти страниц для экранов 320–1920 px, HTML5/CSS3-вёрстка, интеграция разделов магазина, сайта, блога, фото и бесплатных плагинов.

Главная iRobot52 с баннером Roomba, новинками, видео, отзывами клиентов и формой обратной связи.

Корзина iRobot52: товары, количество, промокод, итоговая сумма и подборка недавно просмотренных роботов.

Дизайн главной iRobot52 с подборками новинок и лидеров продаж, подпиской на новости и информационными блоками.

Категория роботов iRobot52 в виде списка с боковыми фильтрами цены и характеристик, сортировкой и кнопками корзины.

Карточка iRobot Roomba 980 с активной вкладкой отзывов, формой оценки товара, аксессуарами и недавно просмотренными моделями.

Оформление заказа iRobot52 с блоками доставки, оплаты, сведений о покупателе и подтверждения состава заказа.

О проекте

Интернет-магазин автоматических систем уборки

Для iRobot52 команда Quadro Design создала интернет-магазин роботов для уборки с нуля на Webasyst Shop-Script. Работы охватили дизайн, адаптивную вёрстку, интеграцию в функциональность платформы и оформление плагинов. Интерфейс разрабатывали с учётом розничных и оптовых покупателей. Каталог объединяет устройства для сухой и влажной уборки, мытья окон, очистки водостоков и бассейнов, а также аксессуары.

Адаптивный дизайн пяти основных страниц

Разработали дизайн главной страницы, категории, товара, корзины и оформления заказа. Диапазон отображения сайта составил от 320 до 1920 пикселей. На главной странице совместили тематический баннер, новинки, лидеров продаж, видеопрезентацию, новости, отзывы и форму обратной связи. Белое пространство и зелёные акценты помогают выделить товарные подборки, а голубые кнопки отделяют действия покупки от информационных блоков.

Для категории подготовили интерфейс подбора по цене и характеристикам, сортировку и список товаров с фотографиями, описаниями и ценами. В карточке устройства отдельно представили основные характеристики, фотографии и тематические вкладки: видео, описание, комплектация, характеристики и отзывы. На странице предусмотрели показ аксессуаров и недавно просмотренных товаров. Эти элементы оформлены в одной системе, чтобы переход между каталогом и карточкой сохранял привычную структуру.

Корзина и оформление заказа

В корзине выделили товарные позиции, управление количеством, промокод, итоговую сумму и переход к оформлению. Страницу заказа разделили на блоки доставки, оплаты, информации о покупателе и подтверждения. Визуально выделили выбранные варианты и основные кнопки; контактные данные, адрес и состав заказа получили отдельные области. Такая организация помогает последовательно просматривать сведения перед отправкой заказа.

Вёрстка и интеграция Webasyst

Нарисовали адаптивный дизайн пяти страниц для розничных и оптовых покупателей.
Выполнили вёрстку с использованием HTML5 и CSS3 для ширин 320–1920 px.
Обеспечили согласованное отображение в Opera, Mozilla Firefox, Internet Explorer, Chrome, Safari и Yandex, а также на iPad, iPhone и устройствах Android в рамках выполнения проекта.
Интегрировали вёрстку в полный функционал Webasyst Shop-Script 6.
Включили разделы «Магазин», «Сайт», «Блог» и «Фото», а также все бесплатные плагины Webasyst.

При оформлении разделов и плагинов сохранили общие принципы навигации, цветовые акценты, стиль товарных блоков и форм. Кейс показывает разработку специализированного магазина техники, в котором подробная информация об устройствах сочетается с адаптивными страницами покупки. Работа с дизайном, вёрсткой и интеграцией была частью единого процесса создания сайта на Webasyst.

Другие проекты и разработка сайта

Посмотрите разработку магазина электроники CoolKeen и разработку магазина холодильного оборудования IceLiner в нашем портфолио сайтов.

Для нового проекта можно заказать создание интернет-магазина на Webasyst, обсудить программирование и доработки Shop-Script и связаться с Quadro Design.