Skip to main content

​
Przegląd

Ta sekcja pozwala Ci zmienić wygląd istniejących elementów koszyka lub zastosować style do niestandardowego HTML dodanego przez edytor.

​
Gdzie to znaleźć

Przejdź do:
Upcart > Cart Editor > Settings > Custom CSS
Settings to rząd zakładek; Custom CSS jest jedną z nich, obok Custom HTML. Jeśli nie jest widoczna, znajduje się pod More settings.

​
Jak to działa

Możesz dodać CSS, aby:
  • Stylizować domyślne elementy koszyka
  • Modyfikować wygląd niestandardowego HTML
  • Dostosowywać odstępy, wyrównanie, typografię i więcej
Podczas pisania okienko autouzupełniania będzie podpowiadać prawidłowe selektory Upcart, aby przyspieszyć edycję. Wybranie podpowiedzi automatycznie uzupełni regułę i pomoże Ci ustrukturyzować kod. Jeśli zmiany nie pojawiają się zgodnie z oczekiwaniami, przejrzyj typowe sugestie rozwiązywania problemów, takie jak odświeżenie pamięci podręcznej zarówno w przeglądarce, jak i w edytorze Upcart, sprawdzenie umiejscowienia CSS oraz upewnienie się co do odpowiedniej specyficzności reguł CSS.

​
Używanie selektorów

Upcart udostępnia szeroki zakres niestandardowych selektorów. Kliknij „Show list”, aby zobaczyć wszystkie dostępne opcje. Unikaj używania globalnych selektorów, takich jak body, div czy h3, chyba że są ograniczone przez .upcart-cart, aby zapobiec niezamierzonym zmianom w Twoim sklepie. W sytuacjach, gdy style nie są stosowane poprawnie, rozważ zwiększenie specyficzności CSS lub dodanie !important do reguł CSS. Dzięki temu nadpiszą one wszelkie konfliktujące style. Przykład:
Przykład (bezpieczny selektor):

​
Przykład: stylizacja wiadomości z podziękowaniem

Załóżmy, że dodałeś ten niestandardowy HTML pod przyciskiem checkout:
Bez CSS wiadomość będzie wyglądać zwyczajnie. Aby ją ostylować:

​
Typowe problemy i rozwiązania

​
CSS nie pojawia się na urządzeniach mobilnych

Jeśli Twój niestandardowy tekst lub style nie są widoczne na urządzeniu mobilnym:
  • Odśwież stronę zarówno w edytorze Upcart, jak i w przeglądarce mobilnej, aby wyczyścić wersje z pamięci podręcznej.
  • Upewnij się, że aktywna jest najnowsza opublikowana wersja koszyka.
  • Potwierdź, że CSS jest zapisany na zakładce Custom CSS w Upcart > Cart Editor > Settings.

​
Rozbieżności między edytorem a działającym sklepem

Style wyświetlające się poprawnie w edytorze, ale nie na działającej stronie, mogą wymagać zwiększenia specyficzności selektorów lub dodania !important do kluczowych reguł.

​
Nieprawidłowe użycie selektorów CSS

Zweryfikuj, czy celujesz we właściwą klasę lub ID. Zawsze dołączaj prefiksy takie jak .upcart- dla elementów specyficznych dla Upcart, aby uniknąć niezamierzonych rezultatów. Jeśli styl nie jest stosowany zgodnie z oczekiwaniami, upewnij się, że selektor .thank-you-message precyzyjnie celuje w zamierzony element HTML i sprawdź, czy kod CSS znajduje się na właściwej zakładce (Upcart > Cart Editor > Settings > Custom CSS).
Wsparcie dla dostosowań: Wsparcie Upcart nie może pomóc we wdrażaniu ani debugowaniu niestandardowego CSS. W przypadku zaawansowanej pomocy ze stylizacją zalecamy współpracę z ekspertem Shopify (Shopify Expert). Aby rozwiązać problemy z niestandardowym CSS, zapoznaj się z sekcją typowych problemów, gdzie znajdziesz wskazówki dotyczące rozwiązywania takich kwestii, jak brakujące style na urządzeniach mobilnych, rozbieżności między podglądem w edytorze a działającym sklepem oraz błędne umiejscowienie selektorów.