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

> Pisz CSS, aby dostosować wygląd swojego koszyka wysuwanego (cart drawer).

<div id="overview">
  # Przegląd
</div>

Ta sekcja pozwala Ci zmienić wygląd istniejących elementów koszyka lub zastosować style do niestandardowego HTML dodanego przez edytor.

<div id="where-to-find-it">
  ## **Gdzie to znaleźć**
</div>

Przejdź do:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings to rząd zakładek; Custom CSS jest jedną z nich, obok Custom HTML. Jeśli nie jest widoczna, znajduje się pod **More settings**.

<div id="how-it-works">
  ## **Jak to działa**
</div>

Możesz dodać CSS, aby:

* Stylizować domyślne elementy koszyka
* Modyfikować wygląd niestandardowego HTML
* Dostosowywać odstępy, wyrównanie, typografię i więcej

Podczas pisania **okienko autouzupełniania** będzie podpowiadać prawidłowe selektory Upcart, aby przyspieszyć edycję. Wybranie podpowiedzi automatycznie uzupełni regułę i pomoże Ci ustrukturyzować kod. Jeśli zmiany nie pojawiają się zgodnie z oczekiwaniami, przejrzyj typowe sugestie rozwiązywania problemów, takie jak odświeżenie pamięci podręcznej zarówno w przeglądarce, jak i w edytorze Upcart, sprawdzenie umiejscowienia CSS oraz upewnienie się co do odpowiedniej specyficzności reguł CSS.

<div id="using-selectors">
  ## **Używanie selektorów**
</div>

Upcart udostępnia szeroki zakres niestandardowych selektorów. Kliknij **„Show list”**, aby zobaczyć wszystkie dostępne opcje. Unikaj używania globalnych selektorów, takich jak `body`, `div` czy `h3`, chyba że są ograniczone przez `.upcart-cart`, aby zapobiec niezamierzonym zmianom w Twoim sklepie. W sytuacjach, gdy style nie są stosowane poprawnie, rozważ zwiększenie specyficzności CSS lub dodanie `!important` do reguł CSS. Dzięki temu nadpiszą one wszelkie konfliktujące style. Przykład:

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

Przykład (bezpieczny selektor):

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

<div id="example-thank-you-message-styling">
  ## **Przykład: stylizacja wiadomości z podziękowaniem**
</div>

Załóżmy, że dodałeś ten niestandardowy HTML pod przyciskiem checkout:

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

Bez CSS wiadomość będzie wyglądać zwyczajnie. Aby ją ostylować:

```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">
  # Typowe problemy i rozwiązania
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## CSS nie pojawia się na urządzeniach mobilnych
</div>

Jeśli Twój niestandardowy tekst lub style nie są widoczne na urządzeniu mobilnym:

* Odśwież stronę zarówno w **edytorze Upcart**, jak i w przeglądarce mobilnej, aby wyczyścić wersje z pamięci podręcznej.
* Upewnij się, że aktywna jest najnowsza opublikowana wersja koszyka.
* Potwierdź, że CSS jest zapisany na zakładce **Custom CSS** w **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## Rozbieżności między edytorem a działającym sklepem
</div>

Style wyświetlające się poprawnie w edytorze, ale nie na działającej stronie, mogą wymagać zwiększenia specyficzności selektorów lub dodania `!important` do kluczowych reguł.

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

<div id="incorrect-css-selector-usage">
  ## Nieprawidłowe użycie selektorów CSS
</div>

Zweryfikuj, czy celujesz we właściwą klasę lub ID. Zawsze dołączaj prefiksy takie jak `.upcart-` dla elementów specyficznych dla Upcart, aby uniknąć niezamierzonych rezultatów. Jeśli styl nie jest stosowany zgodnie z oczekiwaniami, upewnij się, że selektor `.thank-you-message` precyzyjnie celuje w zamierzony element HTML i sprawdź, czy kod CSS znajduje się na właściwej zakładce (Upcart > Cart Editor > Settings > Custom CSS).

***

Wsparcie dla dostosowań:

Wsparcie Upcart nie może pomóc we wdrażaniu ani debugowaniu niestandardowego CSS. W przypadku zaawansowanej pomocy ze stylizacją zalecamy współpracę z ekspertem Shopify (Shopify Expert). Aby rozwiązać problemy z niestandardowym CSS, zapoznaj się z sekcją typowych problemów, gdzie znajdziesz wskazówki dotyczące rozwiązywania takich kwestii, jak brakujące style na urządzeniach mobilnych, rozbieżności między podglądem w edytorze a działającym sklepem oraz błędne umiejscowienie selektorów.