> ## 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.

# Jak dostosować szerokość koszyka na urządzeniach mobilnych

> Ten artykuł opisuje, jak dostosować szerokość koszyka na urządzeniach mobilnych za pomocą CSS.

<div id="introduction">
  # **Wprowadzenie**
</div>

Witaj w tym poradniku dotyczącym dostosowywania szerokości koszyka mobilnego do Twoich preferencji! Dostosowanie szerokości koszyka na urządzeniach mobilnych może znacznie poprawić doświadczenie zakupowe Twoich klientów, zapewniając, że koszyk jest czytelny i wygodny w obsłudze na mniejszych ekranach. Ta personalizacja pozwala Ci kontrolować układ, dbając o to, aby płynnie wpasowywał się w ogólny projekt sklepu i zachowywał przejrzysty, uporządkowany wygląd.

Te kroki są przeznaczone dla właścicieli sklepów lub deweloperów z podstawową znajomością CSS. Dostosowując szerokość koszyka mobilnego, możesz poprawić użyteczność i sprawić, że proces checkoutu będzie płynniejszy dla Twoich klientów, co może zwiększyć konwersje i zadowolenie klientów.

Zaczynajmy — spraw, aby Twój koszyk mobilny wyglądał i działał dokładnie tak, jak chcesz!

<div id="accessing-custom-css-settings">
  ## **Dostęp do ustawień niestandardowego CSS**
</div>

Aby rozpocząć personalizację CSS w Upcart, wykonaj poniższe kroki:

1. Otwórz **aplikację Upcart** w swoim panelu.
2. Przejdź do **Cart Editor**.
3. Otwórz **Settings** i wybierz zakładkę **Custom CSS** (ukrytą za **More settings**, jeśli wiersz zakładek się nie mieści).

<div id="applying-custom-css">
  ## **Stosowanie niestandardowego CSS**
</div>

Gdy znajdziesz się w sekcji Custom CSS, możesz zmienić szerokość koszyka mobilnego, wykonując poniższe kroki. Zmień wartość z 90% na dowolną liczbę — im większa liczba, tym więcej miejsca na ekranie zajmuje koszyk. (Uwaga: dotyczy to zarówno Upcart V1.0, jak i V2.0)

1. Znajdź pole wprowadzania CSS.
2. Skopiuj i wklej poniższy kod w polu wprowadzania CSS:

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **Podsumowanie**
</div>

Dzięki temu poradnikowi udało Ci się dostosować szerokość koszyka mobilnego, czyniąc go bardziej przyjaznym dla użytkowników i spójnym z projektem Twojego sklepu. Te drobne zmiany mogą mieć duży wpływ na doświadczenie zakupowe Twoich klientów, ułatwiając im przeglądanie i kupowanie na urządzeniach mobilnych.

<div id="still-need-help">
  ## Nadal potrzebujesz pomocy?
</div>

Jeśli potrzebujesz pomocy przy personalizacjach, zalecamy skonsultowanie się z ekspertem Shopify w sprawie dodania HTML, CSS, a nawet JavaScriptu do Twojego cart drawer.

[Zobacz ekspertów Shopify](https://www.shopify.com/partners/directory)