Магазин білизни з каталогом, що продає
Comease — український виробник спідньої білизни та базового одягу. Супроводжуємо сайт із 2021 року: спочатку дизайн магазину у Figma, а у 2026-му — повний редизайн шапки, каталогу і карток на OpenCart 3 із двомовною структурою адрес і 301-редиректами без втрати SEO.
1Задача
У 2021 році клієнт прийшов із сайтом на WordPress: прибрати важкі плагіни, прискорити завантаження, виправити мобільну версію і намалювати дизайн нового магазину. У 2026-му — нове ТЗ для магазину на OpenCart 3: зрозуміле меню «Жінкам / Чоловікам / Дітям» з ієрархією, українська версія як основна і російська під /ru/, картки з розмірами та рейтингом, мобільна версія за зразком лідерів ніші.
2Рішення
Працювали на тестовій копії — бойовий сайт не чіпали до готовності. Перебудували категорії та адреси (SeoPro, hreflang, 301-редиректи для всіх старих URL), зробили нову шапку з трирівневим меню, пошуком, обраним і формою «Передзвоніть мені», уніфікували картки товару, підключили фільтр за розміром і кольором, вивели відгуки на сторінку товару та переверстали мобільну версію.
3Результат
Магазин із чистими адресами двома мовами без дублів, близько 100 товарів із фільтром за 7 параметрами, картки з розмірами, рейтингом і червоною акційною ціною. В адмінці — мета-теги головної для кожної мови, автоматичні ЧПУ для нових товарів з українською транслітерацією та режим «архівний товар», який зберігає сторінку для реклами, не показуючи її в каталозі.
Що зробили
Дизайн і перші доробки (2021)
- Аудит сайту на WordPress: заміна важкого слайдера на легкий адаптивний, прискорення завантаження, правки мобільної шапки і фільтра, що згортається.
- Дизайн нового магазину у Figma для десктопа 1920: головна, каталог, сторінка товару, кошик, оформлення замовлення, модальне вікно.
- Мобільні екрани 320: каталог, сторінка товару, додавання до кошика, меню.
Структура каталогу і SEO (2026)
- Категорії у три рівні: Жінкам / Чоловікам / Дітям → підкатегорії → типи. Клік по будь-якому рівню показує товари всіх вкладених.
- Українська версія як основна, російська під /ru/; hreflang uk / ru / x-default, canonical на картках, noindex для сторінок пошуку.
- 28 правил 301 для старих адрес категорій і редирект «голих» URL товарів на повну адресу з категорією — зі збереженням параметрів сортування.
- Автогенерація ЧПУ для нових товарів із коректною українською транслітерацією (і → i, ї → i, є → ie, щ → shch).
- Окремі розділи «Акції», «SALE» і «ТОП продажів» із власними адресами.
Шапка, меню, каталог
- Верхній рядок посилань, логотип по центру, телефон і «Передзвоніть мені» (модальна форма з AJAX), іконки пошуку, кабінету, обраного і кошика з лічильниками.
- Трирівневе меню з випаданням при наведенні та пошук, що розгортається під шапкою.
- Фільтр OCFilter: тип, матеріал, особливості, розмір з урахуванням наявності, колір (атрибут зібрано для 98 зі 100 товарів), ціна, знижка.
- Сортування і кількість на сторінці; товари в наявності завжди першими.
- Єдина картка товару на 7 шаблонах: бейджі SALE / Bestseller, доступні розміри, рейтинг із кількістю відгуків, червона акційна ціна, кнопка «Купити» та обране в один клік.
Сторінка товару та адмінка
- Відгуки в HTML сторінки товару з мікророзміткою Schema.org Review / Rating; відгуки відкриваються і з картки в каталозі.
- Стан «немає в наявності»: сіра ціна і неактивна кнопка для повністю розпроданих позицій.
- Поля meta title / description / H1 головної для кожної мови прямо в налаштуваннях магазину.
- Режим «Архівний товар»: сторінка доступна за прямим посиланням з реклами і закладок, але не показується в каталозі, пошуку та sitemap.
- Темний чотириколонковий футер із платіжними логотипами; захист вихідної пошти від підміни відправника.
Мобільна версія
- Бургер-меню з розкривними рівнями, телефоном і поштою, перемикачем мов, окремими пунктами «Акції» та «SALE».
- Чотири іконки в шапці — пошук, кабінет, обране, кошик; компактний випадний кошик.
- Переверстано кошик, картки, сортування і футер під смартфон; прибрано «залипання» hover-ефектів на дотик.
Як це виглядає
Живий сайт у 2026 році: головна з лідерами продажів і плитками категорій, каталог із фільтром, сторінка товару з відгуками та мобільна версія.
Наведіть курсор на знімок — він прокрутиться. Торкніться знімка, щоб відкрити його повністю.
Як ішла робота
- 1ТЗ від клієнта з референсом конкурента, аудит поточної теми і бази даних
- 2Тестова копія сайту: вся розробка на dev, бойовий не чіпаємо
- 3Спершу адреси і редиректи, потім меню, картки і мобільна верстка — щоб не переробляти двічі
- 4Поетапний перенос на бойовий із резервними копіями бази і файлів та можливістю відкату
- 5Місяць підтримки після запуску: дрібні правки, SEO-функції в адмінці
Що всередині
Потрібен магазин або редизайн наявного?
Розкажіть про свій бізнес — за 1 день порахуємо вартість і строки розробки чи доробки магазину на OpenCart.