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-icon і дрібний 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 пікселів від проблеми. Це знижує підтримковий load (менше дзвонив у call-center «як міряти?») і збільшує конверсію (клієнт впевнений у параметрах і не відкладає рішення).
«Як отримати замовлення?» — 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» — це фотосесія з реальними співробітниками і кастомним styling під бренд-палітру (бежевий/коричневий/синій акцент). Нижче кожного фото — назва послуги бежевим bold і клікабельний tile веде на повну сервісну сторінку з прайсом.
/instrukcziyi/) або тільки монтаж (якщо вже отримав посилку від попереднього замовлення і треба тільки повісити). Це знижує середній чек, але збільшує retention — клієнт повертається за окремими послугами, не «один-разовою покупкою». Замір із зразками виробів — це не просто візит з рулеткою, а офлайн-сесія підбору тканини у домашньому світлі (бо стандартний онлайн-перегляд rendering-у не передає реального відтінку при різних типах освітлення).Двомовність 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-схема використовує російські транслітерації (koshyk, magazyn) — це навмисна декларація локалу для пошукових систем: Google розрізняє російськомовний контент за URL-сигналом, а не тільки lang="ru" у HTML.
Мобільна верстка 390×844 — burger-меню, повноширинна CTA, USP-стек у скрол
На viewport 390×844 (iPhone 13) layout перебудовується акуратно (див. iPhone-overлей у шапці кейсу): top-row схлопується у burger-icon ліворуч, логотип і language-toggle компактуються, кошик і wishlist залишаються видимими у правому куті як persistent icons. Hero показує H1+H2+CTA «Каталог» у full-width (CTA — bezeve-коричнева плашка з стрілкою, повноширинна), а 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 роки і хоче зрозуміти процес перед тим як заповнити форму заявки.
