Skip to main content
Gdy wbudowane ustawienia designu nie wystarczają, dodaj własny niestandardowy CSS, aby stylizować koszyk.

​
Gdzie go dodać

W edytorze koszyka otwórz Cart settings → Custom CSS. Twój CSS stosuje się do całego koszyka i jest ładowany po bazowych stylach koszyka, więc twoje reguły mają pierwszeństwo.

​
Celuj tylko w klasy publiczne

Stylizuj koszyk, używając jego publicznych klas cart-external-*. Edytor je autouzupełnia i ostrzega przed pozostałymi:
  • cart-external-*: publiczny, wspierany cel. Używaj ich. Nie niosą własnej stylizacji, więc istnieją wyłącznie po to, aby twój CSS miał się o co zaczepić.
  • cart-internal-*: wewnętrzna hydraulika koszyka, w której mieszka cała jego wbudowana stylizacja. Edytor oznacza selektory ich dotyczące jako błędy. Nie są zmieniane pochopnie, ponieważ zależy od nich każdy istniejący koszyk, ale należą do koszyka, a nie do kontraktu z tobą. Stylizuj zamiast tego przez bliźniaczą klasę cart-external-*.
  • Inne klasy cart-*, których edytor nie rozpoznaje, są oznaczane jako ostrzeżenia.
Klasy cart-internal-* zobaczysz w strukturze, w tym w domyślnym szablonie niestandardowym każdego bloku. To normalne: to one nadają blokowi jego wbudowany wygląd. Ta zasada dotyczy selektorów, które piszesz w tym panelu, a nie nazw klas renderowanych przez koszyk.Jeśli piszesz szablon niestandardowy zmieniający strukturę DOM bloku, zobacz Stylizowanie szablonu niestandardowego, aby dowiedzieć się, które nazwy klas zachować, a które porzucić.

​
Shadow DOM: koszyk jest samodzielny

W sklepie cały koszyk renderuje się wewnątrz własnego shadow DOM. Oznacza to:
  • CSS twojego motywu nie może przeciekać do koszyka, a CSS koszyka nie może przeciekać na zewnątrz, więc twój niestandardowy CSS jest automatycznie ograniczony do koszyka i nie będzie kolidować z resztą witryny.
  • Twoje selektory powinny odwoływać się do elementów i klas wewnątrz koszyka. Selektory wycelowane w elementy strony poza koszykiem nie sięgną do środka.
Ta sama granica dotyczy JavaScriptu: document.querySelector też nie widzi wnętrza szuflady. Skrypt sięgający po element koszyka musi przejść przez shadowRoot i celuje w te same klasy cart-external-*.

​
Kiedy zamiast tego użyć ustawień designu

Dla kolorów, zaokrągleń, odstępów i szerokości wbudowane ustawienia designu są prostsze i bezpieczniejsze, więc sięgaj po niestandardowy CSS tylko tam, gdzie one nie sięgają.

​
Co dalej