> ## 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.
# Módulo de design
> Este artigo explica como personalizar as configurações de design do seu Upcart.
O módulo Design permite personalizar a aparência do seu carrinho, incluindo layout, cores da marca e estilos de botão.
# Geral
## Herdar fontes do tema
Esta configuração permite que o Upcart use as fontes definidas nas configurações do seu tema da Shopify. Para ver suas escolhas de fonte atuais, abra o [Editor de temas da Shopify](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) e navegue até a seção Tipografia.
## **🚧 Prévia do carrinho 🚧**
As fontes herdadas do seu tema não aparecerão na janela de prévia do Upcart, mas serão exibidas corretamente na sua loja ao vivo.
## Mostrar preços riscados
Ative esta configuração para mostrar um preço riscado (também conhecido como [Compare At Price](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) ao lado de cada item do carrinho. Isso reflete os preços com desconto, de forma semelhante às suas páginas de produto.
## Ativar linha de subtotal
Adiciona uma linha de subtotal ao carrinho. Ativar isso também revela um campo **Subtotal text color** em **Colors**, para que o subtotal possa ser estilizado separadamente do restante do texto do carrinho. Com a configuração desativada, esse campo de cor fica oculto.
## Largura do carrinho
Controla a largura do drawer, definida separadamente para cada viewport:
* **Desktop** - **Default** ou **Wide**
* **Mobile** - **Full** (de borda a borda) ou **Nearly full** (um pequeno espaço na borda)
***
# Cores
## Cor de fundo
Define a cor de fundo principal do carrinho, excluindo o rodapé e os cards de upsell.
## Cor de destaque do carrinho
Controla a cor de fundo do rodapé do carrinho e dos cards de itens de upsell.
## Cor do texto do carrinho
Define a cor de todos os textos do carrinho, exceto o texto dos botões e o texto de economia, que são controlados separadamente.
## Cor do texto de economia
Define a cor do texto de economia mostrado abaixo do preço do produto.
## Cor do texto do subtotal
Define a cor da linha de subtotal. Este campo só aparece quando **Enable subtotal line** está ativado em **General**.
## 🚧 **Prévia do carrinho** 🚧
O editor de prévia pode não refletir a estilização final com precisão. O tema da sua loja pode incluir CSS personalizado que afeta o tamanho ou a cor do texto. Sempre verifique as alterações na sua loja ao vivo.
***
# Configurações de botões
O Upcart oferece opções avançadas de estilização de botões, incluindo personalização específica para o botão de checkout. Isso inclui métodos para ajustes de CSS e integração com as ferramentas de branding da Shopify.
## Raio dos cantos
Ajusta o arredondamento dos cantos dos botões, de **0 px a 40 px**. `0` gera cantos retos e quadrados; `40` é o máximo de arredondamento do controle deslizante. O valor se aplica em conjunto ao botão de checkout, ao botão de upsell, ao botão de desconto e ao botão de upgrade.
O controle deslizante para em 40 px. Para um botão totalmente em formato de pílula, você precisa de [CSS personalizado](/pt/upcart/custom_css) — veja [Personalização avançada de CSS](#advanced-css-customization-for-checkout-buttons) abaixo.
## Cor do botão
Define a cor de fundo de todos os botões do carrinho, incluindo:
* Botão de checkout
* Botão "Add to Cart" de upsell
* Botão "Apply" de desconto
* Botão de upgrade de assinatura Você pode personalizar a cor desses botões pelo Cart Editor. Para personalizações mais avançadas, como modificações de CSS, consulte a seção de personalização avançada.
## Cor do texto do botão
Especifica a cor do texto usada em todos os botões do carrinho.
## Cor do texto do botão ao passar o mouse
Controla a cor do texto do botão quando um cliente passa o mouse sobre ele. Por exemplo, se definida como verde, o texto ficará verde ao passar o mouse.
## Mostrar botão de continuar comprando
Adiciona um botão **Continue shopping** ao carrinho, permitindo que os clientes fechem o drawer e voltem a navegar sem usar o ícone de fechar.
# Personalização avançada de CSS para botões de checkout
Para mudanças de design significativas, você pode usar código Custom CSS para modificar o botão de checkout:
1. No Cart Editor, abra **Settings** e selecione a aba **Custom CSS**.
2. Utilize o seletor CSS relevante, como `.checkout`. Exemplos de snippets CSS: Para criar um botão em formato de pílula:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
Para adicionar uma borda preta:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
Substitua `.checkout` pela classe CSS real do seu botão. Estilizações adicionais incluem efeitos de hover, padding, cores de texto ou fontes.
# Integrando o branding da Shopify para personalização de botões
Se você usa a Shopify, pode atualizar o design do seu botão de checkout pelo admin da Shopify:
1. Faça login no seu Shopify Admin.
2. Navegue até `Settings > Checkout > Customize`.
3. Utilize as opções de branding para modificar a fonte, o arredondamento ou a cor para um design harmonioso.
