> ## 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.
# Moduł Design
> Ten artykuł wyjaśnia, jak dostosować ustawienia designu w Upcart.
Moduł Design pozwala Ci dostosować wygląd koszyka, w tym układ, kolory marki i style przycisków.
# General
## Inherit Fonts from Theme (dziedziczenie czcionek z szablonu)
To ustawienie pozwala Upcart używać czcionek zdefiniowanych w ustawieniach szablonu Shopify. Aby zobaczyć swoje bieżące czcionki, otwórz [edytor szablonów Shopify](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) i przejdź do sekcji Typography.
## **🚧 Podgląd koszyka 🚧**
Czcionki dziedziczone z szablonu nie pojawią się w oknie podglądu Upcart, ale będą wyświetlać się poprawnie w Twoim działającym sklepie.
## Show Strikethrough Prices (przekreślone ceny)
Włącz to ustawienie, aby pokazywać przekreśloną cenę (znaną też jako [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) obok każdej pozycji w koszyku. Odzwierciedla to ceny promocyjne, podobnie jak na stronach produktów.
## Enable Subtotal Line (wiersz sumy częściowej)
Dodaje do koszyka wiersz sumy częściowej. Włączenie tej opcji ujawnia również pole **Subtotal text color** w sekcji **Colors**, dzięki czemu suma częściowa może być stylizowana niezależnie od reszty tekstu koszyka. Gdy ustawienie jest wyłączone, to pole koloru jest ukryte.
## Cart Width (szerokość koszyka)
Kontroluje szerokość koszyka wysuwanego, ustawianą osobno dla każdego widoku:
* **Desktop** — **Default** lub **Wide**
* **Mobile** — **Full** (od krawędzi do krawędzi) lub **Nearly full** (mały odstęp przy krawędzi)
***
# Colors
## Background Color (kolor tła)
Ustawia główny kolor tła koszyka, z wyłączeniem stopki i kart upsell.
## Cart Accent Color (kolor akcentu koszyka)
Kontroluje kolor tła stopki koszyka i kart produktów upsell.
## Cart Text Color (kolor tekstu koszyka)
Definiuje kolor całego tekstu koszyka, z wyjątkiem tekstu przycisków i tekstu oszczędności, które są kontrolowane osobno.
## Savings Text Color (kolor tekstu oszczędności)
Ustawia kolor tekstu oszczędności wyświetlanego pod ceną produktu.
## Subtotal Text Color (kolor tekstu sumy częściowej)
Ustawia kolor wiersza sumy częściowej. To pole pojawia się tylko wtedy, gdy opcja **Enable subtotal line** jest włączona w sekcji **General**.
## 🚧 **Podgląd koszyka** 🚧
Edytor podglądu może nie odzwierciedlać precyzyjnie ostatecznej stylizacji. Szablon Twojego sklepu może zawierać niestandardowy CSS wpływający na rozmiar lub kolor tekstu. Zawsze weryfikuj zmiany w działającym sklepie.
***
# Ustawienia przycisków
Upcart oferuje zaawansowane opcje stylizacji przycisków, w tym specyficzne dostosowanie przycisku checkout. Obejmuje to metody modyfikacji CSS oraz integrację z narzędziami brandingowymi Shopify.
## Corner Radius (zaokrąglenie rogów)
Dostosowuje zaokrąglenie rogów przycisków, od **0 px do 40 px**. `0` daje ostre, kwadratowe rogi; `40` to maksymalne zaokrąglenie suwaka. Wartość dotyczy jednocześnie przycisku checkout, przycisku upsell, przycisku rabatu i przycisku upgrade.
Suwak zatrzymuje się na 40 px. Aby uzyskać w pełni pigułkowy kształt przycisku, potrzebujesz [niestandardowego CSS](/pl/upcart/custom_css) — zobacz [Zaawansowane dostosowanie CSS](#advanced-css-customization-for-checkout-buttons) poniżej.
## Button Color (kolor przycisków)
Ustawia kolor tła wszystkich przycisków w koszyku, w tym:
* przycisku checkout
* przycisku upsell „Add to Cart”
* przycisku rabatu „Apply”
* przycisku upgrade subskrypcji. Kolor tych przycisków możesz dostosować przez Cart Editor. W sprawie dalszych zaawansowanych dostosowań, takich jak modyfikacje CSS, zapoznaj się z sekcją zaawansowanych dostosowań.
## Button Text Color (kolor tekstu przycisków)
Określa kolor tekstu używanego we wszystkich przyciskach koszyka.
## Button Text Hover Color (kolor tekstu przycisku po najechaniu)
Kontroluje kolor tekstu przycisku, gdy klient najedzie na niego myszką. Na przykład, jeśli ustawisz zielony, tekst zmieni kolor na zielony po najechaniu.
## Show Continue Shopping Button (przycisk kontynuowania zakupów)
Dodaje do koszyka przycisk **Continue shopping**, pozwalający klientom zamknąć koszyk wysuwany i wrócić do przeglądania bez używania ikony zamykania.
# Zaawansowane dostosowanie CSS przycisków checkout
W przypadku znaczących zmian designu możesz użyć niestandardowego kodu CSS, aby zmodyfikować przycisk checkout:
1. W Cart Editor otwórz **Settings** i wybierz zakładkę **Custom CSS**.
2. Użyj odpowiedniego selektora CSS, takiego jak `.checkout`. Przykładowe fragmenty CSS: Aby utworzyć przycisk w kształcie pigułki:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Aby dodać czarną ramkę:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Zastąp `.checkout` faktyczną klasą CSS Twojego przycisku. Dodatkowa stylizacja obejmuje efekty hover, padding, kolory tekstu lub czcionki.
# Integracja brandingu Shopify do dostosowania przycisków
Jeśli korzystasz z Shopify, możesz zaktualizować design przycisku checkout przez panel administracyjny Shopify:
1. Zaloguj się do panelu administracyjnego Shopify.
2. Przejdź do `Settings > Checkout > Customize`.
3. Skorzystaj z opcji brandingu, aby zmodyfikować czcionkę, zaokrąglenie lub kolor dla spójnego designu.
