Skip to main content

​
Przegląd

Moduł nagłówka pozwala Ci dostosować górną sekcję koszyka Upcart, dodając logo Twojej marki, tekst tytułu, układ, kolor tła i przycisk zamykania. Wizualne kontrolki ułatwiają stylizację nagłówka bez konieczności definiowania dokładnych rozmiarów w pikselach.

​
Ustawienia modułu nagłówka

​
General

Height przełącza między Slim a Tall, aby kontrolować przestrzeń pionową. Bottom border to None lub Thin. Background color przyjmuje kod hex lub wbudowany selektor kolorów i obsługuje przezroczystość. Ustawienia General modułu nagłówka Upcart z kontrolkami wysokości i koloru tła obok podglądu koszyka

​
Tytuł

Istnieją trzy sposoby zdefiniowania tytułu nagłówka koszyka wysuwanego: odziedziczenie domyślnej stylizacji tytułów z szablonu, wyświetlenie logo sklepu lub utworzenie w pełni niestandardowych stylów tekstu. Każda metoda oferuje elastyczność w zależności od Twoich potrzeb projektowych. Opcje tytułu modułu nagłówka Upcart: dziedziczenie tytułów szablonu, logo marki lub niestandardowe style tekstu

​
Dziedziczenie z tytułów szablonu

Ta opcja używa domyślnych stylów nagłówków Twojego szablonu, pomagając zachować wizualną spójność designu z resztą Twojej strony. Możesz dodać własny tytuł, używając pola Text, i dynamicznie uwzględnić liczbę pozycji koszyka za pomocą {{cart_quantity}}. Wyrównanie tekstu można ustawić na Side lub Center, a odpowiedni poziom nagłówka H2, H3 lub H4 możesz wybrać w oparciu o strukturę treści swojego sklepu. Jeśli wolisz użyć logo marki zamiast tekstu, możesz przesłać logo swojego sklepu bezpośrednio w tej sekcji. Wybierz wyrównanie logo do Side lub Center i skaluj je suwakiem Logo size, który działa w zakresie od 14 px do 48 px. Nie ma wymuszonego limitu na przesyłany plik, ale zaleca się użycie pliku PNG dla czystej przezroczystości i ostrych krawędzi. JPEG-i są również obsługiwane, ale mogą zawierać szum tła lub pogorszyć detale logo. Ze względu na wydajność staraj się utrzymywać zoptymalizowane rozmiary plików.
  • Zalecamy używanie pliku PNG dla najlepszej jakości i obsługi przezroczystych teł.
  • JPEG-i też działają, ale mogą nie wyglądać tak czysto, zwłaszcza jeśli Twoje logo ma tło lub drobne detale.

​
Definiowanie stylów tekstu

Wybranie opcji Text daje Ci pełną kontrolę nad stylizacją tytułu niezależnie od szablonu Twojego sklepu. Możesz wprowadzić dowolny niestandardowy tytuł i uwzględnić {{cart_quantity}} dla dynamicznych aktualizacji. Wyrównanie tekstu można ustawić na Side lub Center, z opcjami zmiany grubości czcionki na Normal, Semibold lub Bold. Rozmiar czcionki można regulować od 14 px do 48 px za pomocą wizualnego suwaka, a opcjonalnie możesz zastosować nadpisanie koloru tekstu.

​
Przycisk zamykania

Przycisk zamykania można dostosować, aby pasował do designu Twojego sklepu. Location umieszcza go po lewej (Left) lub prawej (Right) stronie koszyka. Background, Icon i Border przyjmują po jednym kolorze plus osobny kolor hover. Icon size to Small, Medium lub Large, a Icon thickness to Normal lub Thick. Border to None, Thin, Normal lub Thick.
Pola koloru ramki i koloru ramki po najechaniu są wyłączone, gdy Border jest ustawiony na None. Najpierw wybierz szerokość ramki, a potem ustaw jej kolory.
Ustawienia przycisku zamykania modułu nagłówka Upcart dotyczące lokalizacji, kolorów, rozmiaru ikony i ramki

​
Niestandardowy szablon

W wersji 2.0 modułu nagłówka pod ustawieniami pojawia się edytor kodu Custom template, z pojedynczym szablonem Full obejmującym cały moduł. Używa on JSX opartego na React, a najpierw musisz zaznaczyć Access custom templates w Settings > Cart settings > Advanced Settings w Cart Editor. Zobacz Konfigurowanie niestandardowego szablonu.

​
Wskazówki

  • Chcesz precyzyjnych odstępów lub rozmiarów? Użyj niestandardowego CSS dla pełnej kontroli wykraczającej poza suwaki, świetne do dokładnych marginesów, paddingów lub skalowania logo.
  • Testuj na desktopie i urządzeniu mobilnym. Elementy nagłówka, takie jak tekst, logo i przyciski, mogą wyświetlać się różnie na różnych rozmiarach ekranów
  • Używaj właściwych poziomów nagłówków. Wybór odpowiedniego nagłówka (H2, H3, H4) pomaga w dostępności i SEO. Dopasuj strukturę treści swojego sklepu.
Aby poznać więcej sposobów personalizacji koszyka, zajrzyj do naszej dokumentacji pomocy Upcart. Jeśli potrzebujesz niestandardowych zmian, zalecamy kontakt z ekspertem Shopify.