⚠️ 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, 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.

Przegląd

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.

UWAGA

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. W sprawie niestandardowych rozwiązań kodowych zalecamy konsultację z ekspertem Shopify. Zobacz ekspertów Shopify

Jak korzystać z selektorów CSS Upcart

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.

Co warto wiedzieć przed dodaniem CSS

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.

Lista kontrolna personalizacji CSS:

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.

Ważne wytyczne dotyczące selektorów V2

⚠️ 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;   
}

Selektory CSS

Komponenty ogólne


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.

Moduł nagłówka


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.

Moduł ogłoszeń


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

Moduły rekomendacji i upselli


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.

Moduł notatek


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.

Moduł kodu rabatowego


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.

Moduł znaczków zaufania


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

Moduł nagród progowych


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.

Moduł pozycji koszyka


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.

Moduł dodatków (Add-ons)


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.

Moduł płatności ekspresowych


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

Moduł podsumowania koszyka


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.

Przydatne zasoby na start:

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

Dokumentacja funkcji koszyka

Dokumentacja CSS

Przepisy na stylizację

Przepisy na funkcjonalność

Szablony niestandardowe

Publiczne API Upcart

Biblioteka selektorów CSS Upcart (V2)

Przegląd

UWAGA

Jak korzystać z selektorów CSS Upcart

Co warto wiedzieć przed dodaniem CSS

Lista kontrolna personalizacji CSS:

Ważne wytyczne dotyczące selektorów V2

Selektory CSS

Komponenty ogólne

Moduł nagłówka

Moduł ogłoszeń

Moduły rekomendacji i upselli

Moduł notatek

Moduł kodu rabatowego

Moduł znaczków zaufania

Moduł nagród progowych

Moduł pozycji koszyka

Moduł dodatków (Add-ons)

Moduł płatności ekspresowych

Moduł podsumowania koszyka

Przydatne zasoby na start:

​Przegląd

​UWAGA

​

​Jak korzystać z selektorów CSS Upcart

​Co warto wiedzieć przed dodaniem CSS

​Lista kontrolna personalizacji CSS:

​Ważne wytyczne dotyczące selektorów V2

​

​Selektory CSS

​Komponenty ogólne

​

​Moduł nagłówka

​Moduł ogłoszeń

​Moduły rekomendacji i upselli

​Moduł notatek

​Moduł kodu rabatowego

​Moduł znaczków zaufania

​Moduł nagród progowych

​Moduł pozycji koszyka

​Moduł dodatków (Add-ons)

​Moduł płatności ekspresowych

​Moduł podsumowania koszyka

​Przydatne zasoby na start:

​

​

Przegląd

UWAGA

Jak korzystać z selektorów CSS Upcart

Co warto wiedzieć przed dodaniem CSS

Lista kontrolna personalizacji CSS:

Ważne wytyczne dotyczące selektorów V2

Selektory CSS

Komponenty ogólne

Moduł nagłówka

Moduł ogłoszeń

Moduły rekomendacji i upselli

Moduł notatek

Moduł kodu rabatowego

Moduł znaczków zaufania

Moduł nagród progowych

Moduł pozycji koszyka

Moduł dodatków (Add-ons)

Moduł płatności ekspresowych

Moduł podsumowania koszyka

Przydatne zasoby na start: