Skip to main content
O layout do seu carrinho é uma pilha de blocos: peças configuráveis que você adiciona, reordena, estiliza e personaliza no Cart Editor. Os blocos que você inclui, e em que ordem, formam o carrinho que os compradores veem. Para entender como os blocos se encaixam em estados e seções, veja Como funcionam os carrinhos?.

​
Blocos e sub-blocos

Existem dois tipos de bloco:
  • Blocos ficam diretamente no carrinho, em uma de três seções: Header, Body ou Footer. Cada seção oferece um conjunto diferente de blocos.
  • Sub-blocos ficam aninhados dentro de outro bloco. Hoje apenas Cart items hospeda sub-blocos: a linha Product (a própria linha do item), Subscription upgrade e Custom code.

​
Adicionando, reordenando e removendo blocos

  • Adicione um bloco com o seletor Add block. Um bloco fica acinzentado se não puder ir onde você está adicionando, ou se você atingiu o limite dele (o seletor mostra um selo count/max).
  • Reordene arrastando um bloco dentro da sua seção.
  • Remova com o ícone de lixeira, exceto os blocos bloqueados (abaixo).
  • Mostre/oculte a maioria dos blocos com o botão de olho, que esconde um bloco dos compradores sem excluí-lo. Alguns blocos estruturais não podem ser ocultados: Cart items, Checkout button e a linha Product.

​
Blocos bloqueados

Alguns blocos podem ser reordenados, mas não excluídos, para que o comportamento essencial do carrinho (por exemplo, finalizar a compra) não possa ser removido por acidente:
  • Cart items
  • Checkout button

​
Blocos padrão

Novos carrinhos começam com um layout padrão funcional:
  • Carrinho cheio: Header, Banner, Cart items, Summary, Checkout button
  • Carrinho vazio: Header, bloco Empty cart
O estado de carrinho vazio é o layout vazio inteiro. O bloco Empty cart é um bloco dentro dele. Veja Como funcionam os carrinhos? para entender a diferença.

​
Quantos de cada bloco você pode adicionar

Os limites são contados por estado do carrinho, não por carrinho. O carrinho cheio e o carrinho vazio têm, cada um, sua própria cota, então um carrinho pode ter três Banners no layout cheio e mais três no layout vazio. A maioria dos blocos é limitada a um por estado. As exceções:

​
Content, Design e Code

Cada bloco é configurado por meio de até três superfícies no editor:
  • Content: as configurações do bloco (texto, escolhas de produtos, limites e assim por diante). O bloco Custom code é a única exceção: ele não tem painel Content porque o bloco é o código.
  • Design: estilização por bloco que se sobrepõe às suas Configurações de design globais. Todo bloco tem uma, exceto Custom code, que não tem painel de configurações.
  • Code: substitua a renderização nativa do bloco por um template personalizado. A maioria dos blocos suporta isso; alguns não.

​
Mostrar ou ocultar por mercado, país ou moeda

Alguns blocos podem mostrar configurações diferentes, ou se ocultar por completo, com base em quem é o comprador. Isso é separado do botão de olho da barra lateral, que ativa ou desativa um bloco para todos. Tipos de condição suportados hoje: mercado Shopify, país do cliente e moeda do cliente (cada um com In ou Not in). Total do carrinho e conteúdo do carrinho não são tipos de condição. Use os limites de níveis do bloco Rewards para progresso por gasto/quantidade, ou o Cart SDK quando precisar de uma regra que o editor não consegue expressar. As condições são uma lista ordenada: a primeira condição correspondente vence. Coloque regras específicas acima de uma condição genérica All buyers. Se nada corresponder, o bloco não renderiza nada para aquele comprador. No editor hoje, a interface completa de Conditions está disponível no bloco Rewards: conjuntos de níveis diferentes por mercado, país ou moeda. Os outros blocos usam uma única configuração “all buyers” ou ainda não participam desse sistema. A pré-visualização do editor não avalia o comprador real. Selecione uma condição no painel para pré-visualizar aquela variante.

​
Todos os blocos

Estrutura
  • Header: título, contagem de itens, logo e controle de fechar, fixados no topo.
  • Cart items: os itens que os clientes adicionam ao carrinho; repete por linha.
  • Subscription upgrade: sub-bloco que oferece converter uma linha em assinatura.
  • Summary: totais, economias e descontos aplicados.
  • Checkout button: a call to action principal para o checkout.
  • Empty cart: o conteúdo exibido quando o carrinho está vazio.
  • Express payments: botões de checkout acelerado (Shop Pay, PayPal e outros) dentro do carrinho.
Merchandising
  • Upsells: recomendações de produtos escolhidas por estratégia.
  • Product add-on: um único produto específico oferecido como add-on.
  • Rewards: recompensas escalonadas, como frete grátis ou brindes.
  • Shipping protection: um add-on de proteção de envio opcional.
Entrada do comprador
  • Discount code: um campo para aplicar um código de desconto.
  • Notes: um campo de observações do pedido.
Conteúdo
  • Banner: um banner de mensagem, com cronômetro regressivo opcional.
  • Image: uma única imagem ou um preset hospedado, como ícones de pagamento.
  • Custom code: HTML ou React personalizado em qualquer lugar do carrinho.
Extensão
  • Custom templates: substitua a renderização de qualquer bloco pela aba Code dele.

​
Blocos disponíveis em cada seção

Cada seção tem um conjunto diferente de blocos disponíveis. Isso mantém o layout focado e reduz a desordem. Alguns desses blocos são específicos de estado (por exemplo, Empty cart apenas no estado vazio). Veja Como funcionam os carrinhos?.

​
Erros de validação de blocos

Se as configurações de um bloco contiverem um valor inválido, um pequeno ponto vermelho aparece ao lado do nome desse bloco na barra lateral. O ponto permanece até você corrigir o problema. Não é uma notificação que pode ser dispensada. Enquanto qualquer bloco tiver um erro, salvar fica bloqueado. O botão Save continua clicável, mas selecioná-lo exibe um toast de erro (“Fix the errors in your cart blocks before saving”) e pula para o primeiro bloco com problema, abrindo suas configurações para você corrigir o campo destacado. Publish exige adicionalmente que não haja alterações não salvas, então permanece indisponível até que um salvamento limpo seja concluído. Assim que o campo inválido for corrigido, o ponto desaparece sozinho e o salvamento prossegue normalmente.
Blocos ocultos ainda são validados. Um bloco que você ocultou pode conter uma configuração inválida, exibir um ponto de erro e bloquear o salvamento exatamente como um bloco visível — então, se o salvamento estiver bloqueado e todos os blocos visíveis parecerem bem, verifique seus blocos ocultos.