Створюйте та змінюйте дизайн інтернет-магазину в реальному часі
Уявіть: ви відкриваєте свій сайт як покупець і редагуєте текст прямо на сторінці — без пошуку потрібного розділу в адмінпанелі. Помітили одрук у заголовку, застарілу ціну чи невдале формулювання — навели курсор, натиснули й виправили. Саме для цього створено візуальний редактор BooStore.
Візуальний редактор BooStore дозволяє створювати та змінювати дизайн інтернет-магазину прямо на живій сторінці. Ви бачите сайт так, як його бачить покупець, і редагуєте саме те, що потрібно: заголовки, тексти, HTML-блоки, меню, категорії, виробників, колекції та кнопки. Не потрібно знати код, відкривати файли шаблону чи шукати блок у довгих списках адмінпанелі.
Це швидкий візуальний конструктор із живим прев’ю, кастомізацією шаблонів і високою швидкістю завантаження. Для тонких налаштувань завжди доступний повний редактор кожного розділу.
📄 Зміст статті
🖱️ Що таке візуальний редактор BooStore
Візуальний редактор — це режим, у якому сайт відкривається як звичайна сторінка, а доступні для правки елементи підсвічуються. Натисніть «Візуальний редактор» і змінюйте вміст та оформлення без переходу в адмінку. Зміни надсилаються на сервер кнопкою «Зберегти» і зберігаються в тих самих даних, що й у повному редакторі.
- Живе прев’ю: результат видно одразу.
- Без коду: текст, HTML і готові блоки редагуються візуально.
- Безпечно: доступ перевіряється за правами користувача й власника сайту.
- Зрозумілі помилки: про ліміти та відсутність прав редактор повідомляє.
🚶 Як це виглядає на практиці
Відкрийте будь-яку сторінку сайту й наведіть курсор на заголовок або абзац — з'явиться іконка редагування. Натисніть її, виправте текст на місці й збережіть. Так само можна змінити текст кнопки категорії, заголовок статті або вміст готового блока. Не потрібно шукати сторінку в адмінпанелі та відкривати довгі форми.
- Відкрийте сторінку або статтю на сайті.
- Наведіть курсор на потрібний текст чи блок.
- Натисніть іконку редагування та внесіть правку.
- Натисніть «Зберегти» — зміни одразу з'являться на сайті.
🧩 Що можна редагувати
- Сторінки: заголовок і HTML-вміст.
- Статті: заголовок і текст.
- Блоки та меню: заголовок, HTML-вміст і готові блоки.
- Категорії магазину: заголовок, текст і текст кнопок.
- Виробники та колекції: заголовок, текст і текст кнопок.
- Категорії каталогу статей: заголовок, текст і текст кнопок.
Кнопки категорій — це посилання, тому в них змінюється лише текст: тег посилання створюється автоматично й не редагується. Для кнопок відкривається зручне текстове поле, де можна використовувати HTML, а теги посилань видаляються автоматично.
🧱 Готові візуальні блоки
Вкладка «Візуальні блоки» — це бібліотека готових секцій: переваги, тарифи, відгуки, галереї, контакти, заклики до дії та інші. Блок перетягується на сторінку цілком, після чого його текст, кнопки та зображення редагуються як звичайні елементи. Не потрібно верстати секцію з нуля — виберіть відповідний готовий блок і адаптуйте під свій магазин. У панелі також можна перемикати колірну схему та мову блока.
Приклади й каталог готових візуальних блоків: templates_visual_blocks.html.
🧑💻 HTML і створення елементів
Вкладка «HTML» містить базові елементи: DIV, SECTION, H1–H4, P, списки, таблицю, зображення та інші. Перетягніть елемент на сторінку або вставте власний HTML через кнопку </> біля блока. В HTML можна використовувати класи, стилі, атрибути та шорткоди BooStore — кошик, пошук, меню й готові віджети; службові шорткоди переміщуються лише цілком.
Для складної верстки, SEO-мета та додаткових полів відкрийте повний редактор розділу. Візуальний і повний редактори працюють з одними даними, тому зміни не губляться.
🚀 Як почати
- Відкрийте потрібну сторінку як адміністратор або власник сайту.
- Натисніть «Візуальний редактор» у панелі.
- Наведіть курсор на заголовок, текст, блок або кнопку — з’явиться іконка редагування.
- Внесіть зміни та натисніть «Зберегти».
⚡ Швидкий доступ через спливаючі вікна
В адмінпанелі є режим «Додати розмітку швидкого доступу». Увімкніть його — на елементах сайту з'являться кнопки швидкого редагування. Натисніть потрібний елемент, і відкриється спливаюче вікно з полями для правки: текст, посилання, зображення або інші параметри. Це зручно для точкових правок без переходу в повний редактор.
Коли швидкий доступ більше не потрібен, натисніть «Сховати розмітку швидкого доступу». Режим можна вмикати й вимикати в будь-який момент.
🛠️ Коли потрібен повний редактор
Кожен розділ сайту можна редагувати окремо з панелі керування: сторінки, статті, блоки й меню, категорії магазину, виробників, колекції та категорії каталогу статей. У повному редакторі доступні SEO-мета, права доступу, мови, показ за сторінками, позиції меню та додаткові поля.
Візуальний редактор — швидкий інструмент для контенту й дизайну. Коли потрібні розширені налаштування, відкрийте повний редактор потрібного розділу в панелі керування. Візуальний і повний редактори працюють з одними даними, тому зміни не губляться.
Детальніше: повна кастомізація дизайну та повний функціонал BooStore.
⚡ Швидкість і мобільність
Редактор не додає важких залежностей на сайт і не впливає на швидкість завантаження для покупців. Панель адаптована до малих екранів: вікна, текстові поля й кнопки зручні на планшеті та смартфоні.
❓ Часті питання
Чи потрібно знати код, щоб змінювати дизайн?
Ні. Основні зміни робляться візуально: текст, заголовки, готові блоки, кнопки. HTML доступний за потреби, але не обов’язковий.
Чи можна змінювати дизайн прямо на сайті?
Так. Редактор відкривається на живій сторінці, і зміни видно одразу. Після збереження сторінка перезавантажується з оновленими даними.
Що буде при перевищенні ліміту блоків?
Редактор покаже повідомлення про ліміт і не створить новий блок. Щоб збільшити ліміт, сплатіть хостинг.
Чи можна відкрити повний редактор розділу?
Так. Для сторінок, статей, блоків/меню, категорій, виробників і колекцій доступний повний редактор із розширеними налаштуваннями.
Чи редагуються кнопки категорій?
Так, але лише текст кнопки. Посилання створюється автоматично. HTML дозволено, теги посилань видаляються.