> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Модуль заголовка

> Узнайте, как обновить заголовок вашей шторки Upcart, включая логотип, стили заголовка, кнопку закрытия и макет.

<div id="overview">
  # Обзор
</div>

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

<div id="header-module-settings">
  # **Настройки модуля заголовка**
</div>

<div id="general">
  ## **General**
</div>

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

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Настройки General модуля Header в Upcart с элементами управления высотой и цветом фона рядом с предпросмотром корзины" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Заголовок**
</div>

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

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Варианты заголовка модуля Header в Upcart: наследование заголовков темы, логотип бренда или пользовательские стили текста" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Наследование заголовков темы
</div>

Этот вариант использует стандартные стили заголовков вашей темы, помогая сохранить визуальную согласованность дизайна с остальной частью вашего сайта. Вы можете добавить собственный заголовок с помощью поля Text и динамически включить количество товаров в корзине с помощью `{{cart_quantity}}`. Выравнивание текста можно установить на Side или Center, а также выбрать подходящий уровень заголовка H2, H3 или H4 в зависимости от структуры контента вашего магазина.

<div id="brand-logo">
  ## Логотип бренда
</div>

Если вы предпочитаете использовать логотип бренда вместо текста, вы можете загрузить логотип вашего магазина прямо в этом разделе. Выберите выравнивание логотипа по Side или Center и масштабируйте его с помощью ползунка **Logo size**, который работает в диапазоне от 14 px до 48 px. Жёсткого ограничения на загружаемый файл нет, но рекомендуется использовать файл PNG для чистой прозрачности и чётких краёв. JPEG также поддерживаются, но могут содержать фоновый шум или ухудшать детализацию логотипа. Для производительности старайтесь оптимизировать размеры файлов.

* Мы рекомендуем использовать файл **PNG** для наилучшего качества и поддержки прозрачного фона.
* JPEG тоже работают, но могут выглядеть не так чисто, особенно если у вашего логотипа есть фон или мелкие детали.

<div id="define-text-styles">
  ## Определение стилей текста
</div>

Выбор варианта Text даёт вам полный контроль над стилизацией заголовка независимо от темы вашего магазина. Вы можете ввести любой пользовательский заголовок и включить `{{cart_quantity}}` для динамических обновлений. Выравнивание текста можно установить на Side или Center, с возможностью изменить насыщенность шрифта на Normal, Semibold или Bold. Размер шрифта регулируется от 14px до 48px с помощью визуального ползунка, и при желании можно применить переопределение цвета текста.

<div id="close-button">
  # Кнопка закрытия
</div>

Кнопку закрытия можно настроить в соответствии с дизайном вашего магазина. **Location** размещает её слева или справа от шторки. **Background**, **Icon** и **Border** — для каждого задаётся цвет плюс отдельный цвет при наведении. **Icon size** — Small, Medium или Large, а **Icon thickness** — Normal или Thick. **Border** — None, Thin, Normal или Thick.

<Note>
  Поля цвета рамки и цвета рамки при наведении отключены, пока **Border** установлен на **None**. Сначала выберите толщину рамки, затем задайте её цвета.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Настройки кнопки закрытия модуля Header в Upcart для расположения, цветов, размера значка и рамки" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # Пользовательский шаблон
</div>

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

<div id="tips">
  # Советы
</div>

* **Нужны точные отступы или размеры?** Используйте [пользовательский CSS](/ru/upcart/custom_css) для полного контроля за пределами ползунков — отлично подходит для точных внешних и внутренних отступов или масштабирования логотипа.
* **Тестируйте на десктопе и мобильных устройствах.** Элементы заголовка, такие как текст, логотип и кнопки, могут отображаться по-разному на разных размерах экрана
* **Используйте правильные уровни заголовков.** Выбор правильного заголовка (H2, H3, H4) помогает с доступностью и SEO. Соответствуйте структуре контента вашего магазина.

Дополнительные способы персонализации корзины см. в нашей [справочной документации Upcart](/ru). Если вам нужны нестандартные изменения, мы рекомендуем обратиться к [эксперту Shopify](https://www.shopify.com/ca/partners/directory).