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

# Настройки дизайна

> Глобальные и поблочные настройки дизайна Aftersell Cart: цвета, кнопки, макет и как накладываются переопределения блоков.

Дизайн Aftersell Cart работает на двух уровнях: **глобальные** настройки, оформляющие всю корзину, и **поблочные** переопределения для тонкой настройки отдельного блока.

<div id="global-design-settings">
  ## Глобальные настройки дизайна
</div>

Откройте **Cart settings** в боковой панели редактора, чтобы перейти к глобальному дизайну корзины. Настройки сгруппированы в разделы Design, Buttons и Layout.

<div id="design">
  ### Дизайн
</div>

| Настройка                | Что она контролирует                                                       | По умолчанию |
| ------------------------ | -------------------------------------------------------------------------- | ------------ |
| **Background color**     | Фон корзины.                                                               | `#ffffff`    |
| **Text color**           | Основной текст.                                                            | `#000000`    |
| **Secondary text color** | Приглушённый / второстепенный текст.                                       | `#a8a8a8`    |
| **Accent color**         | Бейджи, разделители и зачёркнутые цены.                                    | `#f2f2f2`    |
| **Border radius**        | Скругление углов для контейнеров, карточек, изображений и текстовых полей. | `8px`        |

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

| Настройка            | Что она контролирует                                                                | По умолчанию |
| -------------------- | ----------------------------------------------------------------------------------- | ------------ |
| **Background color** | Заливка кнопки.                                                                     | `#000000`    |
| **Text color**       | Надпись кнопки.                                                                     | `#ffffff`    |
| **Border color**     | Рамка кнопки.                                                                       | `#000000`    |
| **Border radius**    | Скругление углов для кнопок, выпадающих списков и элементов управления количеством. | `8px`        |

<div id="layout">
  ### Макет
</div>

| Настройка              | Что она контролирует                                  | По умолчанию |
| ---------------------- | ----------------------------------------------------- | ------------ |
| **Horizontal padding** | Отступы слева/справа внутри корзины.                  | `24px`       |
| **Desktop width**      | Ширина выдвижной корзины на десктопе (минимум 320px). | `440px`      |

<div id="per-block-design-overrides">
  ## Поблочные переопределения дизайна
</div>

Каждый блок, кроме [**Custom code**](/ru/aftersell/cart/custom-code-blocks), имеет собственные поблочные переопределения дизайна внизу своей панели настроек — под заголовком **Design** у всех блоков, кроме **Express payments**, чьи переопределения находятся в безымянных разделах Style и Spacing. (У Custom code вообще нет панели настроек — блок *и есть* код, поэтому у него отображается только вкладка Code.) Они управляют такими вещами, как стиль, отступы и другие специфичные для блока настройки дизайна. Эти **поблочные настройки дизайна**, если оставлены пустыми, наследуют глобальную настройку для соответствующего свойства.

Многие блоки также включают раздел **Text** в панели Design, где вы можете задать типографику для конкретных текстовых элементов этого блока — шрифт, размер, высоту строки и межбуквенный интервал. Блоки с несколькими текстовыми элементами (например, Notes и Empty cart) содержат селектор **Text element**, чтобы вы могли стилизовать каждый из них независимо.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Анимированный предпросмотр панели поблочных настроек Design в редакторе корзины" title="Анимированный предпросмотр панели поблочных настроек Design в редакторе корзины" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Шрифты и положение выдвижной корзины
</div>

* **Шрифты:** по умолчанию корзина наследует **шрифт вашей темы**. Вы можете задать собственный шрифт для отдельных текстовых элементов (например, названия товара и заголовка апселлов) в разделе **Text** настроек Design каждого блока — подробности см. в [Блоке товаров корзины](/ru/aftersell/cart/cart-items-block) и [Блоке апселлов](/ru/aftersell/cart/upsells-block).
* **Положение выдвижной корзины:** её **ширина** настраивается (Desktop width, выше); настройки положения слева/справа нет.

<div id="behavior-settings">
  ## Настройки поведения
</div>

Помимо оформления, в **Cart settings** также находятся параметры поведения — открытие выдвижной корзины при добавлении в корзину и селекторы темы, поддерживающие синхронизацию с вашей витриной. См. [Настройки корзины](/ru/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Когда лучше использовать пользовательский CSS
</div>

Встроенные настройки покрывают распространённые случаи. Для всего, что выходит за их пределы — нацеливание на конкретный элемент, пользовательские отступы, адаптивные правки — используйте [Пользовательский CSS](/ru/aftersell/cart/custom-css).