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

# Niestandardowy CSS

> Dodaj niestandardowy CSS, aby dopracować Aftersell Cart poza wbudowanymi ustawieniami designu.

Gdy wbudowane [ustawienia designu](/pl/aftersell/cart/design-settings) nie wystarczają, dodaj własny **niestandardowy CSS**, aby stylizować koszyk.

<div id="where-to-add-it">
  ## Gdzie go dodać
</div>

W edytorze koszyka otwórz **Cart settings → Custom CSS**. Twój CSS **stosuje się do całego koszyka** i jest ładowany **po** bazowych stylach koszyka, więc twoje reguły mają pierwszeństwo.

<div id="target-public-classes-only">
  ## Celuj tylko w klasy publiczne
</div>

Stylizuj koszyk, używając jego **publicznych klas `cart-external-*`**. Edytor je autouzupełnia i ostrzega przed pozostałymi:

* **`cart-external-*`**: publiczny, wspierany cel. Używaj ich. Nie niosą własnej stylizacji, więc istnieją wyłącznie po to, aby twój CSS miał się o co zaczepić.
* **`cart-internal-*`**: wewnętrzna hydraulika koszyka, w której mieszka cała jego wbudowana stylizacja. Edytor oznacza selektory ich dotyczące jako błędy. Nie są zmieniane pochopnie, ponieważ zależy od nich każdy istniejący koszyk, ale należą do koszyka, a nie do kontraktu z tobą. Stylizuj zamiast tego przez bliźniaczą klasę `cart-external-*`.
* Inne klasy `cart-*`, których edytor nie rozpoznaje, są oznaczane jako ostrzeżenia.

<Note>
  Klasy `cart-internal-*` zobaczysz w strukturze, w tym w domyślnym [szablonie niestandardowym](/pl/aftersell/cart/custom-templates) każdego bloku. To normalne: to one nadają blokowi jego wbudowany wygląd. Ta zasada dotyczy **selektorów, które piszesz** w tym panelu, a nie nazw klas renderowanych przez koszyk.

  Jeśli piszesz szablon niestandardowy zmieniający strukturę DOM bloku, zobacz [Stylizowanie szablonu niestandardowego](/pl/aftersell/cart/custom-templates#styling-a-custom-template), aby dowiedzieć się, które nazwy klas zachować, a które porzucić.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: koszyk jest samodzielny
</div>

W sklepie cały koszyk renderuje się wewnątrz własnego **shadow DOM**. Oznacza to:

* CSS twojego motywu nie może przeciekać do koszyka, a CSS koszyka nie może przeciekać na zewnątrz, więc twój niestandardowy CSS jest automatycznie ograniczony do koszyka i nie będzie kolidować z resztą witryny.
* Twoje selektory powinny odwoływać się do elementów i klas **wewnątrz koszyka**. Selektory wycelowane w elementy strony poza koszykiem nie sięgną do środka.

Ta sama granica dotyczy JavaScriptu: `document.querySelector` też nie widzi wnętrza szuflady. Skrypt sięgający po element koszyka musi przejść przez [`shadowRoot`](/pl/aftersell/cart/sdk-overview#shadowroot) i celuje w te same klasy `cart-external-*`.

<div id="when-to-use-design-settings-instead">
  ## Kiedy zamiast tego użyć ustawień designu
</div>

Dla kolorów, zaokrągleń, odstępów i szerokości wbudowane [ustawienia designu](/pl/aftersell/cart/design-settings) są prostsze i bezpieczniejsze, więc sięgaj po niestandardowy CSS tylko tam, gdzie one nie sięgają.

<div id="where-to-go-next">
  ## Co dalej
</div>

* **[Ustawienia designu](/pl/aftersell/cart/design-settings)**: wbudowane kontrolki stylizacji i pierwsza rzecz do wypróbowania.
* **[Szablony niestandardowe](/pl/aftersell/cart/custom-templates)**: całkowicie zastąp strukturę bloku, gdy sam CSS nie wystarczy.
* **[Cart SDK](/pl/aftersell/cart/sdk-overview)**: dla zachowania, a nie wyglądu.