Skip to content

Як змінити дизайн вітрини

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


1. Налаштування профілю кріейтора

Шапка вашої вітрини містить ваше ім'я, опис профілю (Bio), аватар та соціальні мережі.

  • Аватар, Назва магазину та Bio (Опис): Редагуються у розділі Магазин (основна інформація профілю) або Налаштування (фото профілю).
  • Соціальні мережі: Налаштовуються у розділі Дизайн у відповідному однойменному блоці. Додайте посилання на ваші профілі (Instagram, Telegram, TikTok, YouTube тощо), і відповідні іконки автоматично з'являться у шапці вашої вітрини.

Налаштування профілю кріейтора


2. Вибір фону вітрини

Ви можете налаштувати фон вашої вітрини у два способи:

  • Колір (Готові пресети): Оберіть один із готових колірних пресетів або градієнтів. Кожен пресет уже збалансований за контрастністю та автоматично змінює колір тексту для досягнення найкращої читабельності.
  • Фото (Власне зображення): Завантажте власне фонове зображення з комп'ютера або телефону, щоб зробити дизайн повністю унікальним.

Налаштування фону та колірних пресетів


3. Налаштування карток товарів

Виберіть, як саме товари будуть розміщені на вітрині. Доступні два формати карток:

  • Макет Hero: Велике та виразне зображення обкладинки (пропорція 3:4) розміщується зліва, а деталі (назва, короткий опис, ціна та кнопка) — справа. Цей макет чудово підходить, якщо у вас невелика кількість товарів (до 5) і кожна обкладинка має важливе значення.
  • Макет Compact: Картка займає всю ширину екрана з невеликим квадратним зображенням зліва та кнопкою покупки внизу. Ідеально підходить для великих каталогів товарів, оскільки економить місце на мобільних пристроях.

4. Шрифти та оформлення тексту

Ви можете налаштувати характер вашого бренду через типографіку. Khyst підтримує вибір перевірених шрифтів окремо для двох типів тексту:

  1. Шрифт заголовків — для назви вітрини та назв товарів.
  2. Шрифт основного тексту — для коротких описів, bio та тексту кнопок.

5. Стиль та форма кнопок

Кнопка покупки — це головний інтерактивний елемент сторінки. Налаштуйте її під свій стиль:

Форма кнопок:

  • Прямокутна — строгі кути для ділового чи технологічного стилю.
  • Закруглена — м'які сучасні кути, що підходять більшості брендів.
  • Пілюля — максимально округлена форма для сучасного дружнього дизайну.

Стиль відображення:

  • Заливка — класична кнопка з яскравим суцільним кольором.
  • Обведення — прозора кнопка з тонкою контрастною рамкою (мінімалізм).
  • Тінь — кнопка з м'якою тінню, що додає об'єму та ефекту натискання.

6. Кольорова гама магазину

Оберіть один акцентний колір для вашого магазину (наприклад, фірмовий колір вашого бренду). Цей колір буде використаний для кнопок, цін, активних вкладок та інших ключових елементів інтерфейсу.

Розумний дизайн: Khyst автоматично підбере гармонійні відтінки тексту та фону карток залежно від обраного вами фону або кольорової гами, щоб забезпечити 100% читабельність і відповідність стандартам доступності.


7. Живий перегляд (Live Preview)

Під час налаштування дизайну у правій частині екрана на десктопі завжди відображається мобільний симулятор вашої вітрини. Будь-які зміни (зміна шрифту, кольору чи фону) миттєво відображаються на екрані віртуального смартфона.

На мобільних пристроях або планшетах для перегляду результату натисніть кнопку Відкрити прев'ю (на комп'ютерах симулятор відображається постійно у правій частині екрана).

Мобільний симулятор та інтерфейс налаштування дизайну


Наступні кроки

Тепер, коли вітрина виглядає неперевершено, налаштуйте прийом реальних оплат:

Маєш хист - монетизуй