З чого складається магазин у OKKKI і з чого почати збирати

Коли магазин ще не зібраний, конструктор OKKKI може здаватися надто складним. Багато блоків, багато налаштувань, шаблони на вибір, превью у мобільному вигляді. Цей гайд — карта території. Покажемо, з чого взагалі складається магазин у Telegram, як працює Конструктор, і в якому порядку рухатися, щоб не витрачати час на хаотичні правки.

З яких частин складається магазин у Telegram#

Коли клієнт відкриває ваш бот, він бачить інтерфейс магазину з кількома логічними блоками. Це і є та сама «вітрина», яку ми збираємо в Конструкторі.

Типові частини магазину:

• Шапка — верхня частина екрана з назвою магазину і навігацією

• Перший екран (Hero, банер) — те, що бачить клієнт одразу: великий банер з пропозицією, новою колекцією або акцією

• Промо-блоки — слайдери, картки знижок, промокоди, акції

• Каталог — категорії і самі товари або послуги

• Картка товару або послуги — детальна сторінка з фото, описом, ціною, кнопкою «Купити»

• Кошик або форма заявки — те, де клієнт оформлює замовлення

• Контакти, «Про нас», FAQ, Відгуки — додаткові сторінки, які підвищують довіру

• Меню в нижній частині — швидкий доступ до головних розділів магазину

Не обов'язково використовувати всі. Базовий магазин може мати шапку, перший екран, каталог, картку товару і кошик — і вже працювати.

Як влаштований Конструктор OKKKI#

Конструктор знаходиться в лівому меню кабінету. При першому вході він покаже коротку підказку про чотири зони — вони і є основою інтерфейсу.

Зліва — блоки. Готові секції, які ви перетягуєте на полотно: банер, карусель товарів, текст, кнопки, FAQ, відгуки. Згруповані в категорії: Знижки, Баннери, Слайдери, Контакти, Переваги, Відгуки, Інформація і так далі. Можна шукати за назвою або тегами.

По центру — прев'ю. Тут видно ваш магазин рівно так, як його побачить клієнт у Telegram. Контент можна змінювати прямо тут: клікнути по тексту, по фото, по кнопці і відредагувати.

Справа — налаштування. Кольори, шрифти, розміри, відступи. Зміни застосовуються наживо, без перезавантажень. Якщо нічого не виділено, права панель показує загальні налаштування сторінки.

Кнопка «Опублікувати» зверху справа. Поки ви натискаєте «Зберегти» — зміни залишаються чернеткою. «Опублікувати» — оновлює сам магазин у Telegram. Це окремий крок: можна зберегти кілька версій і опублікувати тільки тоді, коли все готове.

Є також Автозбереження — індикатор у верхній панелі. Поточний стан зберігається сам, але опублікованим він стає тільки після кнопки «Опублікувати».

AI-Помічник конструктора#

Праворуч є окремий помічник. Він показує готовність магазину у відсотках, підказує, які сторінки ще на базовому шаблоні, і пропонує швидкі запитання типу «Що мені виправити в цьому дизайні першим?» або «Яка сторінка зараз заважає запуску?». Корисно, коли ви не знаєте, з чого почати правки.

Що таке шаблон і чи обов'язково з нього починати#

При вході в Конструктор можна обрати один із готових шаблонів дизайну. Вони відрізняються від шаблонів бізнесу, які ви обирали при реєстрації — це окреме, виключно про візуальне оформлення.

Шаблони згруповані за тегами: Швидкий старт, Товари, Їжа і напої. Серед готових:

• Стартовий магазин — базовий, безкоштовний, для більшості ніш

• Мінімал — чиста композиція з акуратними акцентами

• Преміум Glass — преміум-шаблон з glassmorphism (платний)

• Квітковий магазин — пастельні кольори, акцент на букетах

• Кав'ярня — теплий дизайн з меню напоїв

• Fashion-бутик, Кондитерська і інші

Кожен шаблон можна переглянути перед вибором — побачите, як буде виглядати ваш магазин з цим оформленням.

Якщо жоден шаблон не підходить — є опція «Порожня сторінка». Почнете з чистого аркуша і зберете магазин за своїм сценарієм.

Що порадити для старту: беріть «Стартовий магазин» або «Мінімал», адаптуйте під себе. Це швидше, ніж збирати з нуля, і шаблон не диктує контент — змінюєте все під свій бізнес.

В якому порядку збирати магазин#

Не намагайтеся налаштувати все одразу. Послідовність, яка економить час:

1. Обрати шаблон дизайну. «Стартовий магазин» — найшвидший варіант для початку. Якщо не подобається — поміняти можна в будь-який момент.

2. Налаштувати кольори і шрифти. Зміна цих параметрів змінює весь магазин одразу — простіше зробити це на старті, ніж переробляти потім.

3. Зібрати перший екран. Це найважливіша частина — те, що клієнт побачить першим. Банер з пропозицією, заголовок, кнопка дії.

4. Додати каталог. Категорії і перші 3–5 товарів або послуг. Не весь асортимент — почніть із найкращих.

5. Налаштувати картку товару або послуги. Як виглядає сторінка одного товару: фото, опис, ціна, кнопка «Купити».

6. Перевірити оформлення замовлення. Кошик або заявка — куди потрапляє клієнт, коли натискає «Купити».

7. Додати додаткові сторінки. Контакти, «Про нас», FAQ, Відгуки — для довіри. Можна додавати в міру готовності, не обов'язково одразу.

8. Зробити тестове замовлення. Перш ніж публікувати — пройти весь шлях клієнта самостійно.

9. Опублікувати.

Кожен з пунктів — окрема тема, ми розберемо в наступних гайдах цієї категорії.

Як публікація відрізняється від збереження#

Це важлива деталь, яку легко переплутати.

Зберегти — фіксує поточний стан як чернетку. Магазин у Telegram при цьому залишається таким, яким він був раніше. Можна зберегти 10 версій підряд, експериментувати, відкочувати — клієнт у Telegram нічого не побачить.

Опублікувати — оновлює сам магазин у Telegram. Усі зміни, які накопичились у чернетці, стають видимими клієнтам.

Це означає: ви можете спокійно перебирати дизайн, переставляти блоки, міняти кольори — і нічого з цього не вплине на клієнтів, поки ви не натиснете «Опублікувати».

Автозбереження працює фоном і зберігає чернетку самостійно. Це не публікація.

Що робити, якщо здається, що вийшло негарно#

Це нормальна ситуація на старті. Кілька працюючих підходів:

Поміняти шаблон дизайну. Один клік — і весь магазин виглядає інакше. Контент при цьому залишається.

Поспитати AI-Помічника конструктора. Праворуч є помічник із готовими питаннями типу «Що виправити першим?». Він проаналізує поточний стан і дасть конкретні поради.

Подивитися як виглядають готові шаблони через кнопку «Переглянути» — побачите типові рішення і зрозумієте, що можна повторити.

Відкласти на день і подивитися свіжим оком. На етапі коли все нове, складно оцінити об'єктивно.

Якщо все одно не йде — почати з нового шаблону «Порожня сторінка» і зібрати тільки те, що дійсно потрібно: шапку, перший екран, каталог, картку товару. Без додаткових блоків. Простий магазин виглядає краще, ніж перевантажений.

Що робити далі#

Загальну будову розібрали. Наступний крок — зайнятися першим екраном: тим, що клієнт побачить одразу, як відкриє ваш магазин. Це найважливіший блок усієї вітрини.

Якщо щось не працює#

Корисні матеріали#

• Гайд: Перший огляд кабінету OKKKI: де що знаходиться — попередній крок

• Гайд: Перший екран: як зробити так, щоб клієнт залишився — наступний крок

• Гайд: Категорії і каталог: як організувати товари або послуги

• База знань: Не зберігається картка товару або послуги

• База знань: Як змінити порядок товарів і категорій

• Блог: Магазин у Telegram: як це працює