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

> Escreva CSS para personalizar o design do seu cart drawer.

<div id="overview">
  # Visão geral
</div>

Esta seção permite alterar a aparência dos elementos existentes do carrinho ou aplicar estilos a HTML personalizado adicionado pelo editor.

<div id="where-to-find-it">
  ## **Onde encontrar**
</div>

Acesse:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings é uma linha de abas; Custom CSS é uma delas, ao lado de Custom HTML. Se não estiver visível, ela fica em **More settings**.

<div id="how-it-works">
  ## **Como funciona**
</div>

Você pode adicionar CSS para:

* Estilizar elementos padrão do carrinho
* Modificar a aparência de HTML personalizado
* Ajustar espaçamento, alinhamento, tipografia e muito mais

Enquanto você digita, um **popup de autocompletar** sugere seletores válidos do Upcart para agilizar a edição. Selecionar uma sugestão completa automaticamente a regra e ajuda a estruturar seu código. Se as alterações não aparecerem como esperado, revise as sugestões comuns de solução de problemas, como atualizar os caches do navegador e do editor do Upcart, verificar o posicionamento do CSS e garantir a especificidade adequada nas suas regras de CSS.

<div id="using-selectors">
  ## **Usando seletores**
</div>

O Upcart oferece uma ampla variedade de seletores personalizados. Clique em **"Show list"** para ver todas as opções disponíveis. Evite usar seletores globais como `body`, `div` ou `h3`, a menos que estejam limitados com `.upcart-cart`, para evitar alterações não intencionais na sua loja. Em situações em que os estilos não são aplicados corretamente, considere aumentar a especificidade do CSS ou adicionar `!important` às suas regras de CSS. Isso garante que elas substituam quaisquer estilos conflitantes. Exemplo:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

Exemplo (seletor seguro):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **Exemplo: estilização de mensagem de agradecimento**
</div>

Suponha que você adicionou este HTML personalizado abaixo do botão de checkout:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Sem CSS, a mensagem terá uma aparência simples. Para estilizá-la:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # Problemas comuns e soluções
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## CSS não aparece em dispositivos móveis
</div>

Se o seu texto ou os seus estilos personalizados não estiverem visíveis no celular:

* Atualize a página tanto no **Editor do Upcart** quanto no navegador do celular para limpar as versões em cache.
* Garanta que a versão mais recente publicada do carrinho esteja ativa.
* Confirme que o CSS está salvo na aba **Custom CSS** em **Upcart > Cart Editor > Settings**.

<div id="discrepancies-between-editor-and-live-store">
  ## Discrepâncias entre o editor e a loja ao vivo
</div>

Estilos que aparecem corretamente no editor, mas não no site ao vivo, podem precisar de maior especificidade nos seletores ou de `!important` adicionado às regras principais.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## Uso incorreto de seletores CSS
</div>

Verifique se a classe ou o ID correto está sendo direcionado. Sempre inclua prefixos como `.upcart-` para elementos específicos do Upcart, evitando resultados indesejados. Se o estilo não for aplicado como esperado, garanta que o seletor `.thank-you-message` esteja direcionando corretamente o elemento HTML pretendido e verifique se o código CSS está na aba correta (Upcart > Cart Editor > Settings > Custom CSS).

***

Suporte para personalizações:

O suporte do Upcart não pode ajudar com a implementação ou depuração de CSS personalizado. Para ajuda avançada com estilização, recomendamos trabalhar com um Shopify Expert. Para solucionar problemas de CSS personalizado, consulte a seção de problemas comuns para orientações sobre como resolver questões como estilos ausentes em dispositivos móveis, discrepâncias entre a prévia do editor e a loja ao vivo e posicionamento incorreto de seletores.