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

# Ustawienia designu

> Globalne i per blok ustawienia designu Aftersell Cart: kolory, przyciski, układ oraz sposób nakładania się nadpisań bloków.

Design Aftersell Cart działa na dwóch poziomach: **globalne** ustawienia stylizujące cały koszyk oraz nadpisania **per blok**, które dopracowują pojedynczy blok.

<div id="global-design-settings">
  ## Globalne ustawienia designu
</div>

Otwórz **Cart settings** z paska bocznego edytora, aby dotrzeć do globalnego designu koszyka. Ustawienia są pogrupowane w Design, Buttons i Layout.

<div id="design">
  ### Design
</div>

| Ustawienie               | Co kontroluje                                                  | Domyślnie |
| ------------------------ | -------------------------------------------------------------- | --------- |
| **Background color**     | Tło koszyka.                                                   | `#ffffff` |
| **Text color**           | Tekst podstawowy.                                              | `#000000` |
| **Secondary text color** | Tekst wyciszony / drugorzędny.                                 | `#a8a8a8` |
| **Accent color**         | Odznaki, separatory i przekreślone ceny.                       | `#f2f2f2` |
| **Border radius**        | Zaokrąglenie rogów kontenerów, kart, obrazów i pól tekstowych. | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| Ustawienie           | Co kontroluje                                                       | Domyślnie |
| -------------------- | ------------------------------------------------------------------- | --------- |
| **Background color** | Wypełnienie przycisku.                                              | `#000000` |
| **Text color**       | Etykieta przycisku.                                                 | `#ffffff` |
| **Border color**     | Obramowanie przycisku.                                              | `#000000` |
| **Border radius**    | Zaokrąglenie rogów przycisków, list rozwijanych i kontrolek ilości. | `8px`     |

<div id="layout">
  ### Layout
</div>

| Ustawienie             | Co kontroluje                                    | Domyślnie |
| ---------------------- | ------------------------------------------------ | --------- |
| **Horizontal padding** | Odstęp lewy/prawy wewnątrz koszyka.              | `24px`    |
| **Desktop width**      | Szerokość szuflady na desktopie (minimum 320px). | `440px`   |

<div id="per-block-design-overrides">
  ## Nadpisania designu per blok
</div>

Każdy blok poza [**Custom code**](/pl/aftersell/cart/custom-code-blocks) ma własne nadpisania designu per blok na dole swojego panelu ustawień — zatytułowane **Design** w każdym bloku poza **Express payments**, którego nadpisania znajdują się w nieoznaczonych sekcjach Style i Spacing. (Custom code w ogóle nie ma panelu ustawień — blok *jest* kodem, więc pokazuje tylko kartę Code.) Kontrolują one styl, odstępy i inne ustawienia designu specyficzne dla bloku. Te **ustawienia designu per blok**, gdy są puste, wracają do globalnego ustawienia dla danej właściwości.

Wiele bloków zawiera również sekcję **Text** w swoim panelu Design, w której możesz ustawić typografię dla konkretnych elementów tekstowych w tym bloku — rodzinę czcionek, rozmiar, wysokość linii i odstępy między znakami. Bloki z wieloma elementami tekstowymi (takie jak Notes i Empty cart) pokazują selektor **Text element**, który pozwala stylizować każdy z nich niezależnie.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Animowany podgląd panelu ustawień Design per blok w edytorze koszyka" title="Animowany podgląd panelu ustawień Design per blok w edytorze koszyka" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Czcionki i pozycja szuflady
</div>

* **Czcionki:** koszyk domyślnie dziedziczy **czcionkę twojego motywu**. Możesz ustawić niestandardowy krój dla wybranych elementów tekstowych (takich jak tytuł produktu i nagłówek upselli) w sekcji **Text** w ustawieniach Design każdego bloku — szczegóły zobacz w [Bloku Cart items](/pl/aftersell/cart/cart-items-block) i [Bloku Upsells](/pl/aftersell/cart/upsells-block).
* **Pozycja szuflady:** **szerokość** szuflady jest regulowana (Desktop width, powyżej); nie ma ustawienia pozycji lewo/prawo.

<div id="behavior-settings">
  ## Ustawienia działania
</div>

Poza stylizacją **Cart settings** zawiera też opcje działania — otwieranie szuflady po dodaniu do koszyka i selektory motywu utrzymujące synchronizację ze sklepem. Zobacz [Ustawienia koszyka](/pl/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Kiedy zamiast tego użyć niestandardowego CSS
</div>

Wbudowane ustawienia pokrywają typowe przypadki. Do wszystkiego poza nimi — celowania w konkretny element, niestandardowych odstępów, poprawek responsywnych — użyj [Niestandardowego CSS](/pl/aftersell/cart/custom-css).