> ## 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.
Модуль Design позволяет настроить внешний вид вашей корзины, включая макет, фирменные цвета и стили кнопок.
# General
## Наследование шрифтов из темы
Эта настройка позволяет Upcart использовать шрифты, заданные в настройках вашей темы Shopify. Чтобы посмотреть текущий выбор шрифтов, откройте [редактор тем Shopify](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) и перейдите в раздел Typography.
## **🚧 Предпросмотр корзины 🚧**
Шрифты, унаследованные из вашей темы, не будут отображаться в окне предпросмотра Upcart, но будут корректно показываться в действующей витрине вашего магазина.
## Показывать зачёркнутые цены
Включите эту настройку, чтобы показывать зачёркнутую цену (также известную как [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) рядом с каждым товаром в корзине. Это отражает цену со скидкой, аналогично страницам ваших товаров.
## Включить строку промежуточного итога
Добавляет в корзину строку промежуточного итога. При включении также появляется поле **Subtotal text color** в разделе **Colors**, поэтому промежуточный итог можно стилизовать отдельно от остального текста корзины. При выключенной настройке это поле цвета скрыто.
## Ширина корзины
Управляет шириной шторки, настраивается отдельно для каждого типа экрана:
* **Desktop** — **Default** или **Wide**
* **Mobile** — **Full** (от края до края) или **Nearly full** (небольшой отступ у края)
***
# Colors
## Цвет фона
Задаёт основной цвет фона корзины, за исключением футера и карточек апсейлов.
## Акцентный цвет корзины
Управляет цветом фона футера корзины и карточек товаров-апсейлов.
## Цвет текста корзины
Определяет цвет всего текста корзины, кроме текста кнопок и текста экономии, которые настраиваются отдельно.
## Цвет текста экономии
Задаёт цвет текста экономии, отображаемого под ценой товара.
## Цвет текста промежуточного итога
Задаёт цвет строки промежуточного итога. Это поле появляется только тогда, когда в разделе **General** включена настройка **Enable subtotal line**.
## 🚧 **Предпросмотр корзины** 🚧
Редактор предпросмотра может не отражать финальную стилизацию точно. Тема вашего магазина может содержать пользовательский CSS, влияющий на размер или цвет текста. Всегда проверяйте изменения в действующей витрине магазина.
***
# Настройки кнопок
Upcart предлагает расширенные возможности стилизации кнопок, включая отдельную настройку кнопки оформления заказа. Сюда входят способы корректировки CSS и интеграция инструментов брендинга Shopify.
## Радиус скругления
Регулирует скругление углов кнопок в диапазоне от **0 px до 40 px**. `0` даёт острые, прямые углы; `40` — максимальное скругление, доступное ползунку. Значение применяется одновременно к кнопке оформления заказа, кнопке апсейла, кнопке скидки и кнопке апгрейда.
Ползунок останавливается на 40 px. Для полностью «таблеткообразной» кнопки вам понадобится [пользовательский CSS](/ru/upcart/custom_css) — см. раздел [Расширенная настройка CSS](#advanced-css-customization-for-checkout-buttons) ниже.
## Цвет кнопки
Задаёт цвет фона всех кнопок в корзине, включая:
* Кнопку оформления заказа
* Кнопку апсейла «Add to Cart»
* Кнопку применения скидки «Apply»
* Кнопку апгрейда подписки Вы можете настроить цвет этих кнопок через Cart Editor. Для дальнейших расширенных настроек, таких как модификации CSS, обратитесь к разделу расширенной настройки.
## Цвет текста кнопки
Определяет цвет текста, используемый во всех кнопках корзины.
## Цвет текста кнопки при наведении
Управляет цветом текста кнопки, когда покупатель наводит на неё курсор мыши. Например, если задан зелёный цвет, текст станет зелёным при наведении.
## Показывать кнопку «Продолжить покупки»
Добавляет в корзину кнопку **Continue shopping**, позволяющую покупателям закрыть шторку и вернуться к просмотру товаров без использования значка закрытия.
# Расширенная настройка CSS для кнопок оформления заказа
Для существенных изменений дизайна вы можете использовать код Custom CSS для модификации кнопки оформления заказа:
1. В Cart Editor откройте **Settings** и выберите вкладку **Custom CSS**.
2. Используйте соответствующий селектор CSS, например `.checkout`. Примеры сниппетов CSS: Чтобы создать кнопку в форме таблетки:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Чтобы добавить чёрную рамку:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Замените `.checkout` фактическим CSS-классом вашей кнопки. Дополнительная стилизация включает эффекты при наведении, отступы, цвета текста или шрифты.
# Интеграция брендинга Shopify для настройки кнопок
Если вы используете Shopify, вы можете обновить дизайн кнопки оформления заказа через админ-панель Shopify:
1. Войдите в админ-панель Shopify.
2. Перейдите в `Settings > Checkout > Customize`.
3. Используйте параметры брендинга, чтобы изменить шрифт, скругление или цвет для целостного дизайна.
