Сайт виробника контрольних браслетів, що продає з 2018 року
Braslet.kh.ua — сайт харківського виробника контрольних браслетів TYVEK, вінілових, силіконових, тканинних, медичних та ID. Ведемо його з 2018-го: конструктор браслетів, українська версія, реклама, редизайн — а у 2026-му будуємо нову версію на WordPress + WooCommerce з повноцінним конфігуратором кольору, тиражу і друку.
1Задача
Виробник контрольних браслетів продає під нанесення: ціна залежить від тиражу, кожен вид має десятки кольорів, а до браслета додається друк логотипу, нумерації чи QR-коду. Сайт мав дати клієнту зібрати замовлення самому — обрати вид, колір, кількість, текст і логотип — і працювати двома мовами. У 2026-му старий сайт на Joomla перестав відповідати задачам: потрібен повноцінний магазин із кошиком, онлайн-оплатою і доставкою.
2Рішення
З 2018 року доробляємо і підтримуємо сайт на Joomla: конструктор браслетів із вибором кольору стрічки й тексту та прев’ю напису, прайс за тиражами, українська версія, внутрішня оптимізація, нові розділи (ID браслети, медичні), контекстна реклама. У 2021–2022 провели редизайн за макетами Figma. У 2026-му зібрали нову версію на WordPress + WooCommerce: окрема верстка на Gulp + SCSS, власна тема, конфігуратор TYVEK із живою палітрою кольорів і цінами за кількістю, опції друку, кошик і чекаут під бізнес клієнта, доставка Новою Поштою, онлайн-оплата.
3Результат
Сайт безперервно приймає замовлення вісім років: 6 категорій браслетів, конструктор на кожній сторінці, прайс із 7 ціновими порогами від 100 до 10 000 шт, дві мови. Нова WooCommerce-версія вже працює на тестовому піддомені: 15 кольорів TYVEK із реальними фото, розрахунок суми з урахуванням тиражу й опцій друку, прогрес-бар безкоштовної доставки, три способи доставки та головна, що веде до товару з першого екрана.
Що зробили
Підтримка і розвиток сайту на Joomla (2018–2022)
- Доробка конструктора браслетів: колір стрічки і тексту, прев’ю напису, завантаження логотипу, кількість
- Власний компонент «Браслети» з таблицею замовлень в адмінці (дата і час замовлення, правки логіки)
- Українська версія сайту: переклад сторінок і розділів, UA/RU перемикач
- Внутрішня оптимізація: метатеги, robots.txt, sitemap.xml, htaccess, Open Graph для месенджерів
- Нові розділи: ID браслети, друк нумерації на медичних браслетах, сторінки друку на кожному виді
- Прайси за тиражами, лейба «Власне виробництво», банери для реклами, правки контенту за ТЗ клієнта
- Редизайн і нова верстка сайту (2021–2022)
Контекстна реклама Google Ads (з 2018)
- Налаштування кампанії і 4 груп оголошень, підбір ключів по 5 категоріях браслетів
- Продаючі заголовки для кожної категорії, чистка мінус-слів
- Перевід оголошень на https, підключення Analytics і Tag Manager
- Оптимізація і ведення кампанії (2020–2021)
Нова версія на WordPress + WooCommerce (2026)
- Статична верстка на Gulp + SCSS + JS (Swiper): головна, картка товару, кошик, чекаут — у Git
- Інтеграція верстки у власну тему: шапка з бургером і випадаючим каталогом, hero-слайдер на ACF
- Конфігуратор TYVEK: 15 кольорів із фото, ціни за 7 порогами тиражу, опції друку, файл макета, підсумок замовлення
- Кошик з обраними опціями і перерахунком, двоколонковий чекаут, три методи доставки Новою Поштою, власні способи оплати
- Прогрес-бар безкоштовної доставки в картці і кошику, мінімальна сума замовлення, редирект у кошик після додавання
- Редизайн головної «від товару»: жива палітра на картках (клік по кольору підставляє реальне фото), bento-сітка категорій, кроки замовлення, FAQ, блок зразків
- Три мови (UK/RU/EN) на Polylang, AJAX-пошук по товарах, PDF-рахунок до листа про замовлення
Як це виглядає
Чинний сайт на Joomla з конструктором браслетів і нова версія на WordPress + WooCommerce, яка готується до запуску.
Наведіть курсор на знімок — він прокрутиться. Торкніться знімка, щоб відкрити його повністю.
Як ішла робота
- 1Аудит старого сайту і Git-дзеркало WordPress-теми та плагінів
- 2Статична верстка сторінок окремо від CMS — перевірка дизайну в браузері
- 3Перенос верстки у тему крок за кроком: шапка → картка товару → кошик → чекаут
- 4Реальні дані замість тестових: кольори, опції, ціни за кількістю
- 5Ітерації макетів головної окремо від коду — правки в код лише після затвердження
- 6Бекапи перед кожною серйозною правкою, перевірка на dev-піддомені
Що всередині
Потрібен магазин з конфігуратором товару?
Розкажіть, як у вас формується ціна — від тиражу, кольору, нанесення. Зберемо сайт, де клієнт складає замовлення сам, а ви отримуєте готову заявку.