> ## 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.

# Настройки брендинга чекаута

> Эта статья знакомит вас с настройками Checkout Branding и объясняет, как использовать каждый раздел для кастомизации чекаута.

Настройки брендинга позволяют кастомизировать внешний вид вашего чекаута — от цветов и типографики до кнопок, полей форм и макета страницы. Эти инструменты помогают легко привести дизайн чекаута в соответствие с фирменным стилем вашего бренда.

<div id="how-to-access-it">
  # Как получить доступ
</div>

Откройте дашборд **Checkout** в Aftersell и нажмите **Edit branding** в верхней части страницы.

<Note>
  Для редактирования брендинга здесь требуется тарифный план **Shopify Plus**. Shopify разрешает приложениям читать и изменять брендинг чекаута только на Plus, поэтому на других тарифах эти настройки нельзя сохранить. Если ваш магазин не на Plus, внесите те же изменения в редакторе чекаута Shopify: **Settings → Checkout → Customize** в админ-панели Shopify.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="Дашборд Checkout в Aftersell со стрелкой, указывающей на кнопку Edit branding" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

Редактор организован в три группы: **Design system**, **Customizations** и **Advanced**.

***

<div id="design-system">
  # Design system (дизайн-система)
</div>

Настройки дизайн-системы — это основа. Компоненты по всему чекауту наследуют их, если более специфичная настройка не переопределяет их.

<div id="global-colors">
  ## Глобальные цвета
</div>

Ваши фирменные и системные цвета, используемые в магазине и на этапе после покупки. Компоненты используют эти цвета, когда цветовая схема не задана.

**Фирменные цвета**

* **Brand** — основной цвет вашего бренда.
* **Accent** — используется для интерактивных и выделенных элементов.
* **Decorative** — используется для вспомогательных декоративных элементов.

**Цвета статусов и системные цвета**

* **Success** — состояния подтверждения.
* **Warning** — предупреждающие сообщения.
* **Critical** — ошибки и оповещения.
* **Info** — информационные сообщения.

<Note>
  Цвета поверхностей и кнопок здесь не задаются. Они находятся в разделе **Advanced > Color schemes**.
</Note>

<div id="typography">
  ## Типографика
</div>

* **Font size** — задайте **Base size** (базовый размер) и **Scale ratio** (коэффициент масштабирования), из которого выводится остальная типографическая шкала.
* **Primary font** — используется для большинства компонентов, таких как обычный текст, кнопки и элементы форм. Выберите **Font family**, **Base weight** и **Bold weight**.
* **Secondary font** — используется для компонентов заголовков, с теми же тремя параметрами.

<div id="corner-radius">
  ## Радиус скругления углов
</div>

Задаёт общие значения радиуса скругления, на которые ссылаются кнопки, поля форм, контейнеры и другие компоненты. Вы определяете три размера: **Small**, **Medium** и **Large**.

***

<div id="customizations">
  # Customizations (кастомизации)
</div>

<div id="buttons">
  ## Кнопки
</div>

Настраиваются отдельно для **Primary buttons** (основное действие на странице) и **Secondary buttons** (вспомогательные действия). Для каждого типа доступны:

* **Corner radius** — Small, Medium, Large или None (прямые углы).
* **Background** — Solid или None.
* **Vertical padding** и **Horizontal padding**.
* **Show border**.

<Note>
  Цвета кнопок наследуются из цветовых схем. Если значение схемы не задано, используются глобальные цвета.
</Note>

<div id="form-fields">
  ## Поля форм
</div>

Применяется ко всем поддерживаемым типам полей:

* **Corner radius**
* **Label position** — Inside или Outside.
* **Show border**

**Переопределения для отдельных полей** позволяют отступить от общих стилей для конкретных типов полей: **Text field borders**, **Dropdown borders**, **Choice list group spacing** и **Checkbox corner radius**.

<div id="product-thumbnails">
  ## Миниатюры товаров
</div>

Управляет отображением изображений товаров на странице:

* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** — Accent (акцентный цвет схемы) или Base (базовый цвет схемы).

<div id="header">
  ## Шапка
</div>

* **Layout** — **Placement** (Top bar, Left section или Right section) и **Alignment** (Left, Center или Right).
* **Container** — **Padding**, **Color scheme** и **Show divider**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="Страница чекаута с выделенной шапкой с названием магазина в левом верхнем углу" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## Область контента
</div>

Управляет **разделителем** между основной областью и сводкой заказа: **Show divider**, **Border style** и **Border weight**.

<div id="main-area">
  ## Основная область
</div>

* **Section containers** — фон и рамка вокруг каждого раздела: **Background**, **Show border**, **Border style**, **Border weight**.
* **Section dividers** — линии, отображаемые между разделами.

<div id="order-summary">
  ## Сводка заказа
</div>

* **Container** — **цветовая схема**, применяемая к общему контейнеру сводки заказа.
* **Section dividers** — **Show divider**, **Border style**, **Border weight**.
* **Section containers** — фон и рамка вокруг каждого раздела: **Show border**, **Background**, **Border style**, **Border weight**, **Color scheme**, **Corner radius**, **Padding** и **Shadow**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="Миниатюра товара в сводке заказа с выделенной рамкой изображения" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## Подвал
</div>

* **Layout** — **Placement** и **Alignment**.
* **Container** — **Show footer content**, **Padding**, **Color scheme** и **Show divider**.

***

<div id="advanced">
  # Advanced (расширенные)
</div>

<div id="color-schemes">
  ## Цветовые схемы
</div>

Цветовые схемы — это переиспользуемые наборы цветов поверхностей, текста и кнопок, на которые ссылаются другие разделы. Доступны две схемы:

* **Scheme 1 - Main area**
* **Scheme 2 - Supporting areas**

Каждая схема разделена на три группы:

* **Buttons** — используются для главной кнопки оплаты и вспомогательных действий. **Primary button** и **Secondary button** настраиваются отдельно, каждая со своим состоянием по умолчанию и состоянием при наведении.
* **Form controls** — используются для текстовых полей, выпадающих списков и списков выбора.
* **Base surfaces** — фон поверхности, основной текст и вспомогательные роли: рамка, акцент (ссылки и фокус), декоративные элементы (лёгкие акценты) и цвет иконок.

Везде, где раздел предлагает параметр **Color scheme**, вы можете указать **Scheme 1**, **Scheme 2** или **Transparent**.