ColorHome — интернет-магазин рулонных штор и жалюзи с конфигуратором в Киеве
Киевский WooCommerce-магазин рулонных штор и жалюзи — 70 страниц каталога, фасетный фильтр с 60+ коллекциями и 30+ цветами, кастомный продуктовый конфигуратор с полями Ширина/Высота/Сторона/Комплектация и отдельной секцией услуг.
ColorHome — киевский интернет-магазин рулонных штор и жалюзи под брендом Color Home — Decor & Sunprotect: 70 страниц каталога на 4 продуктовые ветки (рулонные шторы, жалюзи, шторы-плиссе, римские шторы), фасетный фильтр с 60+ коллекциями тканей и 30+ цветами, кастомный product-конфигуратор с полями Ширина/Высота/Сторона управления/Дополнительная комплектация, отдельный блок Услуг (Замер, Доставка, Монтаж) и двуязычная локализация UA/RU. Стек — WooCommerce + WordPress, типичный B2C-каталог со сложной product-вариативностью размера и настраиваемой кастомизацией.
Hero с двухэтажным брендингом — Color Home + Decor & Sunprotect
Первый экран — спокойный бежевый hero на фоне смятой ткани с вертикальным кадром рулонной шторы розового цвета (за которой сидит ребёнок — это не stock-фото, а интерьерная сцена). Сверху — лого Color Home в рукописном курсиве с домашней house-иконкой и мелкий sub-line DECOR & SUNPROTECT заглавными буквами под ним: одно название для памяти, второе — для поискового запроса «декор+солнцезащита». Слева — H1 «Интернет-магазин рулонных штор и жалюзи», H2-подзаголовок «Широкий ассортимент и надёжное качество» и коричневая CTA «Каталог» со стрелкой, ведущая на /shop/.
Шапка с геолокацией города — «Киев» как заявка на сервисную зону
В левом верхнем углу — pin-иконка с подписью «Киев» и стрелкой-дропдауном. Это не локализационный i18n-переключатель (для языков есть отдельный UK/RU выше), а явная заявка о сервисной зоне: ColorHome — это киевский магазин с местным обслуживанием (замер по Киеву, курьер по Киеву, доставка по Украине отдельной линией). Сразу под шапкой — главное меню с 4 product-категориями (Рулонные шторы, Жалюзи, Шторы-плиссе, Римские шторы), у первых двух — caret-стрелки для раскрытия подкатегорий (Ролеты открытого типа / Кассетные / День-Ночь / Блэкаут — для рулонных; Горизонтальные / Деревянные / Кассетные Venus — для жалюзи). Справа — телефон в синем акценте, миникорзина со счётчиком, wishlist-сердце и поисковый input full-width.
Каталог на 70 страниц с 5-факторной фасетной фильтрацией
Страница /shop/ — глобальный каталог с пагинацией 1…70 и product-grid 4 в ряд. Левый сайдбар содержит 5 фасетных фильтров: Цена (₴10 — ₴71,371 range-slider), Фактура (Велюр, Геометрия, Цветочный принт, Листья, Линии, Однотонный, Орнамент, Под дерево, Под мрамор, Полоски), Коллекция (60+ названий коллекций: A Maxi, Abris, Bamboo, Berlin, Boston, Calcutta, Champagne, Ikea, Jungle BO Pearl, Linen Look, Royal, Screen, Velour…), Светопропускание (До 100% затемнения/блэкаут, Затемнение 80%, Затемнение до 50%), Производитель (DCSN, NKS, PRK) и Цвет (30+ — Айвори, Антрацит, Бежевый, Белый, Сиреневый, Горчица, Какао, Олива, Изумрудный…). Каждый пункт — checkbox-список с нумерованным количеством вариантов, которые собираются в URL как WP-стандартные term-query (multi-facet).
4 типа рулонных штор + 3 типа жалюзи + плиссе + римские — каждая подкатегория как отдельная посадочная
На главной под hero — секция Рулонные шторы с 4 продуктовыми карточками: Ролеты открытого типа (от 500 грн), Кассетные ролеты (от 500 грн), Ролеты день-ночь (от 500 грн), Ролеты блэкаут (от 850 грн). Каждая карточка ведёт на отдельный /shop/-archive под своим slug (/mini-shtory/, /kasetni-shtory/, /shtory-den-nich/, /rolety-blekaut/), и все 4 archive-страницы наследуют тот же 5-фасетный фильтр (Цена, Фактура, Коллекция, Светопропускание, Производитель, Цвет). Ниже — секция Жалюзи с 3 карточками (Горизонтальные, Деревянные, Кассетные Venus), плюс отдельные категории Шторы-плиссе и Римские шторы в главном меню. Такая структура (4 верхние product-категории, каждая с 3-4 подкатегориями) позволяет открытому каталогу на 70 страниц иметь не один «вход через /shop/», а 11+ целевых archive-страниц под каждый specific intent — «ночная спальня с блэкаутом» ведёт прямо на /rolety-blekaut/, не на общий поиск.
Product-страница как конфигуратор — Ширина/Высота/Сторона/Комплектация/Количество
PDP (на примере Горизонтальные жалюзи VENUS, цвет Бежевый, Эмаль, 6-PRK) — это не WC-default с фиксированной ценой и кнопкой Add-to-Cart, а полноценный кастомизационный конфигуратор. Слева — gallery с 8 thumbnail-изображениями (разные цвета ламелей в том же дизайне окна), посередине — H1, артикул V6-PRK, 8-полевой маркер-список технических параметров (Алюминиевые ламели 25 мм, цепочный механизм, карниз кассетного типа с опцией докрашивания коричневый +340 грн/м.кв. или золотой дуб +620 грн/м.кв., MAX 1500×1750 мм), а справа — белая rounded-card с заголовком Укажите параметры и полями: Ширина (textinput, мм), Высота (textinput, мм), Сторона управления (Левая/Правая — radio), Дополнительная комплектация (Струна/Нижние фиксаторы/Магниты — checkbox), Количество (qty-stepper). Внизу — динамическая цена 525 грн и две CTA — синяя «В корзину» и outline «Купить в 1 клик» (без регистрации).
«Как замерить?» и «Как установить?» как CTA прямо возле Add-to-Cart
Над конфигуратором — два outline-CTA с иконками рулетки и отвёртки: «Как замерить?» и «Как установить?», ведущие на /instrukcziyi/. Это продуманное размещение: клиент, впервые покупающий рулонную штору или жалюзи, не знает, как правильно снять размер (на створку или внутри проёма? в миллиметрах или сантиметрах? учитывать занавески или нет?) — и именно в момент заполнения поля Ширина/Высота ему нужна инструкция. Вместо того чтобы прятать её в footer-меню, она стоит на расстоянии 50 пикселей от проблемы. Это снижает поддерживающую нагрузку (меньше звонков в call-центр «как мерить?») и увеличивает конверсию (клиент уверен в параметрах и не откладывает решение).
«Как получить заказ?» — 3 типа доставки + 5-шаговая операционная схема
Ниже конфигуратора — отдельная rounded-card с заголовком Как получить заказ? и тремя horizontal-строками с SVG-иконками: Забрать самовывозом из нашего магазина (Бесплатно), Доставка курьером по Киеву (От 0 грн), Доставка по Украине (Стоимость рассчитывается индивидуально). Это сидит прямо возле кнопки заказа — не в footer-блоке, не на отдельной /dostavka-i-oplata/-странице, а в момент принятия решения. Ещё ниже — полноэкранная 5-шаговая операционная схема процесса: 1) Заявка на сайте (или звонок), 2) Замер (замерщик приходит с каталогами и образцами изделий), 3) Договор (письменный договор + предоплата), 4) Изготовление (от 72 часов, опция срочности +15%), 5) Доставка и монтаж. Это не sales-funnel — это объяснение процесса для клиента, который заказывает кастомное производство впервые в жизни и не понимает, почему это не «купил-получил за 3 дня» как на Rozetka.
Услуги как отдельный раздел — Замер, Доставка, Монтаж с реальными людьми на фото
Страница /poslugy/ содержит 3 услуги в grid 1×3: Замер с образцами изделий (URL /zamir-rulonnyh-shtor-ta-zhalyuzi/), Доставка (URL /dostavka-i-oplata/) и Монтаж (URL /montazh-rulonnyh-shtor-ta-zhalyuzi/). Каждая карточка имеет скруглённый бежевый фон и полноростовое фото реального персонала: замерщик в синем комбинезоне с рулеткой, курьер в красной рубашке с посылкой и планшетом, монтажник в голубом рабочем костюме и жёлтой каске рядом со стремянкой. Это не stock-фото с Shutterstock «professional worker» — это фотосессия с реальными сотрудниками и кастомным стайлингом под бренд-палитру (бежевый/коричневый/синий акцент). Ниже каждого фото — название услуги бежевым bold, и кликабельная плитка ведёт на полную сервисную страницу с прайсом.
/instrukcziyi/) или только монтаж (если уже получил посылку от предыдущего заказа и нужно только повесить). Это снижает средний чек, но увеличивает retention — клиент возвращается за отдельными услугами, не «одноразовой покупкой». Замер с образцами изделий — это не просто визит с рулеткой, а офлайн-сессия подбора ткани в домашнем свете (потому что стандартный онлайн-просмотр рендеринга не передаёт реального оттенка при разных типах освещения).Двуязычность UA/RU — полный перевод, не sprinkled-key-pages
В правом верхнем углу — language-toggle UK/RU. Переход с UK на RU не редиректит на главную (типичная ошибка двуязычных WP-сайтов), а сохраняет текущий контекст: /shop/ → /ru/magazyn/, /rulonni-shtory/ → /ru/rulonni-shtory-ru/, /cart/ → /ru/koshyk/. Это означает, что RU-версия имеет полную параллельную структуру WordPress-permalinks, не key-pages-only-translation (как часто делают на Polylang с фолбеком на украинском на 80% контента). Slug-схема использует транслитерации — это намеренная декларация локали для поисковых систем: Google различает русскоязычный контент по URL-сигналу, а не только lang="ru" в HTML.
Мобильная вёрстка 390×844 — burger-меню, полноширинная CTA, USP-стек в скролл
На viewport 390×844 (iPhone 13) layout перестраивается аккуратно (см. iPhone-оверлей в шапке кейса): top-row схлопывается в burger-icon слева, логотип и language-toggle компактуются, корзина и wishlist остаются видимыми в правом углу как persistent icons. Hero показывает H1+H2+CTA «Каталог» в full-width (CTA — бежево-коричневая плашка со стрелкой, полноширинная), а 4-блочный USP не переходит в swiper, а вертикально стекается в 2-в-ряд скролла. Ниже — секция «Рулонные шторы» с 2-в-ряд grid карточек (Ролеты открытого типа и Кассетные ролеты в видимой части). Это не desktop-shrink-с-zoom, а структурная перестройка: разделение hero/USP/категорий сохранено, но layout-density уменьшена до того, что читается с 6-дюймового экрана в руке. USP-стек на мобильном не переходит в swiper или карусель — а вертикально читается весь, без жестов: все 4 преимущества должны быть сразу видимыми, без необходимости активного взаимодействия. Carousels на mobile (особенно без автопродвижения) практически не кликаются — клиент видит только первый слайд и идёт дальше.
Breadcrumbs Магазин → Жалюзи → Горизонтальные → Артикул — полная навигационная линия
На каждой подстранице (категория, подкатегория, product) — breadcrumb-лента вверху страницы: Главная | Магазин | Жалюзи | Горизонтальные жалюзи | Горизонтальные жалюзи VENUS, цвет Бежевый, Эмаль, 6-PRK. Это 5-уровневая иерархия с полными названиями (не «Назад» / «Категория» — а конкретными названиями подкатегорий). На WordPress-каталоге с 70 страницами и 11+ категориями это не косметика, а сильный UX/SEO-сигнал: клиент, зашедший на product из Google-рекламы, видит свой контекст («ага, это горизонтальные жалюзи, не вертикальные»), а Google-bot получает чёткую taxonomy-структуру для site-links в SERP.
Итог
ColorHome — типичный B2C WooCommerce-каталог для категории товаров с кастомным производством: 70 страниц продуктов, 5-фасетная фильтрация с 60+ коллекциями и 30+ цветами, кастомный конфигуратор вместо статичной цены, отдельная секция услуг (замер/доставка/монтаж) и честный 5-шаговый pipeline «Заявка → Замер → Договор → Изготовление 72 ч → Монтаж», объясняющий клиенту, почему это не «купил-получил». Сильные решения — двухэтажный бренд (Color Home + Decor & Sunprotect), геолокационный сигнал «Киев» прямо в шапке, вынос инструкций «Как замерить/установить» рядом с Add-to-Cart, реальные фото персонала вместо stock на странице услуг, полная параллельная UA/RU-структура с обоими локализованными slug’ами. Это не «дизайнерский конкурент Westwing» — это рабочий магазин для киевского клиента, который покупает рулонную штору в спальню один раз в 3 года и хочет понять процесс перед тем как заполнить форму заявки.
