Банери
Вступ#
Банери — гнучкий рекламний інструмент, який дає змогу показувати зображення з посиланнями в будь-якому місці магазину. Ви створюєте групу банерів з кількома зображеннями, а потім виводите її на сторінках за допомогою модулів Банер, Карусель або Слайдшоу, розміщуючи модуль у потрібній позиції макета.
Розділ відкривається через меню Дизайн → Банери.
Список банерів#
У списку показано всі групи банерів магазину. Звідси можна:
- Додати: створити нову групу банерів
- Редагувати: змінити наявну групу банерів
- Видалити: видалити позначені групи банерів
Давайте банерам описові назви, з яких зрозуміло їхнє призначення та місце розміщення (наприклад, «Головна — слайдер», «Бокова колонка — акції»).
Створення та редагування банера#
Форма банера складається з двох частин: загальних налаштувань групи та списку зображень для кожної мови.
Загальні налаштування#
Назва банера
- Внутрішня назва для адміністраторів
- Обов'язкове поле, від 3 до 64 символів
- Використовуйте зрозумілі, описові назви
Статус
- Вмикає або вимикає всю групу банерів
- Вимкнені банери не показуються на вітрині
- Зручно для сезонних або тимчасових акцій
Іменування: обирайте назви, за якими легко зрозуміти призначення та розташування банера, коли груп банерів стає багато.
Зображення#
Багатомовність
Зображення банера задаються окремо для кожної мови — для цього над таблицею є мовні вкладки. Завдяки цьому можна показувати різні банери залежно від мови, яку вибрав відвідувач.
Налаштування зображень
Для кожної мови можна додати кілька зображень кнопкою Додати банер. Кожен рядок має такі поля:
Заголовок
- Використовується як атрибути
altіtitleзображення - Обов'язкове поле, до 64 символів
- Має бути описовим — це важливо для доступності та SEO
Посилання
- Необов'язкова адреса, на яку веде клік по банеру
- Може бути абсолютною (
https://example.com) або відносною (index.php?route=...) - Використовуйте, щоб вести покупців на акції чи товари
Зображення
- Виберіть наявне зображення або завантажте нове через менеджер зображень
- Підтримувані формати: JPG, PNG, GIF
- Розмір бажано підбирати під область показу
Порядок сортування
- Визначає порядок показу в межах групи
- Менші числа показуються першими
- Зображення з однаковим порядком сортування можуть виводитися в довільному порядку
Керування зображеннями: додайте кілька зображень, щоб банер змінювався (слайди). Використовуйте однакові розміри зображень у межах однієї групи — так вони відображатимуться найкраще.
Перевірка посилань: після збереження завжди перевіряйте посилання банерів, щоб вони працювали та вели покупців куди потрібно.
Набір полів зображення залежить від теми оформлення: деякі теми додають до банера власні поля (підзаголовок, текст, додаткові посилання тощо). Тут описано стандартні поля ocStore.
Показ банерів за допомогою модулів#
Банери виводяться на вітрині модулями. У стандартній поставці ocStore 3 групу банерів використовують три модулі:
- Банер — показує зображення групи по одному з плавною зміною;
- Карусель — стрічка з кількох зображень, що прокручується (наприклад, логотипи виробників);
- Слайдшоу — великий слайдер, зазвичай для головної сторінки.
Щоб налаштувати показ банерів:
Крок 1. Активуйте модуль#
- Перейдіть у Доповнення → Доповнення і виберіть тип доповнення Модулі
- Знайдіть у списку модуль Банер (або Карусель, Слайдшоу)
- Натисніть Активація (зелена кнопка «+»), якщо модуль ще не активовано
Крок 2. Налаштуйте модуль#
Натисніть Редагувати навпроти модуля і заповніть поля:
Налаштування модуля
- Назва модуля: внутрішня назва цього екземпляра модуля (від 3 до 64 символів)
- Банер: група банерів, яку потрібно показувати
- Ширина: ширина зображень у пікселях
- Висота: висота зображень у пікселях
- Статус: вмикає або вимикає цей екземпляр модуля
Можна створити кілька екземплярів одного модуля з різними банерами та розмірами.
Розміри: вказуйте ширину й висоту відповідно до пропорцій ваших зображень — так вони не спотворюватимуться і матимуть найкращу якість. Зображення автоматично масштабуються до заданого розміру.
Примітка: у стандартних модулях ocStore 3 немає налаштувань ефекту переходу, кількості елементів у слайді, стрілок, індикаторів чи інтервалу (як в OpenCart 4) — анімацію та її швидкість задає шаблон модуля в темі оформлення.
Крок 3. Додайте модуль до макета#
- Перейдіть у Дизайн → Макети
- Відредагуйте макет, на сторінках якого мають з'являтися банери
- Додайте модуль у потрібну позицію (Верх сторінки, Низ сторінки, Ліва колонка, Права колонка)
- Задайте порядок модуля в цій позиції
- Збережіть макет
Рекомендації#
Дизайн та оптимізація банерів
Візуальне оформлення
Якість зображень:
- використовуйте зображення з високою роздільністю, які добре виглядають на всіх пристроях
- оптимізуйте розмір файлів для швидкого завантаження (стискайте без втрати якості)
- дотримуйтеся однакових пропорцій у межах групи банерів
Контент:
- мінімум тексту, і той — добре читабельний
- чіткий заклик до дії
- банери мають відповідати поточним маркетинговим кампаніям
- оновлюйте банери за сезоном і до свят
Технічна оптимізація:
- обмежтеся 3–5 зображеннями, що змінюються, — це краще для продуктивності
- розміщуйте важкі банери вище на сторінці лише тоді, коли це справді потрібно
Стратегія: створюйте привабливі банери, які покращують враження відвідувачів, але не сповільнюють завантаження і добре виглядають на мобільних.
Кілька магазинів і кілька мов
Розширені налаштування
Кілька магазинів:
- створюйте окремі групи банерів для різних магазинів
- налаштовуйте окремі екземпляри модулів для кожного магазину
- призначайте модулі до макетів, прив'язаних до потрібного магазину
- кожен магазин може мати зовсім інші акції
Кілька мов:
- увімкніть потрібні мови в Система → Локалізація → Мови
- додайте перекладені заголовки для кожного зображення
- за потреби використовуйте різні зображення для різних мов
- потрібна мовна версія показується автоматично
Глобальна стратегія: поєднуйте можливості кількох магазинів і мов, щоб проводити цільові кампанії для різних ринків і груп покупців.
Продуктивність і SEO
Рекомендації з оптимізації
Продуктивність:
- менші зображення завантажуються швидше
- не додавайте на одну сторінку забагато банерних модулів
- стежте за часом завантаження банерів і оптимізуйте їх за потреби
SEO та доступність:
- пишіть описові заголовки — вони стають текстом
alt - стежте, щоб посилання банерів були доступні для пошукових роботів
- зберігайте правильну структуру заголовків навколо банерів
- перевіряйте роботу банерів з екранними читачами
Вплив на продуктивність: надмірна кількість банерів з великими зображеннями погіршує швидкість завантаження сторінок і враження відвідувачів.
Типові завдання#
Створення нової групи банерів#
- Перейдіть у Дизайн → Банери
- Натисніть Додати
- Заповніть Назву банера і встановіть Статус
- Додайте зображення для кожної мови
- Заповніть заголовки, посилання та порядок сортування
- Натисніть Зберегти
Зберігайте роботу частіше, щоб не втратити зміни, особливо коли додаєте багато зображень.
Показ банерів на вітрині#
- Переконайтеся, що модуль Банер (або Карусель, Слайдшоу) активовано й увімкнено
- Створіть нову або виберіть наявну групу банерів
- Налаштуйте модуль (група банерів, розміри)
- Додайте модуль до потрібних макетів
- Перевірте показ банерів на вітрині
Щоб показувати різні банери на різних сторінках (головна, категорії, сторінки товарів), додавайте різні екземпляри модуля до відповідних макетів.
Керування кількома групами банерів#
- Організація: використовуйте описові назви, з яких зрозуміло призначення й розташування банера
- Масові дії: позначте кілька банерів, щоб видалити їх разом (обережно!)
- Статус: вмикайте й вимикайте банери за сезоном або для A/B-тестування
- Ефективність: відстежуйте кліки по банерах (наприклад, через UTM-мітки в посиланнях і веб-аналітику) і коригуйте їх
Видалення групи банерів безповоротно видаляє всі її зображення та налаштування. Якщо банер ще може знадобитися, краще вимкніть його.
Застереження та обмеження#
- Розміри зображень: невідповідність ширини й висоти пропорціям зображення спотворює банери
- Перевірка посилань: завжди перевіряйте посилання після змін у налаштуваннях
- Продуктивність: забагато банерів або великі зображення сповільнюють завантаження сторінок
- Адаптивність: перевіряйте, як банери виглядають на мобільних пристроях
Усунення несправностей#
Банери не показуються
Проблема: банери не з'являються на вітрині
Діагностика:
- Статус групи банерів
- перевірте, що статус групи банерів — «Включено»
- перевірте, чи групу банерів не видалено випадково
- переконайтеся, що група є в списку банерів
- Налаштування модуля
- перевірте, що модуль активовано та ввімкнено
- перевірте, що статус екземпляра модуля — «Включено»
- переконайтеся, що в модулі вибрано правильну групу банерів
- Призначення до макета
- перевірте, що модуль додано до макета
- перевірте, що роути макета відповідають поточній сторінці
- перевірте позицію та порядок модуля
Швидкі рішення:
- збережіть групу банерів ще раз із правильним статусом
- переналаштуйте модуль
- знову додайте модуль до макетів
- очистьте кеш (кеш теми на панелі стану адмінки) і кеш браузера
Швидка перевірка: відкрийте Дизайн → Банери і переконайтеся, що група банерів існує, увімкнена й містить зображення для поточної мови.
Проблеми з показом зображень
Проблема: зображення банера не завантажуються або спотворені
Діагностика:
- Файли зображень
- перевірте, що зображення завантажено правильно
- перевірте, що формат підтримується (JPG, PNG, GIF)
- переконайтеся, що файли не пошкоджені
- Розміри
- перевірте, що ширина й висота в модулі відповідають пропорціям зображення
- перевірте, що розміри доречні для позиції в макеті
- спробуйте інші значення розмірів
- Права доступу на сервері
- перевірте права на теку
image/(зокремаimage/cache/) - перевірте шляхи до зображень
- відкрийте зображення напряму за URL
- перевірте права на теку
Швидкі рішення:
- завантажте зображення повторно
- підберіть ширину й висоту під пропорції зображення
- перевірте права доступу до файлів на сервері
- спробуйте інші файли зображень
Перевірка показу: завжди перевіряйте банери на різних пристроях і в різних браузерах.
Зміна слайдів не працює
Проблема: зображення банера не змінюються або анімація працює неправильно
Діагностика:
- Налаштування
- перевірте, що в групі є більше одного зображення для поточної мови
- перевірте, що використовується потрібний модуль (Банер, Карусель чи Слайдшоу)
- Конфлікти JavaScript
- перевірте в різних браузерах
- вимкніть інші доповнення та модифікатори, щоб виявити конфлікт
- перегляньте помилки JavaScript у консолі браузера
- Тема оформлення
- перевірте, що тема підключає потрібну бібліотеку слайдера
- порівняйте роботу зі стандартною темою
Швидкі рішення:
- перевірте зображення та налаштування модуля
- перевірте в різних браузерах
- вимкніть конфліктні доповнення
- оновіть браузер до останньої версії
Посилання не працюють
Проблема: клік по банеру не веде на потрібну адресу
Діагностика:
- Формат URL
- перевірте, що адреси вказано правильно
- для зовнішніх посилань перевірте наявність
http://абоhttps:// - перевірте, чи відкривається адреса
- Конфлікти JavaScript
- перегляньте помилки JavaScript у консолі браузера
- перевірте в різних браузерах
- вимкніть конфліктні скрипти
- Налаштування
- перевірте, що посилання збережено в налаштуваннях банера
- перевірте посилання для кожної мови окремо
Швидкі рішення:
- введіть адреси заново в правильному форматі
- перевірте посилання в різних браузерах
- перевірте конфлікти JavaScript
- для внутрішніх сторінок використовуйте відносні шляхи
Перевірка посилань: завжди перевіряйте посилання банерів після змін.
«Ефективні банери поєднують переконливі зображення з чітким закликом до дії. Не шкодуйте часу на банери, які не лише гарно виглядають, а й залучають покупців і збільшують продажі».