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

Структура сайта: обёртка, сетка и блоки

Главная идея 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. Иконки избранного и корзины будут рабочими, как в живом примере выше.