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

# Pré-visualizando carrinhos

> Pré-visualize seu Aftersell Cart antes de publicar — no canvas do editor e no tema da sua loja em produção.

Você pode pré-visualizar um carrinho de duas formas: ao vivo no editor enquanto o constrói, e no tema da sua loja antes de torná-lo público.

<div id="the-editor-canvas">
  ## O canvas do editor
</div>

O centro do editor de carrinho é uma pré-visualização ao vivo que renderiza o carrinho real. Ela mostra **os dois estados do carrinho lado a lado** — um cartão **Filled cart** e um cartão **Empty cart** — para que você veja ambos enquanto trabalha.

* **Escolha qual estado está editando** com a alternância **Filled / Empty** na barra lateral, ou clicando no **título acima** de um cartão. Clicar *dentro* de um cartão não troca o estado — isso seleciona o bloco sob o cursor. O cartão ativo fica contornado, e o bloco que você está editando recebe o próprio destaque.
* **Faça zoom** com a pílula de zoom no próprio canvas (25%–200%): `+` e `−` avançam em passos de 10%, e clicar na porcentagem redefine para 75%. Ctrl/Cmd + scroll dá zoom em torno do cursor; scroll simples e arrastar fazem pan.
* A pré-visualização reflete suas [configurações de design](/pt/aftersell/cart/design-settings) e seu [CSS personalizado](/pt/aftersell/cart/custom-css) ao vivo conforme você os altera.

<div id="preview-on-your-storefront">
  ## Pré-visualização na sua loja
</div>

Use **Preview** em um carrinho para vê-lo em um tema real em uma nova aba, sem torná-lo público:

* **Carrinhos ativos** abrem sua loja diretamente — o carrinho ativo já é o que os compradores veem.
* **Carrinhos rascunho** abrem uma **pré-visualização de tema**. Você escolhe em qual tema pré-visualizar (o tema principal é o padrão), e o Aftersell prepara o carrinho rascunho nesse tema apenas para a sua sessão de pré-visualização, sem tocar no seu carrinho ativo. O app embed precisa estar habilitado no tema que você escolher.

<Note>
  Pré-visualizações de rascunho podem não refletir totalmente o comportamento do carrinho ativo — trate-as como uma aproximação próxima e faça uma verificação final após publicar.
</Note>

Salve suas alterações antes de pré-visualizar — o editor pede que você salve para que a pré-visualização reflita seu trabalho mais recente.

<div id="empty-vs-filled-states">
  ## Estados vazio vs. cheio
</div>

Os dois estados estão sempre disponíveis no canvas do editor (os dois cartões), então você pode projetar e verificar o carrinho vazio e o carrinho cheio de forma independente. Na loja, os compradores veem o estado que corresponde ao carrinho deles.

<div id="sample-data-scenarios">
  ## Cenários de dados de exemplo
</div>

O painel de configurações do [bloco Cart items](/pt/aftersell/cart/cart-items-block) tem uma seção **Preview** com um seletor de **Sample data**, permitindo alternar a pré-visualização do editor entre cenários de itens de linha para verificar como cada um fica sem precisar montar um carrinho correspondente:

| Cenário               | O que mostra                                                                        |
| --------------------- | ----------------------------------------------------------------------------------- |
| **Standard product**  | Um único produto com desconto aplicado.                                             |
| **Long product name** | Um produto com título muito longo, para verificar quebra de texto e overflow.       |
| **Bundle**            | Uma linha âncora de bundle com seus itens filhos.                                   |
| **Subscription**      | Uma linha de assinatura com o rótulo do plano de venda.                             |
| **All item types**    | O nome de produto longo, as linhas de assinatura e de bundle juntos em um carrinho. |

Sua escolha afeta apenas a pré-visualização do editor. Ela nunca é salva no carrinho e é redefinida quando você recarrega o editor.