Visão geral de blocos para personalizar o checkout com o Checkout Blocks

Com o Checkout Blocks, criado com extensões de IU, é possível personalizar o checkout usando blocos de app. Basta arrastar e soltar esses blocos direto no editor de checkout e contas. Alguns blocos são puramente estéticos, como banners de alerta ou mensagens sobre itens de linha. Outros são interativos e permitem que clientes escolham variantes de produtos, seletores de quantidade, caixas de seleção ou campos de texto para incluir informações adicionais.

O Checkout Blocks permite usar até 30 blocos ativos de cada tipo. É possível ter até 30 campos personalizados, 30 blocos de conteúdo dinâmico ou outros tipos. Você tem a opção de criar mais de 30 blocos, mas só os primeiros 30 ativos vão aparecer no checkout.

O que aparece no checkout depende das regras de exibição e da ordem de prioridade definidas para cada bloco, bem como se você usou um ID de bloco de app para sempre mostrar um bloco específico em um lugar em particular.

Nesta página

Blocos de app disponíveis no Checkout Blocks

O Checkout Blocks oferece vários tipos de blocos de app conforme o conteúdo que você quer adicionar ao checkout. É possível definir regras condicionais de exibição e escolher em quais páginas os blocos vão aparecer.

Alguns blocos não podem ser usados em todas as páginas do checkout. Por exemplo, o de campo personalizado precisa que o cliente adicione informações extras, como uma mensagem, ou marque uma opção. Essas informações são importantes para finalizar o pedido. Por isso, não podem ser inseridas depois que a compra estiver concluída, como na página de agradecimento ou de status do pedido.

Tabela que lista os blocos de app disponíveis no Checkout Blocks junto com as páginas de checkout que os aceitam e uma breve descrição de cada um.
Bloco de apps	Páginas em que pode ser usado	Descrição
Bloqueador de endereço	Checkout	Bloqueia o checkout com base nas regras de formato de endereço.
Campo personalizado	Checkout	Inclui campos personalizados no checkout, como uma caixa de seleção de termos e condições ou um campo para mensagens de presentes.
Conteúdo dinâmico	Checkout Obrigado Order status (Status do pedido)	Exibe conteúdo como texto, banners e botões com base em regras condicionais definidas por você. O bloco está disponível para lojistas no plano Basic Shopify ou superior.
Edição de item de linha	Checkout Obrigado Order status (Status do pedido)	Permite que clientes editem itens de linha no resumo do pedido no checkout, como incluir um seletor de variante ou quantidade. Também funciona como contêiner para o conteúdo do item de linha.
Conteúdo de item de linha	Checkout Obrigado Order status (Status do pedido)	Exibe mensagens específicas do item de linha, como `Promoção final`.
Ícones de frete e pagamento	Checkout	Exibe ícones para formas de frete e pagamento aceitas.
Conteúdo estático	Checkout Obrigado Order status (Status do pedido)	Ao contrário dos blocos de conteúdo dinâmico, é exibido para todos os clientes e é compatível com texto e banners. O bloco está disponível para lojistas no plano Basic Shopify ou superior.

Saiba mais sobre como criar blocos de app.

Bloquear análises

Todo bloco ativo tem um contador de Views ("Visualizações") na parte superior da página de informações no app Checkout Blocks. Essa análise mostra quantas vezes o bloco apareceu no checkout.

Por padrão, o bloco exibe análises de Today ("Hoje"), mas é possível clicar no menu suspenso de data e usar o seletor para ver análises de dias ou períodos específicos.

Para redefinir as análises de bloco, clique em ⋮ > Reset analytics ("Redefinir análises"). Essa ação não pode ser desfeita.

Exibir regras para blocos

Muitos tipos de blocos, como de conteúdo dinâmico e campo personalizado, deixam você definir condições para decidir quando vão aparecer no checkout. É possível criar várias regras de exibição por bloco, bem como escolher se todas ou se só uma precisa ser verdadeira para que o bloco seja mostrado.

A sintaxe da regra de exibição varia conforme o tipo de bloco que você está criando. Mas, em geral, as regras são construídas com os seguintes elementos em ordem, quando aplicável:

A categoria da regra, como Product type ou Cart total.
O operador lógico, como Is, Is not, Is greater than, Contains ou Ends in.
O parâmetro que define o valor específico que você quer, como Dresses ou 50.00.

Por exemplo, se você quiser exibir um banner para clientes que gastam muito a fim de incentivá-los a criar uma conta, crie um bloco com as seguintes regras de exibição:

Only show when: All rules pass
Cart total > Is greater than or equal to > USD > 100.00
Customer is logged in > False

De acordo com esse conjunto de regras de exibição, o banner será mostrado apenas quando a pessoa tiver gasto US$ 100,00 ou mais e não tiver feito login em uma conta de cliente. Se o cliente já tiver feito login ou não tiver gasto esse mínimo, o banner não aparecerá.

IDs do bloco de apps

Alguns blocos, como de campo personalizado ou conteúdo dinâmico, deixam você escolher um ID de bloco de app. Um ID de bloco de app de 0 é selecionado por padrão.

Um ID de bloco de app permite adicionar diversos blocos do mesmo tipo a diferentes seções do checkout. Esse recurso funciona como um marcador de posição que pode carregar vários blocos possíveis conforme as regras de exibição configuradas. Você tem a opção de incluir até dez "marcadores de posição" do bloco de app em cada página de checkout.

Exemplo 1: usar diversos IDs de bloco de app para especificar diferentes locais para blocos distintos do mesmo tipo.

Você quer mostrar uma caixa de seleção obrigatória na principal área de conteúdo, mas com uma mensagem de presente opcional na barra lateral. Ambos esses blocos são do mesmo tipo, campo personalizado. Então, é possível adicionar o bloco de app Campo personalizado duas vezes ao editor de checkout e contas e colocar cada um onde quiser. No entanto, você precisa saber qual bloco fica em cada lugar.

Por exemplo, é possível definir o ID do bloco de app 1 para a caixa de seleção e 2 para a mensagem de presente opcional. Depois disso, no editor de checkout e contas, coloque o bloco de app de Campo personalizado na área de conteúdo principal para usar o ID 1 e exibir a caixa de seleção obrigatória. Em seguida, posicione o outro bloco de app de Campo personalizado na barra lateral para usar o ID 2 e mostrar a mensagem de presente opcional.

Exemplo 2: usar o mesmo ID do bloco de app para especificar um único local para blocos do mesmo tipo com regras de exibição diferentes.

Você oferece três descontos automáticos de frete:

Um desconto de 10% para pedidos acima de US$ 25,00
Um desconto de 25% em pedidos acima de US$ 50
Frete grátis em pedidos acima de US$ 100,00

Para incentivar clientes a adicionar mais itens ao carrinho antes de finalizar o pedido, coloque um banner dinâmico na seção de Forma de frete do checkout que mostra quanto falta para ganhar um desconto no frete.

É possível configurar até três blocos de conteúdo dinâmico com o mesmo ID, como 6:

Tabela com exemplo de três blocos de conteúdo dinâmico, suas regras de exibição e conteúdo.
Nome do bloco	Regra de exibição	Conteúdo do banner
Nível de frete 1	Total do carrinho menor que US$ 25,00	"Seu carrinho pode ganhar um desconto de 10% no frete se você gastar US$ 25,00 ou mais."
Nível de frete 2	Total do carrinho menor que US$ 50,00	"Seu carrinho pode ganhar um desconto de 25% no frete se você gastar US$ 50,00 ou mais."
Nível de frete 3	Total do carrinho menor que US$ 100,00	"Seu carrinho pode ganhar frete grátis se você gastar US$ 100,00 ou mais."

Deixe o bloco Nível de frete 1 com a maior prioridade e o Nível de frete 3 com a menor. Assim, se o cliente gastar menos de US$ 25,00, mesmo que os outros blocos também possam aparecer, o Nível 1 vai ser mostrado com a mensagem certa. Se o cliente gastar mais de US$ 25,00, mas menos de US$ 50,00, o Nível 2 vai ser exibido, mesmo que o Nível 3 também possa ser apresentado.

Por último, no editor de checkout e contas, é possível incluir um bloco de conteúdo dinâmico com o ID 6 na seção Taxa de frete. O bloco mais adequado dos três que você criou vai aparecer nesse espaço durante a compra. Se o cliente gastar mais de US$ 100,00, nenhum conteúdo dinâmico vai aparecer, porque nenhuma regra de exibição dos blocos de app com ID 6 foi cumprida.