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

# Configurações de design

> Configurações de design globais e por bloco do Aftersell Cart: cores, botões, layout e como as substituições por bloco se sobrepõem.

O design do Aftersell Cart funciona em dois níveis: configurações **globais** que estilizam o carrinho inteiro e substituições **por bloco** que refinam um bloco individual.

<div id="global-design-settings">
  ## Configurações de design globais
</div>

Abra **Cart settings** na barra lateral do editor para acessar o design global do carrinho. As configurações estão agrupadas em Design, Buttons e Layout.

<div id="design">
  ### Design
</div>

| Configuração             | O que controla                                                              | Padrão    |
| ------------------------ | --------------------------------------------------------------------------- | --------- |
| **Background color**     | O fundo do carrinho.                                                        | `#ffffff` |
| **Text color**           | Texto principal.                                                            | `#000000` |
| **Secondary text color** | Texto atenuado / secundário.                                                | `#a8a8a8` |
| **Accent color**         | Selos, divisores e preços riscados.                                         | `#f2f2f2` |
| **Border radius**        | Arredondamento dos cantos de contêineres, cards, imagens e campos de texto. | `8px`     |

<div id="buttons">
  ### Buttons
</div>

| Configuração         | O que controla                                                            | Padrão    |
| -------------------- | ------------------------------------------------------------------------- | --------- |
| **Background color** | Preenchimento do botão.                                                   | `#000000` |
| **Text color**       | Rótulo do botão.                                                          | `#ffffff` |
| **Border color**     | Borda do botão.                                                           | `#000000` |
| **Border radius**    | Arredondamento dos cantos de botões, dropdowns e controles de quantidade. | `8px`     |

<div id="layout">
  ### Layout
</div>

| Configuração           | O que controla                                 | Padrão  |
| ---------------------- | ---------------------------------------------- | ------- |
| **Horizontal padding** | Padding esquerdo/direito dentro do carrinho.   | `24px`  |
| **Desktop width**      | A largura do drawer no desktop (mínimo 320px). | `440px` |

<div id="per-block-design-overrides">
  ## Substituições de design por bloco
</div>

Todo bloco, exceto [**Custom code**](/pt/aftersell/cart/custom-code-blocks), tem suas próprias substituições de design por bloco no final do seu painel de configurações — sob o título **Design** em todos os blocos, exceto **Express payments**, cujas substituições ficam em seções sem rótulo de Style e Spacing. (Custom code não tem painel de configurações — o bloco *é* o código, então ele mostra apenas uma aba Code.) Elas controlam coisas como estilo, espaçamento e outras configurações de design específicas do bloco. Essas **configurações de design por bloco**, quando em branco, recorrem à configuração global daquela propriedade.

Muitos blocos também incluem uma seção **Text** dentro do seu painel de Design, onde você pode definir a tipografia de elementos de texto específicos daquele bloco — família da fonte, tamanho, altura da linha e espaçamento entre caracteres. Blocos com vários elementos de texto (como Notes e Empty cart) exibem um seletor **Text element** para você estilizar cada um independentemente.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-design-animated-preview-block-settings.gif?s=ae602b5294a5d8ef7caae96476df2d1b" alt="Pré-visualização animada do painel de configurações de Design por bloco no Cart Editor" title="Pré-visualização animada do painel de configurações de Design por bloco no Cart Editor" width="2188" height="1080" data-path="images/aftersell/cart-design-animated-preview-block-settings.gif" />
</Frame>

<div id="fonts-and-drawer-position">
  ## Fontes e posição do drawer
</div>

* **Fontes:** por padrão, o carrinho herda a **fonte do seu tema**. Você pode definir uma família de fonte personalizada para elementos de texto selecionados (como o título do produto e o cabeçalho de upsells) na seção **Text** das configurações de Design de cada bloco — veja [Bloco Cart items](/pt/aftersell/cart/cart-items-block) e [Bloco Upsells](/pt/aftersell/cart/upsells-block) para mais detalhes.
* **Posição do drawer:** a **largura** do drawer é ajustável (Desktop width, acima); não há configuração de posição esquerda/direita.

<div id="behavior-settings">
  ## Configurações de comportamento
</div>

Além da estilização, **Cart settings** também contém opções de comportamento — abrir o drawer ao adicionar ao carrinho e os seletores de tema que mantêm sua loja sincronizada. Veja [Configurações do carrinho](/pt/aftersell/cart/cart-settings).

<div id="when-to-use-custom-css-instead">
  ## Quando usar CSS personalizado em vez disso
</div>

As configurações nativas cobrem os casos comuns. Para qualquer coisa além delas — mirar um elemento específico, espaçamento personalizado, ajustes responsivos — use [CSS personalizado](/pt/aftersell/cart/custom-css).