Skip to main content
⚠️ Ważna informacja Przykładowe dostosowanie w tym dokumencie działa tylko z V1.0 modułów koszyka Upcart. Jeśli niedawno zaktualizowałeś koszyk do wersji 2, te kody dostosowań nie będą działać. Będziesz musiał użyć nowych selektorów dla wersji 2 podanych w przewodniku migracji. Zapoznaj się z pozostałą dokumentacją dostosowań, aby znaleźć rozwiązania dla V2.0.

Przegląd

Upcart daje Ci pełną kontrolę nad modyfikowaniem wyglądu i zachowania koszyka za pomocą Custom HTML, Custom CSS i JavaScript. Te narzędzia pozwalają Ci dodawać nowe funkcje, stylizować koszyk pod Twoją markę lub wprowadzać logikę usprawniającą działanie koszyka. Ten przewodnik omawia podstawy każdego z nich i pokazuje, jak zacząć. Każda sekcja zawiera krótki wizualny przykład, który pomoże Ci zrozumieć, jak zmiany wyglądają w praktyce.
Zanim zaczniesz, koniecznie przejrzyj politykę dostosowań Upcart, aby wiedzieć, co jest, a co nie jest wspierane przez nasz zespół.

Dodawanie treści za pomocą HTML

HTML służy do dodawania statycznych treści, takich jak tekst, banery czy przyciski, do Twojego koszyka. Możesz wybrać spośród wielu lokalizacji HTML w edytorze Custom HTML (np. nad przyciskiem checkout, na dole koszyka, między pozycjami). Typowe zastosowania:
  • Dodawanie niestandardowych wiadomości
  • Wstawianie zastrzeżeń prawnych lub linków do polityk
  • Wyróżnianie terminów wysyłki lub informacji o dostawie
Przykład:
Edytor Custom HTML w Upcart dodający wiadomość z podziękowaniem nad przyciskiem checkout

Dodawanie logiki za pomocą JavaScript

JavaScript kontroluje zachowanie i logikę koszyka. Możesz go użyć do pokazywania lub ukrywania elementów, warunkowego stosowania stylizacji lub reagowania na zmiany koszyka w czasie rzeczywistym. Kod owijasz w tag <script> i umieszczasz w Custom HTML > Scripts (Before Load) lub Above Announcements, w zależności od tego, kiedy ma się uruchamiać. Przykład: Ograniczenie koszyka do jednego upsellu naraz:
Uwaga dotycząca starszych wersji: callbacki window.upcartOnItemRemoved, window.upcartOnAddUpsell i window.upcartOnCartLoaded nadal działają, ale są przestarzałe i logują ostrzeżenia w konsoli. Dla wszystkich nowych skryptów używaj upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart i upcartSubscribeCartLoaded.
Edytor Custom HTML Scripts Before Load w Upcart z JavaScriptem ukrywającym moduł upselli
🔧 Uwaga dla deweloperów:
Upcart udostępnia pełną dokumentację Public API wymieniającą wszystkie funkcje, zmienne i wzorce najlepszych praktyk dostępne dla zaawansowanych dostosowań. Zalecamy jej przejrzenie przy budowaniu bardziej złożonych skryptów lub integracji.

Stylizacja koszyka za pomocą CSS

CSS kontroluje wygląd elementów w Twoim koszyku. Używaj go do dostosowywania odstępów, kolorów, rozmiarów czcionek lub ukrywania niechcianych elementów. Custom CSS to jedna z zakładek w Settings (pod More settings, jeśli rząd zakładek się nie mieści). Typowe zastosowania:
  • Zmiana kolorów tytułu produktu lub przycisków
  • Dostosowanie rozmiaru czcionki lub wyrównania
  • Dodanie odstępów między sekcjami
Przykład: zmiana koloru tytułu upsellu w V1.0:
Edytor Custom CSS w Upcart stylizujący kolor tytułu upsellu z potwierdzeniem zapisania zmian

Dodatkowe zasoby

Chcesz poprawić swoje umiejętności HTML, CSS lub JavaScript? Sprawdź te darmowe narzędzia:

Wsparcie dla dostosowań

Zespół wsparcia Upcart nie może pomóc we wdrażaniu niestandardowego kodu. Przy bardziej zaawansowanych zmianach zalecamy zatrudnienie eksperta Shopify.