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

# Como personalizar a largura do carrinho no mobile

> Este artigo explica como personalizar a largura do carrinho no mobile usando CSS.

<div id="introduction">
  # **Introdução**
</div>

Boas-vindas a este tutorial sobre como personalizar a largura do carrinho no mobile de acordo com suas preferências! Ajustar a largura do carrinho no mobile pode melhorar muito a experiência de compra dos seus clientes, garantindo que o carrinho seja fácil de visualizar e interagir em telas menores. Essa personalização permite controlar o layout, garantindo que ele se encaixe perfeitamente no design geral da sua loja e mantenha tudo com aparência limpa e organizada.

Estes passos foram pensados para lojistas ou desenvolvedores com conhecimentos básicos de CSS. Ao ajustar a largura do carrinho no mobile, você pode melhorar a usabilidade e tornar o processo de checkout mais fluido para seus clientes, potencialmente aumentando as conversões e a satisfação dos clientes.

Vamos começar e fazer seu carrinho mobile ficar e funcionar exatamente como você quer!

<div id="accessing-custom-css-settings">
  ## **Acessando as configurações de CSS personalizado**
</div>

Para começar a personalizar o CSS do seu Upcart, siga estes passos:

1. Abra o **app Upcart** no seu painel.
2. Navegue até o **Cart Editor**.
3. Abra **Settings** e selecione a aba **Custom CSS** (atrás de **More settings** se a linha de abas transbordar).

<div id="applying-custom-css">
  ## **Aplicando CSS personalizado**
</div>

Quando estiver na seção Custom CSS, você pode alterar a largura do carrinho no mobile seguindo os passos abaixo. Altere o número de 90% para qualquer valor desejado; quanto maior o número, mais espaço o carrinho ocupa na tela. (nota: isto se aplica tanto à V1.0 quanto à V2.0 do Upcart)

1. Localize a área de entrada de CSS.
2. Copie e cole o seguinte código na área de entrada de 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">
  # **Conclusão**
</div>

Ao seguir este tutorial, você personalizou com sucesso a largura do carrinho no mobile, tornando-o mais fácil de usar e alinhado ao design da sua loja. Essas pequenas mudanças podem ter um grande impacto na experiência de compra dos seus clientes, facilitando a navegação e a compra em dispositivos móveis.

<div id="still-need-help">
  ## Ainda precisa de ajuda?
</div>

Se você precisar de ajuda com personalizações, recomendamos consultar um Shopify Expert sobre como adicionar HTML, CSS e até JavaScript ao seu cart drawer.

[Ver Shopify Experts](https://www.shopify.com/partners/directory)