Модуль Header позволяет настроить верхнюю часть вашей шторки Upcart с логотипом вашего бренда, текстом заголовка, макетом, цветом фона и кнопкой закрытия. Визуальные элементы управления упрощают стилизацию заголовка без необходимости задавать точные размеры в пикселях.
Height переключается между Slim и Tall для управления вертикальным пространством. Bottom border — либо None, либо Thin. Background color принимает шестнадцатеричный код или встроенную палитру цветов и поддерживает прозрачность.
Есть три способа задать заголовок шапки корзины-шторки: унаследовать стандартную стилизацию заголовков вашей темы, отобразить логотип вашего магазина или создать полностью пользовательские стили текста. Каждый метод предлагает гибкость в зависимости от ваших дизайнерских потребностей.
Этот вариант использует стандартные стили заголовков вашей темы, помогая сохранить визуальную согласованность дизайна с остальной частью вашего сайта. Вы можете добавить собственный заголовок с помощью поля Text и динамически включить количество товаров в корзине с помощью {{cart_quantity}}. Выравнивание текста можно установить на Side или Center, а также выбрать подходящий уровень заголовка H2, H3 или H4 в зависимости от структуры контента вашего магазина.
Если вы предпочитаете использовать логотип бренда вместо текста, вы можете загрузить логотип вашего магазина прямо в этом разделе. Выберите выравнивание логотипа по Side или Center и масштабируйте его с помощью ползунка Logo size, который работает в диапазоне от 14 px до 48 px. Жёсткого ограничения на загружаемый файл нет, но рекомендуется использовать файл PNG для чистой прозрачности и чётких краёв. JPEG также поддерживаются, но могут содержать фоновый шум или ухудшать детализацию логотипа. Для производительности старайтесь оптимизировать размеры файлов.
Мы рекомендуем использовать файл PNG для наилучшего качества и поддержки прозрачного фона.
JPEG тоже работают, но могут выглядеть не так чисто, особенно если у вашего логотипа есть фон или мелкие детали.
Выбор варианта Text даёт вам полный контроль над стилизацией заголовка независимо от темы вашего магазина. Вы можете ввести любой пользовательский заголовок и включить {{cart_quantity}} для динамических обновлений. Выравнивание текста можно установить на Side или Center, с возможностью изменить насыщенность шрифта на Normal, Semibold или Bold. Размер шрифта регулируется от 14px до 48px с помощью визуального ползунка, и при желании можно применить переопределение цвета текста.
Кнопку закрытия можно настроить в соответствии с дизайном вашего магазина. Location размещает её слева или справа от шторки. Background, Icon и Border — для каждого задаётся цвет плюс отдельный цвет при наведении. Icon size — Small, Medium или Large, а Icon thickness — Normal или Thick. Border — None, Thin, Normal или Thick.
Поля цвета рамки и цвета рамки при наведении отключены, пока Border установлен на None. Сначала выберите толщину рамки, затем задайте её цвета.
В версии 2.0 модуля Header под настройками появляется редактор кода Custom template с единственным шаблоном Full, охватывающим весь модуль. Он использует JSX на основе React, и вы должны сначала установить флажок Access custom templates в разделе Settings > Cart settings > Advanced Settings в Cart Editor. См. Настройка пользовательского шаблона.
Нужны точные отступы или размеры? Используйте пользовательский CSS для полного контроля за пределами ползунков — отлично подходит для точных внешних и внутренних отступов или масштабирования логотипа.
Тестируйте на десктопе и мобильных устройствах. Элементы заголовка, такие как текст, логотип и кнопки, могут отображаться по-разному на разных размерах экрана
Используйте правильные уровни заголовков. Выбор правильного заголовка (H2, H3, H4) помогает с доступностью и SEO. Соответствуйте структуре контента вашего магазина.
