Skip to main content
Moduł Design pozwala Ci dostosować wygląd koszyka, w tym układ, kolory marki i style przycisków.

​
General

​
Inherit Fonts from Theme (dziedziczenie czcionek z szablonu)

To ustawienie pozwala Upcart używać czcionek zdefiniowanych w ustawieniach szablonu Shopify. Aby zobaczyć swoje bieżące czcionki, otwórz edytor szablonów Shopify i przejdź do sekcji Typography.

​
🚧 Podgląd koszyka 🚧

Czcionki dziedziczone z szablonu nie pojawią się w oknie podglądu Upcart, ale będą wyświetlać się poprawnie w Twoim działającym sklepie.

​
Show Strikethrough Prices (przekreślone ceny)

Włącz to ustawienie, aby pokazywać przekreśloną cenę (znaną też jako Compare At Price) obok każdej pozycji w koszyku. Odzwierciedla to ceny promocyjne, podobnie jak na stronach produktów. Pozycja w koszyku pokazująca przekreśloną cenę pierwotną obok ceny promocyjnej i oszczędności

​
Enable Subtotal Line (wiersz sumy częściowej)

Dodaje do koszyka wiersz sumy częściowej. Włączenie tej opcji ujawnia również pole Subtotal text color w sekcji Colors, dzięki czemu suma częściowa może być stylizowana niezależnie od reszty tekstu koszyka. Gdy ustawienie jest wyłączone, to pole koloru jest ukryte.

​
Cart Width (szerokość koszyka)

Kontroluje szerokość koszyka wysuwanego, ustawianą osobno dla każdego widoku:
  • Desktop — Default lub Wide
  • Mobile — Full (od krawędzi do krawędzi) lub Nearly full (mały odstęp przy krawędzi)

​
Colors

​
Background Color (kolor tła)

Ustawia główny kolor tła koszyka, z wyłączeniem stopki i kart upsell.

​
Cart Accent Color (kolor akcentu koszyka)

Kontroluje kolor tła stopki koszyka i kart produktów upsell. Ustawienia Colors w Upcart z kolorem akcentu koszyka zastosowanym do różowych kart upsell

​
Cart Text Color (kolor tekstu koszyka)

Definiuje kolor całego tekstu koszyka, z wyjątkiem tekstu przycisków i tekstu oszczędności, które są kontrolowane osobno.

​
Savings Text Color (kolor tekstu oszczędności)

Ustawia kolor tekstu oszczędności wyświetlanego pod ceną produktu. Pozycja w koszyku z tekstem kwoty oszczędności wyróżnionym kolorem magenta

​
Subtotal Text Color (kolor tekstu sumy częściowej)

Ustawia kolor wiersza sumy częściowej. To pole pojawia się tylko wtedy, gdy opcja Enable subtotal line jest włączona w sekcji General.

​
🚧 Podgląd koszyka 🚧

Edytor podglądu może nie odzwierciedlać precyzyjnie ostatecznej stylizacji. Szablon Twojego sklepu może zawierać niestandardowy CSS wpływający na rozmiar lub kolor tekstu. Zawsze weryfikuj zmiany w działającym sklepie.

​
Ustawienia przycisków

Upcart oferuje zaawansowane opcje stylizacji przycisków, w tym specyficzne dostosowanie przycisku checkout. Obejmuje to metody modyfikacji CSS oraz integrację z narzędziami brandingowymi Shopify.

​
Corner Radius (zaokrąglenie rogów)

Dostosowuje zaokrąglenie rogów przycisków, od 0 px do 40 px. 0 daje ostre, kwadratowe rogi; 40 to maksymalne zaokrąglenie suwaka. Wartość dotyczy jednocześnie przycisku checkout, przycisku upsell, przycisku rabatu i przycisku upgrade.
Suwak zatrzymuje się na 40 px. Aby uzyskać w pełni pigułkowy kształt przycisku, potrzebujesz niestandardowego CSS — zobacz Zaawansowane dostosowanie CSS poniżej.
Suwak zaokrąglenia rogów ustawiony na 16 pikseli zaokrąglający przycisk checkout

​
Button Color (kolor przycisków)

Ustawia kolor tła wszystkich przycisków w koszyku, w tym:
  • przycisku checkout
  • przycisku upsell „Add to Cart”
  • przycisku rabatu „Apply”
  • przycisku upgrade subskrypcji. Kolor tych przycisków możesz dostosować przez Cart Editor. W sprawie dalszych zaawansowanych dostosowań, takich jak modyfikacje CSS, zapoznaj się z sekcją zaawansowanych dostosowań.

​
Button Text Color (kolor tekstu przycisków)

Określa kolor tekstu używanego we wszystkich przyciskach koszyka.

​
Button Text Hover Color (kolor tekstu przycisku po najechaniu)

Kontroluje kolor tekstu przycisku, gdy klient najedzie na niego myszką. Na przykład, jeśli ustawisz zielony, tekst zmieni kolor na zielony po najechaniu.

​
Show Continue Shopping Button (przycisk kontynuowania zakupów)

Dodaje do koszyka przycisk Continue shopping, pozwalający klientom zamknąć koszyk wysuwany i wrócić do przeglądania bez używania ikony zamykania.

​
Zaawansowane dostosowanie CSS przycisków checkout

W przypadku znaczących zmian designu możesz użyć niestandardowego kodu CSS, aby zmodyfikować przycisk checkout:
  1. W Cart Editor otwórz Settings i wybierz zakładkę Custom CSS.
  2. Użyj odpowiedniego selektora CSS, takiego jak .checkout. Przykładowe fragmenty CSS: Aby utworzyć przycisk w kształcie pigułki:
    Aby dodać czarną ramkę:
    Zastąp .checkout faktyczną klasą CSS Twojego przycisku. Dodatkowa stylizacja obejmuje efekty hover, padding, kolory tekstu lub czcionki.

​
Integracja brandingu Shopify do dostosowania przycisków

Jeśli korzystasz z Shopify, możesz zaktualizować design przycisku checkout przez panel administracyjny Shopify:
  1. Zaloguj się do panelu administracyjnego Shopify.
  2. Przejdź do Settings > Checkout > Customize.
  3. Skorzystaj z opcji brandingu, aby zmodyfikować czcionkę, zaokrąglenie lub kolor dla spójnego designu.
Podgląd koszyka wysuwanego Upcart z przyciskiem Add upsellu i przyciskiem checkout