> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pierwsze kroki z dostosowaniami Upcart

> Dowiedz się, jak używać HTML, CSS i JavaScript do budowania niestandardowych funkcji i stylizacji w koszyku wysuwanym.

⚠️ **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.](/pl/upcart/upcart_v20_migration_guide)

Zapoznaj się z pozostałą dokumentacją dostosowań, aby znaleźć rozwiązania dla V2.0.

<div id="overview">
  # Przegląd
</div>

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](/pl/upcart/upcart_customization_policy), aby wiedzieć, co jest, a co nie jest wspierane przez nasz zespół.

<div id="add-content-with-html">
  ## Dodawanie treści za pomocą HTML
</div>

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:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Edytor Custom HTML w Upcart dodający wiadomość z podziękowaniem nad przyciskiem checkout" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Dodawanie logiki za pomocą JavaScript
</div>

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](/pl/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **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`.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Edytor Custom HTML Scripts Before Load w Upcart z JavaScriptem ukrywającym moduł upselli" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Uwaga dla deweloperów:**\
Upcart udostępnia pełną [dokumentację Public API](https://rokt.notion.site/upcart-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.

***

<div id="style-your-cart-with-css">
  ## Stylizacja koszyka za pomocą CSS
</div>

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:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Edytor Custom CSS w Upcart stylizujący kolor tytułu upsellu z potwierdzeniem zapisania zmian" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Dodatkowe zasoby
</div>

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

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Wsparcie dla dostosowań
</div>

Zespół wsparcia Upcart nie może pomóc we wdrażaniu niestandardowego kodu. Przy bardziej zaawansowanych zmianach zalecamy zatrudnienie [eksperta Shopify](https://www.shopify.com/ca/partners/directory).