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

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

Biblioteka selektorów CSS

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.

Ustawienia ogólne

Moduł Design


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.

Moduł nagłówka


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.

Ustawienia treści (Body)

Moduł ogłoszeń


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

Moduł nagród


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.

Moduł rekomendacji


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.

Moduł ulepszeń subskrypcji


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.

Moduł upselli


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.

Ustawienia produktów


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.

Moduł dodatków (Add-ons)


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.

Moduł kodów rabatowych

Wiersz oszczędności


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.

Moduł płatności ekspresowych

Uwaga

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.


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.

Moduł znaczków zaufania


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

Moduł dodatkowych notatek


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.

Moduł ustawień Upcart

Selektory szkieletów (skeleton)


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.

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.

Pierwsze kroki

Moduły koszyka

Ustawienia koszyka

Przyklejony przycisk koszyka

Multicart

Personalizacje

Analityka

Integracje i kompatybilność

Rozliczenia i konto

Rozwiązywanie problemów

Biblioteka selektorów CSS Upcart (V1)

Przegląd

Uwaga

Jak korzystać z selektorów CSS Upcart

Co warto wiedzieć przed dodaniem CSS

Lista kontrolna personalizacji CSS:

Biblioteka selektorów CSS

Ustawienia ogólne

Moduł Design

Moduł nagłówka

Ustawienia treści (Body)

Moduł ogłoszeń

Moduł nagród

Moduł rekomendacji

Moduł ulepszeń subskrypcji

Moduł upselli

Ustawienia produktów

Ustawienia stopki

Moduł dodatków (Add-ons)

Moduł kodów rabatowych

Wiersz oszczędności

Moduł płatności ekspresowych

Uwaga

Moduł znaczków zaufania

Moduł dodatkowych notatek

Moduł ustawień Upcart

Selektory szkieletów (skeleton)

Przydatne zasoby na start:

​Przegląd

​Uwaga

​Jak korzystać z selektorów CSS Upcart

​Co warto wiedzieć przed dodaniem CSS

​Lista kontrolna personalizacji CSS:

​Biblioteka selektorów CSS

​Ustawienia ogólne

​Moduł Design

​Moduł nagłówka

​Ustawienia treści (Body)

​Moduł ogłoszeń

​Moduł nagród

​Moduł rekomendacji

​Moduł ulepszeń subskrypcji

​Moduł upselli

​Ustawienia produktów

​Ustawienia stopki

​Moduł dodatków (Add-ons)

​Moduł kodów rabatowych

​Wiersz oszczędności

​Moduł płatności ekspresowych

​Uwaga

​Moduł znaczków zaufania

​Moduł dodatkowych notatek

​Moduł ustawień Upcart

​Selektory szkieletów (skeleton)

​Przydatne zasoby na start:

Przegląd

Uwaga

Jak korzystać z selektorów CSS Upcart

Co warto wiedzieć przed dodaniem CSS

Lista kontrolna personalizacji CSS:

Biblioteka selektorów CSS

Ustawienia ogólne

Moduł Design

Moduł nagłówka

Ustawienia treści (Body)

Moduł ogłoszeń

Moduł nagród

Moduł rekomendacji

Moduł ulepszeń subskrypcji

Moduł upselli

Ustawienia produktów

Ustawienia stopki

Moduł dodatków (Add-ons)

Moduł kodów rabatowych

Wiersz oszczędności

Moduł płatności ekspresowych

Uwaga

Moduł znaczków zaufania

Moduł dodatkowych notatek

Moduł ustawień Upcart

Selektory szkieletów (skeleton)

Przydatne zasoby na start: