Портфолио

Создание интернет-магазина сантехники Santaflo

Разработали магазин сантехники Santaflo с нуля: дизайн и вёрстка, интеграция в Webasyst Shop-Script, установка и оформление модулей, каталог, карточка товара и корзина.

Главная страница Santaflo: каталог сантехники, баннер, популярные товары, бренды и новости

Каталог Santaflo в виде списка: фильтры по цене и цвету, сортировка и товарные строки

Каталог сантехники Santaflo в виде сетки: фильтры, фотографии, оценки и цены товаров

Представление каталога Santaflo плитками с фильтрами и переключением вида товаров

Представление каталога Santaflo списком с фильтрами, сортировкой и постраничной навигацией

Карточка товара Santaflo: кухонная мойка, фотографии, характеристики, выбор варианта и рекомендации

Корзина Santaflo: товары, изменение количества, суммы позиций и переход к оформлению заказа

О проекте

Создание магазина сантехники Santaflo

Santaflo — интернет-магазин сантехники, который мы разработали с нуля на Webasyst Shop-Script. В проект вошли дизайн, вёрстка, интеграция витрины в платформу, установка модулей и вёрстка их интерфейсов. Задача заключалась в том, чтобы связать презентацию товаров для ванной и кухни с подробным каталогом, характеристиками отдельных моделей и оформлением заказа.

Дизайн главной и общих элементов

Оформление сочетает светлый фон, голубые акценты и фотографии сантехники в интерьере. В шапке размещены логотип Santaflo, информационное меню, контакты, поиск и корзина с количеством товаров и суммой. Боковой каталог сохраняет отдельное место рядом с основным содержимым. На главной странице большой баннер сопровождается подборками популярных и рекомендуемых товаров, акционным блоком и логотипами производителей.

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

Два представления каталога

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

Карточка сантехники и корзина

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

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

Интеграция в Shop-Script

Созданную вёрстку мы интегрировали в Webasyst Shop-Script. Установленные модули получили оформление в рамках общего дизайна. Кейс Santaflo показывает полный цикл разработки магазина сантехники: главная, оба представления каталога, товарная карточка и корзина объединены в индивидуальную витрину на Webasyst.

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

Посмотрите разработку магазина фильтров для воды «Промводснаб» и разработку магазина климатического оборудования Ozonair в нашем портфолио сайтов.

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