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

# Настройка Render cart in shadow DOM

> В этой статье объясняется, что делает настройка Render Cart in Shadow DOM и как устранять проблемы, связанные со стилями или конфликтами интеграции между вашей темой Shopify и Upcart.

<div id="what-shadow-dom-does">
  ## Что делает Shadow DOM
</div>

Когда настройка **Render Cart in Shadow DOM** **включена**, Upcart создаёт автономное пространство, которое отделяет его стили и скрипты от остальной части вашего магазина.

Это означает:

* Глобальный CSS вашей темы не может переопределить дизайн Upcart.
* Стили Upcart также не будут мешать вашей теме.
* Корзина остаётся единообразной на разных устройствах и темах.

Можно представить Shadow DOM как «защитный пузырь» вокруг вашей корзины, который помогает ей выглядеть и работать так, как задумано.

***

<div id="how-this-happens">
  ## Как это происходит
</div>

Темы Shopify и сторонние темы часто содержат глобальный CSS и JavaScript, которые могут непреднамеренно влиять на внешний вид или поведение Upcart.

Настройка **Render Cart in Shadow DOM** помогает предотвратить эти конфликты, изолируя корзину-drawer Upcart в собственном защищённом окружении. При включении Shadow DOM сохраняет дизайн и макет вашей корзины неизменными, независимо от обновлений темы или изменений пользовательского кода.

Однако если вашей теме или стороннему приложению нужен прямой доступ к элементам корзины, такая изоляция иногда может создавать сложности интеграции.

***

<div id="technical-considerations">
  ## Технические аспекты
</div>

Если вам или разработчику нужно изменять элементы внутри Upcart с помощью JavaScript, важно использовать правильные ссылки на документ:

* Используйте `upcartDocumentOrShadowRoot` при обращении к элементам **внутри** Upcart.
* Используйте `document` при обращении к элементам **вне** Upcart (например, к шапке или подвалу вашей темы Shopify).

Хотя Shadow DOM изолирован, Upcart по-прежнему предоставляет способы взаимодействия с вашей темой и другими приложениями через свой **Public API** и вспомогательные функции.

***

<div id="troubleshooting-and-limitations">
  ## Устранение неполадок и ограничения
</div>

В большинстве случаев включение Shadow DOM автоматически устраняет конфликты CSS и макета.\
Однако всегда могут быть сценарии, в которых проблемы всё же возникают:

* **Приложения ценообразования:** если другому приложению нужно напрямую изменять цены или поведение оформления заказа внутри корзины, Shadow DOM может это затруднить, поскольку скрывает внутреннюю структуру Upcart от внешних скриптов.
* **JavaScript на уровне темы:** пользовательские скрипты, использующие `document.querySelector()`, могут не находить элементы корзины при включённом Shadow DOM.

Если вам нужно протестировать поведение магазина с такими интеграциями, вы можете временно отключить настройку: откройте Cart Editor, перейдите в **Settings → Cart settings**, разверните **Advanced Settings** и снимите флажок **Render cart in shadow DOM**.