Повна кастомізація дизайну сайту та інтернет-магазину: унікальний дизайн своїми руками

Структура сайту: обгортка, сітка й блоки

Головна ідея BooStore — сайт це готова структура, а не жорсткий шаблон. Структура складається з кількох основних блоків-обгорток, а всередину вже вставляються всі інші блоки та функції. Розуміння цієї схеми — перший крок до повної кастомізації.

Колонки побудовані на CSS Grid і керуються атрибутом data-hasside. Жодних таблиць — лише блочна верстка:

Усередині #hotengine-content контент виводиться в блоці, що залежить від типу сторінки. У кожного типу — свій ID, і на нього зручно навішувати окремі стилі:

• Сторінки — #hotengine-content-page
• Каталог статей — #hotengine-content-blog
• Каталог товарів — #hotengine-content-shop
• Каталог виробників/колекцій — #hotengine-content-shop

На сторінках категорій із дочірнім списком додається клас: .hotengine-content-shop-category, .hotengine-content-shop-collection, .hotengine-content-shop-producer, .hotengine-content-blog-category. Це та сама службова обгортка, яка дозволяє стилізувати окремий розділ, категорію або тип сторінки незалежно від інших.

🧱 Шапка сайту: блок/меню с HTML-кодом

Найнаочніший приклад того, як усе влаштовано — шапка сайту. Технічно це звичайний Блок/Меню з розташуванням Header (у шапці), усередині якого лежить HTML-код. Жодної магії: відкриваєте блок, бачите код шапки, редагуєте його як звичайний HTML, а зовнішній вигляд задаєте через CSS.

Шапка шаблону Universal MobiFive Flex розбита на три секції (header_section1, header_section2, header_section3), і всередині кожної — своя розмітка. Ось код шапки (приклад із демо-шаблону):

Що тут що

Розберемо за секціями. Кожна секція — це рядок шапки, а всередині неї блок h_inside ділиться на три частини: h_inside_l (ліворуч), h_inside_c (центр), h_inside_r (праворуч). Саме це ділення й дає адаптивність.

Зверніть увагу: кошик, порівняння, обране, мова й головне меню — це не «намальовані» кнопки, а шорткоди ({HOTENGINE-SC:...}). Система сама підставляє в них готовий функціонал. Тому вам не потрібно програмувати кошик — достатньо поставити шорткод у потрібне місце розмітки.

Шапка: 3 ряди по 3 адаптивні блоки

Схематично шапка виглядає так. Кожен ряд — це секція, кожен прямокутник — блок h_inside_l/c/r. На вузьких екранах блоки всередині ряду переносяться один під одного (flex-wrap), тому шапка залишається зручною на мобільних:

Як змінити дизайн шапки

Є два шляхи — обидва без правки ядра платформи:

1. Через CSS (швидко). Відкрийте сайт, натисніть F12 і інспектором знайдіть потрібний елемент — наприклад .header_section2 або .h_inside_r. Скопіюйте клас у Редактор дизайну → вкладку «CSS стилі» і задайте свої властивості: фон, відступи, розміри, порядок блоків.
2. Через редагування HTML (гнучко). Відкрийте Блок/Меню шапки й змініть сам код: поміняйте місцями h_inside_l і h_inside_r, приберіть зайву секцію, додайте свою розмітку або іконку. Усі класи збережені — верстка не зламається.

📦 Шаблон як основа та його демо

Найшвидший шлях до унікального дизайну — почати з готового шаблону й доопрацювати його. Візьмемо для прикладу універсальний шаблон Universal MobiFive Flex (templates_universal_mobifive_flex). Він рекомендується як основа саме тому, що показує всі основні типи побудови шапки й легко адаптується під будь-який стиль.

Під час встановлення шаблон автоматично:

1. Створює CSS-стиль, який підключає файл оформлення через @import:

2. Створює блоки меню: шапку (header), підвал (footer), слайдер головної, сортування товарів.
3. Вмикає потрібні функції: обране, порівняння, пошук з автодоповненням, кошик у шапці.

🎨 Редактор дизайну та базові стилі

Усе візуальне налаштування зібрано в Редакторі дизайну. Він складається з вкладок — від кольорів і шапки до чистого CSS:

Які базові стилі завантажуються і як їх замінити

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

1. css_hotengine_require_system.css — основний базовий стиль платформи: сторінки, товари, блоки й меню. Саме на нього «вішаються» усі ваші стилі та стиль шаблону.
2. css_hotengine_require_language_XX.css — стилі текстових значень для кожної мови (ru, ua, en, pl тощо).
3. css_hotengine_cart_table_mobile.css — таблиця кошика для мобільних.
4. templates/styles/css_hotengine_reset_base_style.css — скидання основного оформлення вікон і блоків меню (вмикається у вкладці «Контент»).
5. Стилі карток товарів — templates_base_styles/products/products_list1…4.css. Інший готовий стиль оформлення карток товарів для списку обирається в «Каталозі стилів», а можна оформити картку повністю по-своєму (про це нижче).
6. Стилі форм — templates_base_styles/forms/form1…25.css (25 варіантів).
7. Стиль шаблону — те, що додається під час встановлення шаблону (через @import файлу style.css).

Усе це збирається в один кешований CSS-файл. Ви можете змінити будь-який із цих стилів двома способами:

Налаштування картки товару та списку

Крім вибору готового стилю, картку товару можна налаштувати через Налаштування магазину (Адмін-панель → Налаштування → Магазин, сторінка set_p_store). Там задається положення основних блоків і поведінка картки — це вже повноцінна унікальна кастомізація без коду:

📁 Мої файли: свій логотип, фон і будь-які елементи стилю

Повна кастомізація — це не лише код, а й свої файли. Для цього в адмін-панелі є розділ «Мої файли» (Адмін-панель → Мої файли): тут можна додавати, переглядати й видаляти файли, а також створювати папки. Завантажуйте власні зображення (логотип, фон, іконки, картинки блоків) і підключайте їх у CSS або HTML. Відкривається тут: Мої файли.

Що можна завантажити й підставити

• Свій логотип та іконку сайту (favicon) — замість стандартних.
• Свій фон шапки, футера або всієї сторінки.
• Зображення для блоків, банерів і слайдера.
• Свої іконки (зокрема SVG) для меню та кнопок.
• Свої CSS- і JS-файли (підключаються через «Блоки/Меню»).

Обробка зображень під час завантаження

Файли зберігаються в upload/catalog/{ID_сайту}/files/. Після завантаження скопіюйте шлях (клік по файлу) і використайте його в CSS або в атрибуті src:

🗂️ Блоки/Меню: позиції, меню, свої скрипти

«Блоки/Меню» — головний інструмент кастомізації (шапка й підвал — теж такі блоки). Тут створюються будь-які області контенту й навігації. Для кожного блоку доступні:

Головне меню

Головне меню можна зібрати двома шляхами:

• Через віджет головного меню — найшвидший спосіб. Ви додаєте пункти, підпункти, пункти-категорії каталогу та пункти-виробники, задаєте іконки (PNG, JPG, WEBP, SVG), порядок (drag&drop), прив'язку до мови. Меню експортується та імпортується в JSON.
• Своє меню вручну — якщо потрібна особлива логіка або верстка, блок збирається як звичайний HTML-блок.

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

Свої скрипти з оптимізованим завантаженням

Якщо увімкнути в блоку режим «JavaScript / CSS style», рушій збереже ваш код в окремий файл і підключить його з правильним режимом завантаження:

Так ви додаєте будь-які свої скрипти, не сповільнюючи завантаження. Для CSS-стилю блок зберігається в .css-файл і підключається як стиль. Це і є «свої блоки меню зі скриптами» — повний контроль без правки ядра платформи.

🖼️ Оформлення сторінок и сетка товаров по ID

Блоки/Меню задають загальний каркас, але BooStore дозволяє піти далі й оформити кожну сторінку окремо. Секрет у тому, що кореневий блок #hotengine-wrapper отримує динамічні класи з ID поточної сторінки або категорії. Отже, ви можете написати CSS, який застосується лише до однієї сторінки, лише до однієї категорії або одразу до всіх сторінок певного типу.

Приклади: оформити одну конкретну сторінку за її ID, задати свій фон конкретній категорії магазину або змінити вигляд одразу в усіх товарів.

Сітка товарів: як рендериться список

Список товарів має свою вкладену структуру. Розуміючи її, легко змінювати кількість карток у ряд, відступи та вигляд плитки. Спрощено це виглядає так:

Картки — це блоки .hotengine-shop-product-list-block (за замовчуванням inline-block), а контейнер .hotengine-shop-products-list-content вибудовує їх у ряд. Змінюючи ширину картки та перенесення, ви задаєте сітку під свій дизайн:

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

🧰 Віджети та шорткоди

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

Шорткоди — автозаміна даних

Шорткод — це короткий код, який система замінює на реальні дані сторінки. Їх можна вставляти в будь-який HTML-блок (як у шапці), на сторінку, у лист. Основні:

Крім того, працюють bbcode: [FORM:12] вставляє форму за ID, а [MENU:...] — згенероване меню або добірку.

Віджет із товарами: будь-яка добірка в будь-якому місці

Окремо варто віджет товарів. Генератор збирає код виду [MENU:shop_products_slider:...], який виводить добірку товарів: слайдер, сітку, мозаїку, прокрутку з автозавантаженням. Доступні десятки параметрів:

• Що показати: категорія та підкатегорії, виробник, колекція, тип товару, наявність, хіти продажів, знижки, акції, новинки, «ціну знижено», нещодавно переглянуті, обране, пошук, конкретні ID, діапазон ціни, мова виведення.
• Сортування: за ID, датою, ціною, назвою, пріоритетом; за зростанням/спаданням; випадково.
• Відображення: кнопка «в кошик», порівняння, опис, рейтинг зірками, іконка обраного, різновиди (розмір/колір), lazy-завантаження.
• Режими прокрутки: :scroll (автопідвантаження), :carousel (карусель), :swipe (гортання), :append («Показати ще»), :mosaic-sides (мозаїка), :auto_width.

Приклади всіх варіантів із живими демо — на сторінці «Віджет із товарами».

HTML-віджети: готові інтерактивні блоки

У розділі HTML-віджетів є готові блоки з кодом, які достатньо скопіювати в блок або на сторінку:

📱 Мобільне меню «як застосунок»

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

Що можна налаштувати:

• Активація: поріг ширини екрана, за якого меню вмикається; показувати завжди; замінити головну кнопку або вивести окремою панеллю.
• Верхній блок іконок: пошук, мова, обране, порівняння, кошик, телефон, контакти, e-mail, зворотний дзвінок, до 5 своїх іконок. Для кожної — своя форма й розмір спливаючого вікна.
• Кольори: фон меню та активного пункту, колір посилань та іконок, кнопка та її hover, межі, фон фільтру, маска затемнення, авторизація — десятки колірних параметрів.
• Пункти меню: свої посилання та підпункти, а також спеціальні: close (закрити), порожнє значення (розділювач), #filter (вікно фільтру), #form-XX (форма за ID), #ajax_page (підвантаження HTML-контенту).
• Пошуковий фільтр прямо в меню: обираєте блок фільтру — і він відкривається за кліком.
• Приховування елементів шаблону: логотип, шапка, кошик, порівняння, верхній рядок — щоб інтерфейс був чистим.

🤖 Свій унікальний стиль через ШІ и инспектор

Навіть якщо ви не пишете CSS вручну, унікальний дизайн можна отримати за допомогою ШІ. Схема проста й працює на практиці:

🧩 Бібліотека готових блоків для вставки на сторінку

Якщо не хочеться верстати з нуля, є бібліотека готових блоків — templates_visual_blocks.html. Це десятки адаптивних секцій, які можна вставити прямо на сторінку або в Блок/Меню й одразу використовувати.

У кожного блоку є кнопки «Показати приклад», «Показати код» та «Відкрити в новому вікні» — можна скопіювати код повністю. Блоки адаптивні, а колір керується CSS-змінними: достатньо змінити одну змінну, щоб перефарбувати блок під свій бренд. Ось готовий блок «Переваги» (4 картки з іконками) у темній темі — саме так, як ви вставляєте його на сторінку:

А ось так цей самий блок виглядає на сторінці — це реальний HTML, вставлений прямо в статтю:

Швидка доставка Доставляємо по всій країні за 1-3 дні кур'єрською службою

Офіційна гарантія Усі товари сертифіковані та мають офіційну гарантію

Знижки та акції Постійні акції, сезонні розпродажі та персональні промокоди

Легке повернення Повернення товару протягом 30 днів без зайвих питань

Цей код вставляється прямо на сторінку (в HTML-редактор) або в Блок/Меню. Зовнішній вигляд задає підключений через @import файл style.css, а кольори — змінні --ve-8-accent і --ve-8-accent-soft: змінили значення — блок перефарбувався під ваш бренд. Клас hotengine-ve-darkmode перемикає блок у темну тему. Іконки — звичайні SVG із набору платформи, їх можна замінити на свої.

Порядок роботи: обрали блок → «Показати код» → скопіювали → вставили на потрібну сторінку або в Блок/Меню → змінили кольори, текст та іконки. Готові блоки + іконки — це найшвидший спосіб зібрати гарний унікальний дизайн, навіть не будучи дизайнером.

🧰 Службові блоки меню: фільтр, товари, форми

Крім блоків, які ви створюєте самі, на платформі є службові (функціональні) блоки — готові модулі, які теж вставляються як Блок/Меню або шорткодом і при цьому повністю піддаються стилізації. Ось основні:

Приклад: пошуковий фільтр + товари

Класична зв'язка для категорії — ліворуч пошуковий фільтр, у центрі список товарів. Обидва елементи — службові блоки, і обидва стилізуються через CSS. Найкраще створювати фільтр через функціональні блоки меню (Блоки/Меню → Функціональне меню → Пошуковий фільтр): тоді він автоматично прив'язується до потрібної категорії та типу товару, а показ налаштовується за сторінками. Але за потреби фільтр можна вставити і на будь-яку сторінку — шорткодом або окремим блоком; це вже для суперіндивідуальних рішень, коли фільтр потрібен, наприклад, на головній або на лендінгу.

А добірка товарів виводиться віджетом (генератор списку товарів):

Список товарів підвантажується через AJAX (/ajax_get_list_shop.php), тому фільтр і добірки працюють швидко й без перезавантаження сторінки. Усе це — звичайні блоки, які можна розмістити в будь-якій позиції та перефарбувати під свій стиль.

⚡ Швидкість: кастомізація без втрати PageSpeed

Кастомізація не повинна означати повільний сайт. BooStore спроєктований так, щоб максимально вижати показники швидкості навіть при повністю унікальному дизайні:

Детально про мобільну версію, адаптивність і оптимізацію — у статті «Адаптивна верстка та мобільне меню для інтернет-магазину». Там же показано, як динамічне завантаження скриптів і правильна робота із зображеннями дають PageSpeed 99–100.

⚠️ Часті помилки під час кастомізації

Корисні посилання

• Каталог шаблонів і як підключити шаблон
• Бібліотека готових блоків і стилів
• Основний базовий CSS платформи (css_hotengine_require_system.css)
• База знань: основні блоки сайту та редактор дизайну
• Довідник ShortCode
• Інструкція: Блоки/Меню
• Інструкція: створення мобільного меню
• Віджет із товарами: примеры и код

🛠️ Реальний приклад: своя стильна адаптивна шапка

Щоб було зрозуміло, наскільки це просто, зберімо реальну шапку з нуля: три рівні (верхній рядок, основний рядок із пошуком та іконками, меню), сучасний вигляд і повна адаптивність. Нижче — вона ж наживо, потім CSS, який це робить, і HTML-код для вставки в Блок/Меню. У прикладі використовуються лише два шорткоди — обране й кошик, щоб іконки працювали по-справжньому.

Як це виглядає наживо

CSS, який це робить

Увесь стиль — це чистий CSS. Він задає кольори, відступи, заокруглення, пошук та адаптивність. Скопіюйте його в Редактор дизайну → CSS стилі:

HTML шапки — код для вставки

Цей код вставте в Блок/Меню з розташуванням Header. Іконки обраного й кошика будуть робочими, як у живому прикладі вище.