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

# Definir a largura do carrinho mobile como zero até ser acionado pelo Upcart com CSS

> Aprenda a definir a largura do seu carrinho mobile como zero a menos que seja acionado pelo Upcart usando CSS, para uma experiência de compra mais limpa e simplificada.

⚠️ **Aviso importante**

Esta personalização funciona apenas com a Versão 1 dos módulos de carrinho do Upcart. Se você atualizou recentemente seu carrinho para a Versão 2, estas personalizações podem não funcionar. Você precisará usar os novos seletores fornecidos para a Versão 2 no [guia de migração.](/pt/upcart/upcart_v20_migration_guide)

Se as suas personalizações não estiverem funcionando como esperado, você mesmo pode reverter o carrinho para a Versão 1: no Cart Editor, use o menu suspenso **Cart version** no topo do menu à esquerda e escolha **V1.0 (Legacy)**. O menu suspenso aparece quando todos os módulos do carrinho estão na V2.

No momento, estamos trabalhando em novos modelos de personalização para a Versão 2 dos módulos, e eles estarão disponíveis em breve.

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

Bem-vindo(a) a este tutorial de CSS, em que mostraremos como definir a largura do seu carrinho mobile como zero a menos que ele seja acionado pelo Upcart. Esta é uma maneira prática de manter seu carrinho oculto e simplificar a experiência de compra no mobile até que seus clientes estejam prontos para visualizá-lo.

Este guia foi criado para lojistas ou desenvolvedores com conhecimento básico de CSS. Ao usar esta personalização, você pode manter o carrinho fora de vista e melhorar o layout da página, reduzindo distrações e ajudando seus clientes a focar nas compras. É um pequeno ajuste que pode fazer uma grande diferença na experiência mobile da sua loja.

Vamos começar e fazer seu carrinho mobile trabalhar de forma mais inteligente!

<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 estas etapas:

1. Abra o **app Upcart** no seu painel.
2. Navegue até o **Cart Editor**.
3. Abra **Settings** e selecione a aba **Custom CSS** (dentro de **More settings**, se a fileira de abas transbordar).
4. Em seguida, copie e cole o código na área de entrada de CSS
5. Quando terminar, "clique em Save" e atualize a página da sua loja para ver os resultados ao vivo.

<div id="here-is-the-css-code-to-copy-and-paste-into-the-css-section">
  ## Aqui está o código CSS para copiar e colar na seção de CSS:
</div>

```
@media (max-width: 440px) {  
    .upcartPopupShow [class*="styles_CartPreview__right__"] {  
        width: 100%;  
        max-width: 440px;  
    }  
  
    [class*="styles_CartPreview__right__"] {  
        width: 0px;  
	max-width: 440px;  
    }  
}
```

<div id="conclusion">
  # **Conclusão**
</div>

E é isso! Você aprendeu a alterar a largura do seu carrinho mobile para zero até que ele seja acionado pelo Upcart, criando uma experiência de compra mais limpa e focada.

<div id="support-for-customizations">
  ## 🚧 Suporte para personalizações
</div>

A equipe de suporte do Upcart não pode ajudar na implementação de soluções personalizadas de CSS ou HTML no seu carrinho.

Se você precisar de ajuda para projetar ou estilizar algo personalizado, recomendamos consultar um Shopify Expert:

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