Skip to main content

​
Обзор

Модуль Header позволяет настроить верхнюю часть вашей шторки Upcart с логотипом вашего бренда, текстом заголовка, макетом, цветом фона и кнопкой закрытия. Визуальные элементы управления упрощают стилизацию заголовка без необходимости задавать точные размеры в пикселях.

​
Настройки модуля заголовка

​
General

Height переключается между Slim и Tall для управления вертикальным пространством. Bottom border — либо None, либо Thin. Background color принимает шестнадцатеричный код или встроенную палитру цветов и поддерживает прозрачность. Настройки General модуля Header в Upcart с элементами управления высотой и цветом фона рядом с предпросмотром корзины

​
Заголовок

Есть три способа задать заголовок шапки корзины-шторки: унаследовать стандартную стилизацию заголовков вашей темы, отобразить логотип вашего магазина или создать полностью пользовательские стили текста. Каждый метод предлагает гибкость в зависимости от ваших дизайнерских потребностей. Варианты заголовка модуля Header в Upcart: наследование заголовков темы, логотип бренда или пользовательские стили текста

​
Наследование заголовков темы

Этот вариант использует стандартные стили заголовков вашей темы, помогая сохранить визуальную согласованность дизайна с остальной частью вашего сайта. Вы можете добавить собственный заголовок с помощью поля 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. Сначала выберите толщину рамки, затем задайте её цвета.
Настройки кнопки закрытия модуля Header в Upcart для расположения, цветов, размера значка и рамки

​
Пользовательский шаблон

В версии 2.0 модуля Header под настройками появляется редактор кода Custom template с единственным шаблоном Full, охватывающим весь модуль. Он использует JSX на основе React, и вы должны сначала установить флажок Access custom templates в разделе Settings > Cart settings > Advanced Settings в Cart Editor. См. Настройка пользовательского шаблона.

​
Советы

  • Нужны точные отступы или размеры? Используйте пользовательский CSS для полного контроля за пределами ползунков — отлично подходит для точных внешних и внутренних отступов или масштабирования логотипа.
  • Тестируйте на десктопе и мобильных устройствах. Элементы заголовка, такие как текст, логотип и кнопки, могут отображаться по-разному на разных размерах экрана
  • Используйте правильные уровни заголовков. Выбор правильного заголовка (H2, H3, H4) помогает с доступностью и SEO. Соответствуйте структуре контента вашего магазина.
Дополнительные способы персонализации корзины см. в нашей справочной документации Upcart. Если вам нужны нестандартные изменения, мы рекомендуем обратиться к эксперту Shopify.