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

> Ten artykuł przeprowadza cię przez ustawienia brandingu checkoutu i sposób użycia każdej sekcji do dostosowania twojego checkoutu.

Ustawienia brandingu pozwalają dostosować wygląd i styl twojego checkoutu — od kolorów i typografii po przyciski, pola formularza i układ strony. Te narzędzia ułatwiają dopasowanie designu checkoutu do tożsamości twojej marki.

<div id="how-to-access-it">
  # Jak uzyskać dostęp
</div>

Otwórz pulpit **Checkout** w Aftersell i kliknij **Edit branding** u góry strony.

<Note>
  Edytowanie brandingu w tym miejscu wymaga planu **Shopify Plus**. Shopify pozwala aplikacjom odczytywać i zapisywać branding checkoutu wyłącznie na planie Plus, więc na innych planach tych ustawień nie da się zapisać. Jeśli twój sklep nie jest na Plus, wprowadź te same zmiany w edytorze checkoutu Shopify: **Settings → Checkout → Customize** w panelu administracyjnym Shopify.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="Pulpit Checkout Aftersell ze strzałką wskazującą przycisk Edit branding" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

Edytor jest podzielony na trzy grupy: **Design system**, **Customizations** i **Advanced**.

***

<div id="design-system">
  # System projektowy
</div>

Ustawienia systemu projektowego to fundament. Komponenty w całym checkoucie dziedziczą z nich wartości, chyba że bardziej szczegółowe ustawienie je nadpisze.

<div id="global-colors">
  ## Kolory globalne
</div>

Kolory twojej marki i kolory systemowe, używane w całym sklepie i w doświadczeniach post-purchase. Komponenty korzystają z tych kolorów, gdy nie ustawiono schematu kolorów.

**Kolory marki**

* **Brand** – główny kolor twojej marki.
* **Accent** – używany dla elementów interaktywnych i wyróżnionych.
* **Decorative** – używany dla wspierających elementów dekoracyjnych.

**Kolory statusów i systemowe**

* **Success** – stany potwierdzenia.
* **Warning** – komunikaty ostrzegawcze.
* **Critical** – błędy i alerty.
* **Info** – komunikaty informacyjne.

<Note>
  Kolory powierzchni i przycisków nie są ustawiane tutaj. Znajdują się w sekcji **Advanced > Color schemes**.
</Note>

<div id="typography">
  ## Typografia
</div>

* **Font size** – ustaw **Base size** oraz **Scale ratio**, z którego wyprowadzana jest reszta skali typograficznej.
* **Primary font** – używany dla większości komponentów, takich jak zwykły tekst, przyciski i kontrolki formularza. Wybierz **Font family**, **Base weight** i **Bold weight**.
* **Secondary font** – używany dla komponentów nagłówkowych, z tymi samymi trzema kontrolkami.

<div id="corner-radius">
  ## Zaokrąglenie narożników
</div>

Ustawia wspólne wartości zaokrąglenia narożników, do których odwołują się przyciski, pola formularza, kontenery i inne komponenty. Definiujesz trzy rozmiary: **Small**, **Medium** i **Large**.

***

<div id="customizations">
  # Dostosowania
</div>

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

Konfigurowane osobno dla **Primary buttons** (główna akcja na stronie) i **Secondary buttons** (akcje pomocnicze). Każdy ma:

* **Corner radius** – Small, Medium, Large lub None (kwadratowe).
* **Background** – Solid lub None.
* **Vertical padding** i **Horizontal padding**.
* **Show border**.

<Note>
  Kolory przycisków są dziedziczone ze schematów kolorów. Jeśli nie ustawiono wartości schematu, używane są kolory globalne.
</Note>

<div id="form-fields">
  ## Pola formularza
</div>

Dotyczy wszystkich obsługiwanych typów pól:

* **Corner radius**
* **Label position** – Inside lub Outside.
* **Show border**

**Nadpisania per typ pola** pozwalają odejść od tych wspólnych stylów dla konkretnych typów pól: **Text field borders**, **Dropdown borders**, **Choice list group spacing** i **Checkbox corner radius**.

<div id="product-thumbnails">
  ## Miniatury produktów
</div>

Kontroluje, jak zdjęcia produktów wyglądają na stronie:

* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** – Accent (kolor akcentu schematu) lub Base (kolor bazowy schematu).

<div id="header">
  ## Nagłówek
</div>

* **Layout** – **Placement** (Top bar, Left section lub Right section) oraz **Alignment** (Left, Center lub Right).
* **Container** – **Padding**, **Color scheme** oraz **Show divider**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="Strona checkoutu z podświetlonym nagłówkiem z nazwą sklepu w lewym górnym rogu" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## Obszar treści
</div>

Kontroluje **Divider** między obszarem głównym a podsumowaniem zamówienia: **Show divider**, **Border style** i **Border weight**.

<div id="main-area">
  ## Obszar główny
</div>

* **Section containers** – tło i obramowanie wokół każdej sekcji: **Background**, **Show border**, **Border style**, **Border weight**.
* **Section dividers** – linie wyświetlane między sekcjami.

<div id="order-summary">
  ## Podsumowanie zamówienia
</div>

* **Container** – **Color scheme** zastosowany do całego kontenera podsumowania zamówienia.
* **Section dividers** – **Show divider**, **Border style**, **Border weight**.
* **Section containers** – tło i obramowanie wokół każdej sekcji: **Show border**, **Background**, **Border style**, **Border weight**, **Color scheme**, **Corner radius**, **Padding** i **Shadow**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="Miniatura produktu w podsumowaniu zamówienia z podświetlonym obramowaniem obrazu" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## Stopka
</div>

* **Layout** – **Placement** i **Alignment**.
* **Container** – **Show footer content**, **Padding**, **Color scheme** oraz **Show divider**.

***

<div id="advanced">
  # Zaawansowane
</div>

<div id="color-schemes">
  ## Schematy kolorów
</div>

Schematy kolorów to wielokrotnego użytku zestawy kolorów powierzchni, tekstu i przycisków, na które wskazują inne sekcje. Dostępne są dwa schematy:

* **Scheme 1 - Main area**
* **Scheme 2 - Supporting areas**

Każdy schemat jest podzielony na trzy grupy:

* **Buttons** – używane dla głównego przycisku płatności i akcji pomocniczych. **Primary button** i **Secondary button** są konfigurowane osobno, każdy z własnym stanem domyślnym i stanem najechania.
* **Form controls** – używane dla pól tekstowych, list rozwijanych i list wyboru.
* **Base surfaces** – tło powierzchni, tekst treści oraz role pomocnicze: obramowanie, akcent (linki i fokus), dekoracja (subtelne wyróżnienia) i kolor ikon.

Wszędzie tam, gdzie sekcja oferuje kontrolkę **Color scheme**, możesz wskazać **Scheme 1**, **Scheme 2** lub **Transparent**.