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

# Как настроить ширину мобильной корзины

> В этой статье описано, как настроить ширину мобильной корзины с помощью CSS.

<div id="introduction">
  # **Введение**
</div>

Добро пожаловать в это руководство по настройке ширины мобильной корзины под ваши предпочтения! Настройка ширины мобильной корзины может значительно улучшить покупательский опыт ваших клиентов, обеспечив удобный просмотр корзины и взаимодействие с ней на небольших экранах. Эта кастомизация позволяет управлять макетом, гарантируя, что он органично вписывается в общий дизайн магазина и выглядит аккуратно и упорядоченно.

Эти шаги предназначены для владельцев магазинов или разработчиков с базовыми знаниями CSS. Изменяя ширину мобильной корзины, вы можете улучшить удобство использования и сделать процесс оформления заказа более плавным для покупателей, что потенциально повысит конверсии и удовлетворённость клиентов.

Давайте начнём и сделаем так, чтобы ваша мобильная корзина выглядела и работала именно так, как вы хотите!

<div id="accessing-custom-css-settings">
  ## **Доступ к настройкам пользовательского CSS**
</div>

Чтобы начать настройку CSS для вашего Upcart, выполните следующие шаги:

1. Откройте **приложение Upcart** в вашей панели управления.
2. Перейдите в **Cart Editor**.
3. Откройте **Settings** и выберите вкладку **Custom CSS** (находится за **More settings**, если ряд вкладок не помещается).

<div id="applying-custom-css">
  ## **Применение пользовательского CSS**
</div>

Оказавшись в разделе Custom CSS, вы можете изменить ширину мобильной корзины, выполнив шаги ниже. Измените значение 90% на любое желаемое число: чем больше число, тем больше места корзина занимает на экране. (Примечание: это применимо и к V1.0, и к V2.0 Upcart)

1. Найдите поле ввода CSS.
2. Скопируйте и вставьте следующий код в поле ввода 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">
  # **Заключение**
</div>

Следуя этому руководству, вы успешно настроили ширину мобильной корзины, сделав её более удобной для пользователей и соответствующей дизайну вашего магазина. Эти небольшие изменения могут существенно повлиять на покупательский опыт ваших клиентов, упрощая просмотр и покупку с мобильных устройств.

<div id="still-need-help">
  ## Всё ещё нужна помощь?
</div>

Если вам нужна помощь с кастомизациями, мы рекомендуем проконсультироваться с экспертом Shopify по добавлению HTML, CSS и даже JavaScript в вашу выдвижную корзину.

[Найти экспертов Shopify](https://www.shopify.com/partners/directory)