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

# Пользовательский CSS

> Пишите CSS для настройки дизайна вашей корзины-шторки (cart drawer).

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

Этот раздел позволяет изменить внешний вид существующих элементов корзины или применить стили к пользовательскому HTML, добавленному через редактор.

<div id="where-to-find-it">
  ## **Где это найти**
</div>

Перейдите в:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings — это строка вкладок; Custom CSS — одна из них, рядом с Custom HTML. Если она не видна, она находится в разделе **More settings**.

<div id="how-it-works">
  ## **Как это работает**
</div>

Вы можете добавить CSS, чтобы:

* Стилизовать стандартные элементы корзины
* Изменять внешний вид пользовательского HTML
* Настраивать отступы, выравнивание, типографику и многое другое

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

<div id="using-selectors">
  ## **Использование селекторов**
</div>

Upcart предоставляет широкий набор собственных селекторов. Нажмите **«Show list»**, чтобы просмотреть все доступные варианты. Избегайте использования глобальных селекторов, таких как `body`, `div` или `h3`, если они не ограничены с помощью `.upcart-cart`, чтобы предотвратить непреднамеренные изменения в витрине вашего магазина. В ситуациях, когда стили применяются некорректно, рассмотрите возможность повышения специфичности CSS или добавления `!important` к правилам CSS. Это гарантирует, что они переопределят любые конфликтующие стили. Пример:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

Пример (безопасный селектор):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **Пример: стилизация сообщения с благодарностью**
</div>

Предположим, вы добавили этот пользовательский HTML под кнопкой оформления заказа:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Без CSS сообщение будет выглядеть просто. Чтобы стилизовать его:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # Распространённые проблемы и решения
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## CSS не отображается на мобильных устройствах
</div>

Если ваш пользовательский текст или стили не видны на мобильных устройствах:

* Обновите страницу как в **редакторе Upcart**, так и в мобильном браузере, чтобы очистить кэшированные версии.
* Убедитесь, что активна последняя опубликованная версия корзины.
* Убедитесь, что CSS сохранён на вкладке **Custom CSS** в **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## Расхождения между редактором и работающим магазином
</div>

Если стили корректно отображаются в редакторе, но не на действующем сайте, может потребоваться повышенная специфичность селекторов или добавление `!important` к ключевым правилам.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## Неправильное использование селекторов CSS
</div>

Проверьте, что целью является правильный класс или ID. Всегда включайте префиксы, такие как `.upcart-`, для элементов, специфичных для Upcart, чтобы избежать непредвиденных результатов. Если стиль не применяется, как ожидалось, убедитесь, что селектор `.thank-you-message` точно нацелен на нужный HTML-элемент, и проверьте, что код CSS размещён на правильной вкладке (Upcart > Cart Editor > Settings > Custom CSS).

***

Поддержка по настройкам:

Служба поддержки Upcart не может помочь с внедрением или отладкой пользовательского CSS. Для помощи с расширенной стилизацией мы рекомендуем обратиться к эксперту Shopify. Для устранения неполадок с пользовательским CSS обратитесь к разделу распространённых проблем, где приведены рекомендации по решению таких вопросов, как отсутствие стилей на мобильных устройствах, расхождения между предпросмотром в редакторе и действующей витриной, а также неправильное размещение селекторов.