ShopVibe — це демонстраційний інтернет-магазин одягу, взуття та аксесуарів українською мовою. Ми зробили його як приклад того, як проєктуємо й розробляємо онлайн-магазини під ключ: від дизайн-системи й вітрини до адмін-панелі з реальними замовленнями.
Що це за проєкт
Повноцінний інтернет-магазин із повним циклом: вітрина з каталогом, кошиком і оформленням замовлення — та адмін-панель для управління товарами, замовленнями і клієнтами. Це демо-проєкт Studigence, на якому видно, як магазин працює «в бою».
Для кого і навіщо
Такий магазин підходить fashion- і lifestyle-брендам, локальним магазинам і будь-якому бізнесу, що хоче продавати онлайн. На прикладі ShopVibe видно, що отримує клієнт: зрозумілу вітрину, робочий кошик, оформлення замовлення і реальне управління продажами в адмінці.
Дизайн і дизайн-система
В основі — власна дизайн-система: кольори, типографіка, відступи, радіуси, тіні й набір UI-компонентів. Це дає єдиний стиль і просте масштабування.
- енергійний бренд-акцент для ключових дій;
- акуратна типографіка, багато «повітря», pill-кнопки, м'які тіні;
- mobile-first і бездоганна адаптивність;
- доступність рівня WCAG AA;
- зображення у форматі WebP для швидкості.
Вітрина: що вміє
- головна: промо-банер, добірка категорій, новинки та хіти, акційний блок, підписка;
- каталог: фільтри за категорією і розміром, сортування, пошук, пагінація;
- сторінка товару: галерея, вибір кольору і розміру, кошик, опис, характеристики, таблиця розмірів, відгуки, схожі товари;
- кошик: бічна панель і окрема сторінка, промокод, авторозрахунок доставки;
- оформлення замовлення: контактні дані, доставка (Нова Пошта / кур'єр / самовивіз), оплата, валідація;
- сторінки «Про нас», «Контакти» і повний набір політик.
Адмін-панель: управління магазином
Повноцінний бек-офіс для контенту і продажів.
- інфопанель з метриками (виручка, замовлення, середній чек, залишки) і графіком;
- товари: каталог із фото, цінами, знижками, складом і рейтингом;
- категорії та модерація відгуків;
- замовлення: список зі статусами і детальна картка (клієнт, доставка, оплата, позиції, підсумок);
- клієнти і запити з сайту.
Замовлення з вітрини автоматично потрапляють у панель із позначкою джерела.
Технічні фішки
Кошик зі збереженням стану на Alpine.js, SEO-оптимізація (унікальні meta-теги, Open Graph, schema.org для товарів і навігації) та семантична розмітка. Магазин наповнено реалістичними даними: 5 категорій, 30 товарів, відгуки, понад 50 замовлень, база клієнтів і запитів.
Потрібен інтернет-магазин?
Ми робимо онлайн-магазини під ключ — від дизайн-системи до адмінки. Почати можна з мінімального сайту, а магазин і рішення додати під ваші задачі. Отримати оцінку проєкту.
