> ## 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.
# Bloco Empty cart
> O bloco Empty cart — o conteúdo exibido quando o comprador não tem itens.
> O bloco **Empty cart** é o conteúdo exibido quando o carrinho não tem itens, normalmente uma mensagem e um botão de continuar comprando, para que um drawer vazio continue útil e alinhado à marca. Ele só aparece no **estado vazio** do carrinho; outros blocos (como o Header) podem ficar ao lado dele nesse mesmo estado.
## Comportamento
* O bloco aparece apenas quando o carrinho está vazio. Assim que o comprador adiciona um item, o carrinho muda para o estado cheio e este bloco é substituído pelo seu layout de carrinho cheio.
* No editor, o link do CTA fica inerte, então clicar nele não leva você para fora enquanto está projetando.
## Configurações
| Configuração | O que controla | Padrão |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text** | A mensagem do estado vazio. Rich text. | `Your cart is empty.` |
| **Button text** | O rótulo do botão. Suporta formatação HTML inline. | `Continue shopping` |
| **Button link** | Para onde o botão leva. | `/collections/all` |
| **Background color** | Cor de fundo do bloco. Em branco, fica transparente, deixando o fundo do próprio carrinho aparecer. | `transparent` |
| **Alignment** | Como o texto e o botão do bloco são alinhados — **Left** ou **Center**. | Center |
| **Fit to height** | Se o bloco preenche a altura restante do body do carrinho e centraliza verticalmente, ou fica na altura do conteúdo — **Fill remaining height** ou **Fit content**. | Fill remaining height |
## Posicionamento e limites
* **Região:** body.
* **Máximo:** 1 por estado do carrinho.
* **Estado:** apenas carrinho vazio. Este bloco não aparece no estado cheio. Carrinhos novos também incluem um Header no estado vazio por padrão; veja [Como funcionam os carrinhos?](/pt/aftersell/cart/how-carts-work).
* Adicionado a carrinhos novos por padrão. Não é fixo — você pode removê-lo ou ocultá-lo.
## Template personalizado
Suporta um [template personalizado](/pt/aftersell/cart/custom-templates) pela aba Code, que substitui a marcação nativa deste bloco pelo seu JSX. Estas são as props que ele recebe.
| Prop | Tipo | Para que serve |
| --------- | -------- | ---------------------------------------------------------------------------------------------- |
| `text` | `string` | A mensagem de carrinho vazio como HTML sanitizado. |
| `cta` | `string` | Rótulo do botão de chamada para ação, como texto simples. |
| `ctaHtml` | `string` | Rótulo do botão de chamada para ação como HTML sanitizado — o que a marcação padrão renderiza. |
| `href` | `string` | Para onde a chamada para ação aponta. |
Este bloco só é renderizado quando o carrinho está vazio, então não há objeto de carrinho nas props. Renderize `href` como um `` real em vez de uma navegação via script, e `text` com `dangerouslySetInnerHTML`, já que ele já é HTML sanitizado.
## Design
Estilize este bloco pela seção **Design** no painel de configurações. São substituições por bloco que se sobrepõem ao seu design global e voltam a ele quando ficam em branco.
### Text
A seção **Text** em Design permite controlar a tipografia de dois elementos. Use o seletor **Text element** para alternar entre eles.
**Message** — o texto da mensagem de estado vazio. Negrito e cor do texto são definidos no Rich Text Editor acima (na aba Settings), não aqui.
| Configuração | O que controla | Padrão |
| ------------------ | --------------------------------- | ------------- |
| **Font** | Família da fonte para a mensagem. | Herda do tema |
| **Size** | Tamanho da fonte. | `18px` |
| **Line height** | Multiplicador de altura da linha. | `1.3` |
| **Letter spacing** | Espaçamento entre caracteres. | Normal |
**Button label** — o texto no botão de continuar comprando. A cor do texto é definida na seção Button de Design.
| Configuração | O que controla | Padrão |
| ------------------ | --------------------------------------------------------- | -------------- |
| **Size** | Tamanho da fonte. | `15px` |
| **Weight** | Peso da fonte — Light, Regular, Medium, Semibold ou Bold. | Semibold (600) |
| **Line height** | Multiplicador de altura da linha. | `1.47` |
| **Letter spacing** | Espaçamento entre caracteres. | Normal |
### Botão
A seção **Button** permite estilizar o botão de CTA independentemente do design global de botões. Use a alternância **Default / Hover** para trocar entre os dois estados.
| Configuração | Estado | O que controla |
| -------------------- | ------- | -------------------------------------------------------------------------------------------------- |
| **Background color** | Default | Preenchimento do botão em estado de repouso. Volta para a cor de fundo global do botão. |
| **Text color** | Default | Cor do rótulo do botão em estado de repouso. Volta para a cor de texto global do botão. |
| **Background color** | Hover | Preenchimento do botão quando o cliente passa o mouse sobre ele. Volta para a cor de fundo padrão. |
| **Text color** | Hover | Cor do rótulo do botão no hover. Volta para a cor de texto padrão. |
| **Border color** | — | Cor da borda do botão (ambos os estados). Volta para a cor de borda global do botão. |
| **Border radius** | — | Arredondamento dos cantos do botão. Volta para o raio de borda global do botão. |
O que são configurações de design? Saiba mais aqui: [Configurações de design](/pt/aftersell/cart/design-settings).