Сайт-вітрина нового бренду інструменту, що виріс у каталог на 460+ товарів
Для лінійки акумуляторного інструменту Stromo ми розробили логотип і дизайн у Figma, зібрали сайт на WordPress + WooCommerce, а згодом розширили його до повноцінного каталогу з автоматичною синхронізацією товарів.
1Задача
Новий бренд Stromo виходив на ринок з лінійкою акумуляторного інструменту на одному акумуляторі 20 В. Потрібен був сайт українською з нуля: логотип, дизайн, каталог лінійки з характеристиками, кошик і швидкі форми зв'язку з менеджером.
2Рішення
За технічним завданням клієнта ми намалювали у Figma макети головної, картки товару, кошика та модальних вікон для десктопу й мобільних, а потім зібрали сайт на WordPress + WooCommerce (тема XStore, Elementor). Пізніше підключили e-commerce аналітику GA4 через GTM і розширили каталог імпортом товарів із XML-фіду.
3Результат
Сайт працює на стабільній зв'язці WordPress + WooCommerce: 461 товар у 115 категоріях, автоматичне оновлення цін і наявності кожні 30 хвилин, швидкий перегляд і замовлення з картки. Усі доробки винесені в дочірню тему та власний плагін — оновлення теми не ламають сайт.
Що зробили
Дизайн у Figma (2023)
- Логотип бренду Stromo за технічним завданням клієнта
- Головна сторінка: банер лінійки, каталог із характеристиками, переваги, форми зв'язку
- Картка товару з галереєю, характеристиками та комплектацією
- Модальні вікна: швидкий перегляд товару, кошик, подяка після відправки форми
- Мобільна версія головної сторінки
Розробка сайту (2023–2024)
- WordPress + WooCommerce, тема XStore, верстка сторінок на Elementor
- Каталог лінійки Stromo: інструмент, акумулятор 20/4, зарядний пристрій
- Кошик, оформлення замовлення, кнопка «Швидке замовлення» у картці
- Форми «Зв'язок за одним кліком» і «Задайте питання про інструмент», спливаюче вікно з телефоном
- Сторінки «Про нас», «Оплата і доставка» (Нова Пошта, повернення, гарантія), «Контакти»
- E-commerce аналітика GA4 через Google Tag Manager (плагін GTM Kit)
Розширення каталогу (2026)
- Імпорт категорій і товарів із XML-фіду: характеристики, фото, ціни, наявність
- Синхронізація через cron кожні 30 хвилин: ціни, залишки, нові товари чернетками, зниклі — «немає в наявності»
- Власний плагін stromo-custom: переклад XStore і WooCommerce українською, швидкий перегляд із 5 ключовими характеристиками, бейдж наявності, хлібні крихти
- Мобільна версія: товари у 2 колонки, розкривні підкатегорії в меню, ціна та кошик вище опису
- Порядок категорій за єдиним правилом у меню і віджетах, масові дії «опублікувати / у чернетки» в адмінці
- Дочірня тема XStore та резервні копії критичних налаштувань теми в git
Як це виглядає
Живий сайт поруч із макетами у Figma: головна, каталог, картка товару, кошик і мобільні версії.
Наведіть курсор на знімок — він прокрутиться. Торкніться знімка, щоб відкрити його повністю.
Як ішла робота
- 1Технічне завдання від клієнта: структура головної, блоки, тексти українською
- 2Логотип і макети у Figma: десктоп, мобільна, модальні вікна
- 3Збірка сайту на WordPress + WooCommerce, наповнення каталогу лінійки
- 4Налаштування e-commerce аналітики GA4 через GTM
- 5Імпорт каталогу з XML-фіду та автоматична синхронізація
- 6Доробки інтерфейсу в дочірній темі та власному плагіні
Що всередині
Виводите бренд на ринок?
Зробимо логотип, дизайн і сайт із каталогом, який потім легко розширювати — без переробки з нуля.