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

# Biblioteka selektorów CSS Upcart (V1)

> Ten artykuł przedstawia selektory CSS dostępne w Upcart w wersji 1, umożliwiające stosowanie niestandardowych stylów do starszego wysuwanego koszyka.

📝 **Uwaga**

Selektory V1 dotyczą modułów starszego wysuwanego koszyka. Jeśli masz już wersję V2, selektory modułów z tej strony nie będą pasować — aktualne selektory znajdziesz w [bibliotece selektorów CSS V2](/pl/upcart/upcart_css_selector_library_v2).

Warto znać dwa wyjątki: `.upcart-cart` i `.upcart-cart-body` znajdują się na powłoce szuflady, a nie na module, więc nadal działają w V2. Poprawki układu dotyczące szuflady jako całości (ograniczanie jej szerokości, zatrzymywanie poziomego przepełnienia) działają dalej po aktualizacji.

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

Jeśli chcesz zmienić wygląd koszyka, np. ukryć cenę, dostosować rozmiar tekstu lub zmienić położenie przycisku, to jest miejsce, od którego warto zacząć. Ta biblioteka selektorów CSS zapewnia narzędzia potrzebne do wprowadzenia takich zmian za pomocą własnego niestandardowego kodu.

Wszystkie dostępne selektory CSS zostały pogrupowane w tym artykule, wraz z linkami do przydatnych zasobów dotyczących pisania i testowania stylów.

<div id="note">
  ## **Uwaga**
</div>

Chociaż udostępniamy tę bibliotekę dla Twojej wygody, zespół wsparcia Upcart **nie może pomagać w tworzeniu ani naprawianiu niestandardowego kodu.** To część naszej [polityki personalizacji](/pl/upcart/upcart_customization_policy).

W sprawie niestandardowych rozwiązań kodowych zalecamy konsultację z ekspertem Shopify.

[Zobacz ekspertów Shopify](https://www.shopify.com/ca/partners/directory)

<div id="how-to-use-upcart-css-selectors">
  # Jak korzystać z selektorów CSS Upcart
</div>

Ten artykuł to **biblioteka selektorów CSS**, których możesz używać do stylowania i personalizacji wysuwanego koszyka Upcart. Każdy selektor dotyczy konkretnej części koszyka — nagłówka, wierszy produktów, upselli, modułu nagród i innych.

Możesz używać tych selektorów, aby:

* Ukrywać elementy lub zmieniać ich styl
* Zmieniać odstępy, czcionki lub kolory
* Dostosowywać układ do identyfikacji wizualnej sklepu

Aby zastosować swój CSS, otwórz Cart Editor, przejdź do **Settings**, wybierz kartę **Custom CSS** i wklej style do edytora.

<div id="what-to-know-before-adding-css">
  # Co warto wiedzieć przed dodaniem CSS
</div>

Zanim zabierzesz się za własne style, oto kilka wskazówek, które ułatwią pracę. Dzięki nim łatwiej będzie testować zmiany, uniknąć niespodzianek i uzyskać pożądany wygląd bez psucia czegokolwiek w koszyku.

<div id="css-customization-checklist">
  ## Lista kontrolna personalizacji CSS:
</div>

* **Testuj w bezpiecznym środowisku:** Jeśli to możliwe, przed publikacją używaj podglądu lub nieopublikowanego motywu.

* **Zaczynaj od małych kroków:** Wprowadzaj jedną zmianę na raz, aby łatwiej śledzić, co zadziałało, a co nie.

* **Wklejaj style we właściwym miejscu:** Kod dodawaj w polu **Upcart Editor > Settings > Custom CSS**.

* **Używaj narzędzia Zbadaj:** Kliknij element prawym przyciskiem myszy w przeglądarce i wybierz **Zbadaj (Inspect)**, aby znajdować i testować selektory na żywo.

* **Unikaj założeń:** Nie każdy element pojawia się we wszystkich koszykach — testuj z różnymi koszykami (z nagrodami/bez nagród, z upsellami itd.).

<div id="css-selectors-library">
  # Biblioteka selektorów CSS
</div>

Poniżej znajduje się lista wszystkich selektorów CSS dostępnych w Upcart. Są pogrupowane według **modułów** (nagłówek, produkty, upselle itd.), aby ułatwić Ci znalezienie tego, co chcesz spersonalizować. Używaj jej jako odniesienia podczas pisania własnych stylów.

<div id="general-settings">
  ## Ustawienia ogólne
</div>

<div id="design-module">
  ### Moduł Design
</div>

|                     |                                               |
| ------------------- | --------------------------------------------- |
| **Selektor CSS**    | **Opis**                                      |
| `.upcart-cart`      | Główny kontener wysuwanego koszyka.           |
| `.upcart-cart-body` | Zawiera główną treść koszyka.                 |
| `.upcart-backdrop`  | Ciemna nakładka pojawiająca się za koszykiem. |

<div id="header-module">
  ### Moduł nagłówka
</div>

|                                    |                                                              |
| ---------------------------------- | ------------------------------------------------------------ |
| **Selektor CSS**                   | **Opis**                                                     |
| `.upcart-header`                   | Kontener nagłówka koszyka, w tym logo i przycisku zamykania. |
| `.upcart-header-close-button`      | Przycisk służący do zamykania wysuwanego koszyka.            |
| `.upcart-header-close-button-icon` | Ikona wyświetlana wewnątrz przycisku zamykania.              |
| `.upcart-header-logo`              | Wyświetla obraz logo w nagłówku koszyka.                     |
| `.upcart-header-text`              | Tekst tytułu wyświetlany w nagłówku koszyka.                 |

<div id="body-settings">
  ## Ustawienia treści (Body)
</div>

<div id="announcements-module">
  ### Moduł ogłoszeń
</div>

|                                 |                                          |
| ------------------------------- | ---------------------------------------- |
| **Selektor CSS**                | **Opis**                                 |
| `.upcart-announcement`          | Baner lub sekcja ogłoszeń w koszyku.     |
| `.upcart-announcement-skeleton` | Szkieletowy placeholder sekcji ogłoszeń. |

<div id="rewards-module">
  ### Moduł nagród
</div>

|                                    |                                                   |
| ---------------------------------- | ------------------------------------------------- |
| **Selektor CSS**                   | **Opis**                                          |
| `.upcart-rewards`                  | Główny kontener sekcji nagród.                    |
| `.upcart-rewards-message`          | Wyświetla komunikaty o postępie dotyczące nagród. |
| `.upcart-rewards-bar-background`   | Warstwa tła paska postępu nagród.                 |
| `.upcart-rewards-bar-foreground`   | Wypełnienie/postęp paska nagród.                  |
| `.upcart-rewards-tier`             | Reprezentuje konkretny próg w systemie nagród.    |
| `.upcart-rewards-tier-circle`      | Wizualny okrągły wskaźnik progu nagrody.          |
| `.upcart-rewards-tier-icon`        | Ikona wewnątrz okręgu progu nagrody.              |
| `.upcart-rewards-tier-description` | Tekst opisu pod każdym progiem nagrody.           |
| `.upcart-rewards-skeleton`         | Szkieletowy kontener sekcji nagród.               |
| `.upcart-rewards-message-skeleton` | Szkielet komunikatu o postępie nagród.            |
| `.upcart-rewards-bar-skeleton`     | Szkielet paska postępu nagród.                    |

<div id="recommendations-module">
  ### Moduł rekomendacji
</div>

|                                           |                                                                     |
| ----------------------------------------- | ------------------------------------------------------------------- |
| **Selektor CSS**                          | **Opis**                                                            |
| `.upcart-recommendation-module`           | Obudowa całego modułu rekomendacji produktów.                       |
| `.upcart-recommendations-title`           | Tekst tytułu sekcji rekomendacji.                                   |
| `.upcart-recommendations-shop-now-button` | Przycisk do zakupu rekomendowanego produktu bezpośrednio z koszyka. |

<div id="subscription-upgrades-module">
  ### Moduł ulepszeń subskrypcji
</div>

|                                         |                                                                    |
| --------------------------------------- | ------------------------------------------------------------------ |
| **Selektor CSS**                        | **Opis**                                                           |
| `.upcart-subscription-upgrade-section`  | Sekcja promująca ulepszenia subskrypcji w koszyku.                 |
| `.upcart-subscription-upgrade-button`   | Przycisk uruchamiający ulepszenie subskrypcji.                     |
| `.upcart-subscription-upgrade-dropdown` | Lista rozwijana do wyboru dostępnych opcji ulepszenia subskrypcji. |

<div id="upsells-module">
  ### Moduł upselli
</div>

|                                        |                                                      |
| -------------------------------------- | ---------------------------------------------------- |
| **Selektor CSS**                       | **Opis**                                             |
| `.upcart-upsells`                      | Główny kontener sekcji upselli.                      |
| `.upcart-upsells-module`               | Obudowa modułu upselli.                              |
| `.upcart-upsells-title`                | Tytuł sekcji upselli.                                |
| `.upcart-upsells-button`               | Przycisk dodawania produktów upsellowych do koszyka. |
| `.upcart-upsell-item-card`             | Układ karty każdego produktu upsellowego.            |
| `.upcart-upsell-item-title`            | Tytuł produktu upsellowego.                          |
| `.upcart-upsell-item-image-wrapper`    | Obudowa obrazu produktu upsellowego.                 |
| `.upcart-upsell-item-image`            | Obraz produktu upsellowego.                          |
| `.upcart-upsell-item-price`            | Cena produktu upsellowego.                           |
| `.upcart-upsell-item-price-row`        | Wiersz zawierający cenę i cenę porównawczą.          |
| `.upcart-upsell-item-compare-price`    | Pierwotna cena (przekreślona) upsella.               |
| `.upcart-upsell-item-variant-selector` | Lista rozwijana wariantów produktów upsellowych.     |

<div id="product-settings">
  ### Ustawienia produktów
</div>

|                                      |                                                      |
| ------------------------------------ | ---------------------------------------------------- |
| **Selektor CSS**                     | **Opis**                                             |
| `.upcart-products-section`           | Kontener wszystkich produktów w koszyku.             |
| `.upcart-product-item`               | Obudowa pojedynczej pozycji produktu.                |
| `.upcart-product-title`              | Nazwa produktu w koszyku.                            |
| `.upcart-product-title-link`         | Link obejmujący tytuł produktu.                      |
| `.upcart-item-prices-row`            | Wiersz zawierający informacje o cenach.              |
| `.upcart-item-price`                 | Cena końcowa pokazywana klientowi.                   |
| `.upcart-item-compare-price`         | Pierwotna (przekreślona) cena.                       |
| `.upcart-product-savings`            | Konkretna oszczędność dla pozycji w koszyku.         |
| `.upcart-item-option`                | Kontener opcji produktu, np. rozmiaru lub koloru.    |
| `.upcart-item-option-category`       | Etykieta kategorii opcji produktu.                   |
| `.upcart-item-option-value`          | Wartość wybranej opcji produktu.                     |
| `.upcart-item-properties`            | Obudowa dodatkowych metadanych produktu.             |
| `.upcart-item-property`              | Pojedyncza właściwość produktu.                      |
| `.upcart-item-property-subscription` | Wyświetla szczegóły subskrypcji dla pozycji.         |
| `.upcart-product-quantity-input`     | Pole wprowadzania ilości produktu.                   |
| `.upcart-product-quantity-minus`     | Przycisk zmniejszania ilości.                        |
| `.upcart-product-quantity-plus`      | Przycisk zwiększania ilości.                         |
| `.upcart-product-image-wrapper`      | Obudowa obrazu produktu.                             |
| `.upcart-quantity-warning`           | Kontener komunikatu o limicie ilości.                |
| `.upcart-quantity-warning-text`      | Tekst ostrzeżenia o ilości pokazywany użytkownikowi. |

<div id="footer-settings">
  ## Ustawienia stopki
</div>

<div id="add-ons-module">
  ### Moduł dodatków (Add-ons)
</div>

|                                      |                                         |
| ------------------------------------ | --------------------------------------- |
| **Selektor CSS**                     | **Opis**                                |
| `.upcart-addons`                     | Główny kontener sekcji dodatków.        |
| `.upcart-addons-title`               | Tytuł sekcji dodatków.                  |
| `.upcart-addons-product-description` | Opis produktu dodatkowego.              |
| `.upcart-addons-price`               | Cena produktu dodatkowego.              |
| `.upcart-addons-compare-price`       | Pierwotna (przekreślona) cena dodatku.  |
| `.upcart-addons-toggle`              | Przełącznik dodawania/usuwania dodatku. |
| `.upcart-addons-image-wrapper`       | Obudowa obrazu dodatku.                 |

<div id="discount-codes-module">
  ### Moduł kodów rabatowych
</div>

<div id="savings-row">
  ### Wiersz oszczędności
</div>

|                                  |                                                                 |
| -------------------------------- | --------------------------------------------------------------- |
| **Selektor CSS**                 | **Opis**                                                        |
| `.upcart-savings-row`            | Obudowa całej sekcji rabatów/oszczędności w koszyku.            |
| `.styles_Footer__savingsCodes__` | Kontener etykiety („Discounts”) i powiązanych kodów rabatowych. |
| `.upcart-discount-code-badge`    | Obudowa każdej plakietki kodu rabatowego w interfejsie.         |
| `.upcart-discount-code-icon`     | Kontener ikony rabatu (np. symbol biletu SVG).                  |
| `.upcart-discount-code-text`     | Tekstowa reprezentacja kodu rabatowego (np. „AUTO 5”).          |
| `.upcart-savings-amount`         | Wyświetla faktyczną kwotę zaoszczędzoną dzięki rabatom.         |

<div id="express-payments-module">
  ### Moduł płatności ekspresowych
</div>

<div id="note-2">
  ## Uwaga
</div>

Przyciski płatności ekspresowych w Upcart pełnią rolę kontenerów wizualnych, natomiast ich zawartość i funkcjonalność są w pełni kontrolowane przez Shopify. W związku z tym nie możemy modyfikować ich zachowania ani wyglądu. Więcej informacji znajdziesz w przewodniku [**Moduł płatności ekspresowych**](/pl/upcart/express_payments_module).

|                                         |                                                        |
| --------------------------------------- | ------------------------------------------------------ |
| **Selektor CSS**                        | **Opis**                                               |
| `.upcart-express-pay-buttons-container` | Kontener wszystkich przycisków płatności ekspresowych. |
| `.upcart-express-pay-buttons-row`       | Układ wierszowy przycisków płatności ekspresowych.     |
| `.upcart-express-pay-button`            | Ogólny selektor przycisku płatności ekspresowej.       |
| `.upcart-express-pay-button-shop-pay`   | Konkretny przycisk dla Shop Pay.                       |
| `.upcart-express-pay-button-google-pay` | Konkretny przycisk dla Google Pay.                     |
| `.upcart-express-pay-button-paypal`     | Konkretny przycisk dla PayPal.                         |
| `.upcart-express-pay-button-apple-pay`  | Konkretny przycisk dla Apple Pay.                      |
| `.upcart-express-pay-button-amazon-pay` | Konkretny przycisk dla Amazon Pay.                     |
| `.upcart-express-pay-button-meta-pay`   | Konkretny przycisk dla Meta Pay.                       |

<div id="trust-badges-module">
  ### Moduł znaczków zaufania
</div>

|                             |                                          |
| --------------------------- | ---------------------------------------- |
| **Selektor CSS**            | **Opis**                                 |
| `.upcart-trust-badge`       | Kontener znaczków zaufania.              |
| `.upcart-trust-badge-image` | Element obrazu użyty w znaczku zaufania. |

<div id="additional-notes-module">
  ### Moduł dodatkowych notatek
</div>

|                                                   |                                                       |
| ------------------------------------------------- | ----------------------------------------------------- |
| **Selektor CSS**                                  | **Opis**                                              |
| `.NotesModule_NotesModule__`                      | Kontener dodatkowych notatek.                         |
| `.NotesModule_NotesModule__titleContainer__`      | Kontener tytułu sekcji notatek                        |
| `.NotesModule_NotesModule__dropdownContainer__`   | Tytuł listy rozwijanej sekcji notatek                 |
| `.NotesModule_NotesModule__textModule__ textarea` | Pole wprowadzania niestandardowej notatki do koszyka. |

<div id="upcart-settings-module">
  ## Moduł ustawień Upcart
</div>

<div id="skeleton-selectors">
  ### Selektory szkieletów (skeleton)
</div>

|                                                  |                                                        |
| ------------------------------------------------ | ------------------------------------------------------ |
| **Selektor CSS**                                 | **Opis**                                               |
| `.upcart-skeleton`                               | Ogólna obudowa ładowania szkieletowego koszyka.        |
| `.upcart-product-item-skeleton`                  | Placeholder podczas ładowania produktu.                |
| `.upcart-product-image-skeleton`                 | Placeholder obrazu produktu.                           |
| `.upcart-product-title-skeleton`                 | Placeholder tekstu tytułu produktu.                    |
| `.upcart-product-price-container-skeleton`       | Placeholder obszaru cen.                               |
| `.upcart-product-quantity-skeleton`              | Placeholder kontrolek ilości.                          |
| `.upcart-item-option-skeleton`                   | Placeholder opcji pozycji.                             |
| `.upcart-upsells-module-skeleton`                | Szkielet modułu upselli.                               |
| `.upcart-upsells-title-skeleton`                 | Szkielet tytułu sekcji upselli.                        |
| `.upcart-upsell-item-image-skeleton`             | Szkielet obrazu produktu upsellowego.                  |
| `.upcart-upsell-item-title-skeleton`             | Szkielet tytułu produktu upsellowego.                  |
| `.upcart-upsell-item-price-skeleton`             | Szkielet ceny produktu upsellowego.                    |
| `.upcart-upsells-button-skeleton`                | Szkielet przycisku akcji upsella.                      |
| `.upcart-trust-badge-skeleton`                   | Szkielet kontenera znaczka zaufania.                   |
| `.upcart-trust-badge-image-skeleton`             | Szkielet obrazu znaczka zaufania.                      |
| `.upcart-announcement-skeleton`                  | Szkieletowy placeholder ogłoszeń.                      |
| `.upcart-rewards-skeleton`                       | Szkielet sekcji nagród.                                |
| `.upcart-rewards-message-skeleton`               | Szkielet komunikatów o nagrodach.                      |
| `.upcart-rewards-bar-skeleton`                   | Szkielet paska postępu nagród.                         |
| `.upcart-addons-skeleton`                        | Szkielet sekcji dodatków.                              |
| `.upcart-addons-image-wrapper-skeleton`          | Szkielet obrazu produktu dodatkowego.                  |
| `.upcart-addons-skeleton-text-container`         | Szkielet treści tekstowej w dodatkach.                 |
| `.upcart-discount-code-module-skeleton`          | Szkielet modułu kodu rabatowego.                       |
| `.upcart-discount-code-input-skeleton`           | Szkielet pola kodu rabatowego.                         |
| `.upcart-discount-code-button-skeleton`          | Szkielet przycisku zastosowania kodu rabatowego.       |
| `.upcart-checkout-button-container-skeleton`     | Szkielet obudowy przycisku checkout.                   |
| `.upcart-checkout-button-skeleton`               | Szkielet przycisku checkout.                           |
| `.upcart-express-pay-buttons-container-skeleton` | Szkielet kontenera płatności ekspresowych.             |
| `.upcart-express-pay-button-skeleton`            | Szkielet pojedynczego przycisku płatności ekspresowej. |

<div id="helpful-resources-to-get-started">
  ## **Przydatne zasoby na start:**
</div>

* **[Pierwsze kroki z niestandardowym CSS](/pl/upcart/custom_css):** Dowiedz się, jak bezpiecznie dodawać niestandardowy CSS w Upcart.
* **[Wprowadzenie do personalizacji w Upcart](/pl/upcart/getting_started_with_upcart_customizations):** Zrozum, jak działa personalizacja i od czego zacząć.
* **[Użyj AI do pisania niestandardowego kodu dla Upcart](/pl/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** Uzyskaj pomoc w pisaniu CSS lub JavaScript za pomocą prostych promptów.
* **[Najlepsze praktyki zwiększania konwersji koszyka](/pl/upcart/best_practices_to_increase_upcart_conversions):** Zoptymalizuj wygląd koszyka dzięki sprawdzonym wskazówkom.