> ## 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 (V2)

> Ten artykuł przedstawia selektory CSS dostępne w Upcart w wersji 2, zaprojektowane do obsługi niestandardowego stylowania zaktualizowanego wysuwanego koszyka i struktury modułów.

⚠️ **WAŻNA INFORMACJA**

Te selektory dotyczą **wyłącznie wersji 2 (V2)** modułów koszyka Upcart. Jeśli używasz **wersji 1 (V1)**, te selektory nie zadziałają.

W przypadku koszyków V1 zapoznaj się z **[dokumentacją selektorów CSS wersji 1](/pl/upcart/upcart_css_selector_library_v1)**, która obejmuje starszą strukturę modułów i selektory.

Aby sprawdzić, której wersji używasz, otwórz Cart Editor i spójrz na górę menu po lewej stronie. Lista rozwijana **Cart version** pojawia się tam, gdy każdy moduł w koszyku jest na V2; jeśli jej nie widzisz, Twój koszyk nadal ma moduły V1. Więcej informacji o migracji z V1 na V2 znajdziesz w [przewodniku migracji do V2.0](/pl/upcart/upcart_v20_migration_guide).

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

Poniższe selektory działają z wersją 2 modułów koszyka Upcart. V2 wprowadza ustrukturyzowany system nazewnictwa z prefiksami klas **public** i **internal**.

<div id="important-guidelines-for-v2-selectors">
  ## **Ważne wytyczne dotyczące selektorów V2**
</div>

⚠️ **Do personalizacji używaj wyłącznie selektorów publicznych**

* **Selektory publiczne** (z prefiksem `upcart-public-`) są częścią stabilnego API i można ich bezpiecznie używać do niestandardowego stylowania
* **Selektory wewnętrzne** (z prefiksem `upcart-internal-`) są zarezerwowane do użytku wewnętrznego i mogą się zmienić bez powiadomienia

✅ **RÓB TAK:** Używaj publicznych nazw klas do stylowania

```
/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}
```

❌ **NIE RÓB TAK:** Nie nadpisuj wewnętrznych nazw klas ani nie używaj głębokich selektorów

```
/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}
```

#

<div id="css-selectors">
  # Selektory CSS
</div>

<div id="general-components">
  ### **Komponenty ogólne**
</div>

|                                                          |                                                          |
| -------------------------------------------------------- | -------------------------------------------------------- |
| **Selektor CSS**                                         | **Opis**                                                 |
| `.upcart-public-skeleton`                                | Ogólna obudowa ładowania szkieletowego koszyka.          |
| `.upcart-public-component__button`                       | Ogólny komponent przycisku używany w różnych modułach.   |
| `.upcart-public-component-loader`                        | Komponent wskaźnika ładowania (spinner).                 |
| `.upcart-public-component-tag`                           | Obudowa komponentu etykiety (tag).                       |
| `.upcart-public-component-tag__icon`                     | Ikona wewnątrz etykiety.                                 |
| `.upcart-public-component-tag__text`                     | Treść tekstowa etykiety.                                 |
| `.upcart-public-component-tag__remove-button`            | Przycisk usuwania („x”) wewnątrz usuwalnej etykiety.     |
| `.upcart-public-component-collapse__dropdown-container`  | Kontener zwijanych sekcji rozwijanych.                   |
| `.upcart-public-component-collapse__expand-icon`         | Ikona wskazująca stan rozwinięcia/zwinięcia.             |
| `.upcart-public-component-carousel__container`           | Zewnętrzna obudowa karuzeli.                             |
| `.upcart-public-component-carousel__window`              | Okno przycinające, w którym przewijają się slajdy.       |
| `.upcart-public-component-carousel__track`               | Ruchomy pas mieszczący slajdy.                           |
| `.upcart-public-component-carousel__slide`               | Pojedynczy slajd karuzeli.                               |
| `.upcart-public-component-carousel__button`              | Przycisk strzałki poprzedni/następny.                    |
| `.upcart-public-component-progress-bar`                  | Zwykły (niesegmentowany) komponent paska postępu.        |
| `.upcart-public-component-progress-bar__track`           | Tor zwykłego paska postępu.                              |
| `.upcart-public-component-progress-bar__fill`            | Wypełniona część zwykłego paska postępu.                 |
| `.upcart-public-component-progress-bar__milestone`       | Znacznik kamienia milowego na zwykłym pasku postępu.     |
| `.upcart-public-component-progress-bar__milestone-icon`  | Ikona przy kamieniu milowym na zwykłym pasku postępu.    |
| `.upcart-public-component-progress-bar__milestone-label` | Etykieta przy kamieniu milowym na zwykłym pasku postępu. |

#

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

|                                            |                                                   |
| ------------------------------------------ | ------------------------------------------------- |
| **Selektor CSS**                           | **Opis**                                          |
| `.upcart-public-header`                    | Główny kontener nagłówka koszyka.                 |
| `.upcart-public-header__logo`              | Obraz logo w nagłówku koszyka.                    |
| `.upcart-public-header__close-button`      | Przycisk służący do zamykania wysuwanego koszyka. |
| `.upcart-public-header__close-button-icon` | Ikona wyświetlana wewnątrz przycisku zamykania.   |

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

|                                        |                                       |
| -------------------------------------- | ------------------------------------- |
| **Selektor CSS**                       | **Opis**                              |
| `.upcart-public-announcement`          | Baner lub sekcja ogłoszeń w koszyku.  |
| `.upcart-public-announcement-skeleton` | Szkieletowe ładowanie paska ogłoszeń. |

<div id="recommendation-and-upsell-modules">
  ### **Moduły rekomendacji i upselli**
</div>

|                                                          |                                                           |
| -------------------------------------------------------- | --------------------------------------------------------- |
| **Selektor CSS**                                         | **Opis**                                                  |
| `.upcart-public-upsell`                                  | Główna obudowa modułu upselli.                            |
| `.upcart-public-upsell__header`                          | Nagłówek sekcji upselli.                                  |
| `.upcart-public-upsell__title`                           | Tekst tytułu sekcji upselli.                              |
| `.upcart-public-upsell__shop-now-button`                 | Przycisk Shop Now przy produktach upsellowych.            |
| `.upcart-public-upsell__vertical-layout-wrapper`         | Obudowa pionowego układu upselli.                         |
| `.upcart-public-component-upsell-tile`                   | Układ karty każdego produktu upsellowego/rekomendowanego. |
| `.upcart-public-component-upsell-tile__image-container`  | Kontener obrazu produktu upsellowego.                     |
| `.upcart-public-component-upsell-tile__image`            | Obraz produktu upsellowego.                               |
| `.upcart-public-component-upsell-tile__info`             | Sekcja informacyjna kafelka upsella.                      |
| `.upcart-public-component-upsell-tile__title-link`       | Obudowa linku tytułu produktu.                            |
| `.upcart-public-component-upsell-tile__title`            | Tytuł produktu upsellowego.                               |
| `.upcart-public-component-upsell-tile__rating-row`       | Wiersz zawierający oceny produktu.                        |
| `.upcart-public-component-upsell-tile__stars`            | Wyświetlanie oceny w gwiazdkach.                          |
| `.upcart-public-component-upsell-tile__star--partial`    | Częściowa gwiazdka dla ocen ułamkowych.                   |
| `.upcart-public-component-upsell-tile__reviews`          | Wyświetlanie liczby recenzji.                             |
| `.upcart-public-component-upsell-tile__price-row`        | Wiersz zawierający informacje o cenie.                    |
| `.upcart-public-component-upsell-tile__price-compare-at` | Pierwotna (przekreślona) cena upsella.                    |
| `.upcart-public-component-upsell-tile__price`            | Bieżąca cena produktu upsellowego.                        |
| `.upcart-public-component-upsell-tile__variant-row`      | Wiersz zawierający wybór wariantu.                        |
| `.upcart-public-upsell__skeleton`                        | Szkieletowy placeholder modułu upselli.                   |
| `.upcart-public-upsell__skeleton-title`                  | Szkielet tytułu sekcji upselli.                           |
| `.upcart-public-upsell__skeleton-image`                  | Szkielet obrazu produktu upsellowego.                     |
| `.upcart-public-upsell__skeleton-product-title`          | Szkielet tytułu produktu upsellowego.                     |
| `.upcart-public-upsell__skeleton-product-price`          | Szkielet ceny produktu upsellowego.                       |

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

|                                        |                                                       |
| -------------------------------------- | ----------------------------------------------------- |
| **Selektor CSS**                       | **Opis**                                              |
| `.upcart-public-notes`                 | Główny kontener sekcji notatek.                       |
| `.upcart-public-notes__text-container` | Kontener pola tekstowego notatek.                     |
| `.upcart-public-notes__textarea`       | Pole wprowadzania niestandardowej notatki do koszyka. |

<div id="discount-code-module">
  ### **Moduł kodu rabatowego**
</div>

|                                                 |                                                              |
| ----------------------------------------------- | ------------------------------------------------------------ |
| **Selektor CSS**                                | **Opis**                                                     |
| `.upcart-public-discount-code`                  | Główny kontener sekcji kodu rabatowego.                      |
| `.upcart-public-discount-code__form`            | Obudowa formularza wprowadzania kodu rabatowego.             |
| `.upcart-public-discount-code__input-wrapper`   | Obudowa pola kodu rabatowego.                                |
| `.upcart-public-discount-code__input`           | Pole do wprowadzania kodów rabatowych.                       |
| `.upcart-public-discount-code__suffix`          | Element sufiksu pola wprowadzania.                           |
| `.upcart-public-discount-code__error`           | Wyświetlanie komunikatu o błędzie dla nieprawidłowych kodów. |
| `.upcart-public-discount-code__button`          | Przycisk zastosowania kodu rabatowego.                       |
| `.upcart-public-discount-code__skeleton`        | Szkieletowy placeholder modułu kodu rabatowego.              |
| `.upcart-public-discount-code__skeleton-input`  | Szkielet pola kodu rabatowego.                               |
| `.upcart-public-discount-code__skeleton-button` | Szkielet przycisku zastosowania kodu rabatowego.             |

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

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

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

|                                                                                  |                                                   |
| -------------------------------------------------------------------------------- | ------------------------------------------------- |
| **Selektor CSS**                                                                 | **Opis**                                          |
| `.upcart-public-rewards`                                                         | Główny kontener sekcji nagród.                    |
| `.upcart-public-rewards__message`                                                | Wyświetla komunikaty o postępie dotyczące nagród. |
| `.upcart-public-rewards__bar`                                                    | Kontener paska postępu nagród.                    |
| `.upcart-public-component-segmented-progress-bar`                                | Komponent segmentowanego paska postępu.           |
| `.upcart-public-component-segmented-progress-bar__segments-container`            | Kontener wszystkich segmentów paska postępu.      |
| `.upcart-public-component-segmented-progress-bar__segment`                       | Pojedynczy segment paska postępu.                 |
| `.upcart-public-component-segmented-progress-bar__segment-fill`                  | Wypełniona część segmentu paska postępu.          |
| `.upcart-public-component-segmented-progress-bar__milestone`                     | Znacznik kamienia milowego na pasku postępu.      |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom`             | Kamień milowy umieszczony na dole.                |
| `.upcart-public-component-segmented-progress-bar__milestone--top`                | Kamień milowy umieszczony na górze.               |
| `.upcart-public-component-segmented-progress-bar__milestone--middle`             | Kamień milowy umieszczony pośrodku.               |
| `.upcart-public-component-segmented-progress-bar__milestone-icon`                | Ikona wyświetlana przy kamieniu milowym.          |
| `.upcart-public-component-segmented-progress-bar__milestone-label`               | Tekst etykiety kamienia milowego.                 |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right`  | Etykieta kamienia milowego wyrównana do prawej.   |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | Etykieta kamienia milowego wyśrodkowana.          |
| `.upcart-public-rewards__skeleton`                                               | Szkieletowy kontener sekcji nagród.               |
| `.upcart-public-rewards__skeleton-message`                                       | Szkielet komunikatu o postępie nagród.            |
| `.upcart-public-rewards__skeleton-bar`                                           | Szkielet paska postępu nagród.                    |

<div id="cart-items-module">
  ### **Moduł pozycji koszyka**
</div>

|                                                                   |                                                         |
| ----------------------------------------------------------------- | ------------------------------------------------------- |
| **Selektor CSS**                                                  | **Opis**                                                |
| `.upcart-public-cart-items`                                       | Główna obudowa listy pozycji koszyka.                   |
| `.upcart-public-cart-item`                                        | Obudowa pojedynczej pozycji koszyka.                    |
| `.upcart-public-cart-items-skeleton__content`                     | Szkieletowe ładowanie pozycji koszyka.                  |
| `.upcart-public-component-product-tile`                           | Obudowa pojedynczej pozycji produktu w koszyku.         |
| `.upcart-public-component-product-tile__content`                  | Obszar treści kafelka produktu.                         |
| `.upcart-public-component-product-tile__image-wrapper`            | Obudowa obrazu produktu.                                |
| `.upcart-public-component-product-tile__image`                    | Obraz produktu w koszyku.                               |
| `.upcart-public-component-product-tile__info`                     | Sekcja informacyjna kafelka produktu.                   |
| `.upcart-public-component-product-tile__header`                   | Sekcja nagłówka kafelka produktu.                       |
| `.upcart-public-component-product-tile__product-title`            | Nazwa produktu w koszyku.                               |
| `.upcart-public-component-product-tile__title-link`               | Link obejmujący tytuł produktu.                         |
| `.upcart-public-component-product-tile__remove-button`            | Przycisk usuwania produktu z koszyka.                   |
| `.upcart-public-component-product-tile__variant`                  | Wyświetlanie informacji o wariancie.                    |
| `.upcart-public-component-product-tile__properties`               | Obudowa dodatkowych metadanych produktu.                |
| `.upcart-public-component-product-tile__bundle`                   | Sekcja informacji o pakiecie (bundle).                  |
| `.upcart-public-component-product-tile__product-pricing`          | Sekcja cen kafelka produktu.                            |
| `.upcart-public-component-product-tile__price-compare-at`         | Pierwotna (przekreślona) cena.                          |
| `.upcart-public-component-product-tile__price`                    | Cena końcowa pokazywana klientowi.                      |
| `.upcart-public-component-product-tile__price-group`              | Obudowa ceny i ceny porównawczej.                       |
| `.upcart-public-component-product-tile__savings`                  | Konkretna oszczędność dla pozycji w koszyku.            |
| `.upcart-public-component-product-tile__controls`                 | Sekcja kontrolek (ilość itd.).                          |
| `.upcart-public-component-product-tile__quantity-selector`        | Obudowa selektora ilości.                               |
| `.upcart-public-component-product-tile__quantity-minus`           | Przycisk zmniejszania ilości.                           |
| `.upcart-public-component-product-tile__quantity-plus`            | Przycisk zwiększania ilości.                            |
| `.upcart-public-component-product-tile__discount-codes`           | Kody rabatowe zastosowane do pozycji.                   |
| `.upcart-public-component-product-tile__subscription-upgrade`     | Sekcja ulepszenia subskrypcji.                          |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | Przycisk stosujący ulepszenie subskrypcji.              |
| `.upcart-public-component-product-tile__select-wrapper`           | Obudowa listy rozwijanej.                               |
| `.upcart-public-component-product-tile__select`                   | Element listy rozwijanej.                               |
| `.upcart-public-product-properties__subscription`                 | Wyświetla szczegóły subskrypcji dla pozycji.            |
| `.upcart-public-product-properties__item`                         | Pojedyncza właściwość produktu.                         |
| `.upcart-public-product-properties__link`                         | Link w obrębie właściwości produktu.                    |
| `.upcart-public-cart-items__key-value-pair`                       | Wyświetlanie par klucz-wartość dla właściwości pozycji. |
| `.upcart-public-bundle-properties`                                | Kontener właściwości pakietu.                           |
| `.upcart-public-bundle-properties__variant-title`                 | Tytuł wariantu dla pozycji pakietu.                     |
| `.upcart-public-bundle-properties__header`                        | Nagłówek sekcji właściwości pakietu.                    |
| `.upcart-public-bundle-properties__item-components`               | Kontener komponentów pozycji pakietu.                   |
| `.upcart-public-bundle-properties__item-component-row`            | Wiersz każdego komponentu pozycji pakietu.              |
| `.upcart-public-bundle-properties__image-wrapper`                 | Obudowa obrazu pozycji pakietu.                         |
| `.upcart-public-bundle-properties__content`                       | Obszar treści pozycji pakietu.                          |
| `.upcart-public-bundle-properties__product-title`                 | Tytuł produktu pozycji pakietu.                         |

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

|                                                |                                          |
| ---------------------------------------------- | ---------------------------------------- |
| **Selektor CSS**                               | **Opis**                                 |
| `.upcart-public-addons`                        | Główny kontener sekcji dodatków.         |
| `.upcart-public-addons__image-wrapper`         | Obudowa obrazu dodatku.                  |
| `.upcart-public-addons__content-wrapper`       | Obudowa treści informacji o dodatku.     |
| `.upcart-public-addons__content-title-wrapper` | Obudowa tytułu dodatku.                  |
| `.upcart-public-addons__content-title`         | Tytuł produktu dodatkowego.              |
| `.upcart-public-addons__content-price`         | Sekcja ceny dodatku.                     |
| `.upcart-public-addons__compare-at-price`      | Pierwotna (przekreślona) cena dodatku.   |
| `.upcart-public-addons__price`                 | Bieżąca cena produktu dodatkowego.       |
| `.upcart-public-addons__content-description`   | Opis produktu dodatkowego.               |
| `.upcart-public-addons__toggle-wrapper`        | Obudowa przełącznika dodatku.            |
| `.upcart-public-addons__toggle`                | Przełącznik dodawania/usuwania dodatku.  |
| `.upcart-public-addons__toggle-switch`         | Element przełącznika.                    |
| `.upcart-public-addons__toggle-slider`         | Element suwaka przełącznika.             |
| `.upcart-public-addons__skeleton`              | Szkieletowy placeholder sekcji dodatków. |
| `.upcart-public-addons__skeleton-image`        | Szkielet obrazu produktu dodatkowego.    |
| `.upcart-public-addons__skeleton-text`         | Szkielet treści tekstowej w dodatkach.   |

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

|                                              |                                             |
| -------------------------------------------- | ------------------------------------------- |
| **Selektor CSS**                             | **Opis**                                    |
| `.upcart-public-express-payments__container` | Kontener przycisków płatności ekspresowych. |

<div id="cart-summary-module">
  ### **Moduł podsumowania koszyka**
</div>

|                                               |                                           |
| --------------------------------------------- | ----------------------------------------- |
| **Selektor CSS**                              | **Opis**                                  |
| `.upcart-public-cart-summary`                 | Główny kontener podsumowania koszyka.     |
| `.upcart-public-cart-summary__discount-codes` | Kontener kodów rabatowych w podsumowaniu. |
| `.upcart-public-cart-summary__discount-label` | Etykieta sekcji rabatów.                  |
| `.upcart-public-cart-summary__slide-codes`    | Przesuwany kontener kodów rabatowych.     |
| `.upcart-public-cart-summary__total-discount` | Wyświetlanie łącznej kwoty rabatu.        |

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

##

##