Blocos de campo personalizado

Requisito de plano

Creating a custom field block está disponível apenas para lojistas no plano Shopify Plus.

É possível coletar informações adicionais de clientes com o bloco de Campo personalizado. Esses campos podem ser opcionais ou obrigatórios. Assim, você tem a opção de configurá-los para bloquear o checkout antes que o cliente prossiga.

O Checkout Blocks aceita vários tipos de entrada, incluindo texto simples, menus suspensos, caixas de seleção e um seletor de data. Os dados do campo personalizado podem ser salvos como um metacampo do pedido, um atributo do pedido ou uma observação.

Existem vários modelos disponíveis que preenchem previamente o conteúdo e as configurações de um bloco de campo personalizado com base em alguns casos de uso comuns:

• Aceitar termos: esse modelo exige que o cliente aceite seus Termos de serviço, que podem ser clicados e exibidos em uma janela pop-up antes do checkout. A caixa de seleção não está selecionada por padrão.
• Data de nascimento: esse modelo dá a clientes a opção de incluir a data de nascimento durante o checkout para fins de marketing.
• Mensagem de presente: esse modelo dá a clientes a opção de incluir uma mensagem escrita opcional ao realizar um pedido como presente para outra pessoa.

Dica

O modelo-padrão de Data de nascimento não gera nem envia automaticamente um código de desconto para as pessoas usarem no aniversário. Também não aplica automaticamente os metadados do pedido ao perfil do cliente. Considere criar um código de desconto de aniversário e, em seguida, usar o Shopify Flow para atualizar o perfil do cliente com dados de campo personalizado.

Tipos de dados aceitos

Os campos personalizados são salvos no pedido do cliente como um metacampo do pedido, um atributo de observações sobre o pedido ou as próprias observações do pedido. Considere usar metacampos de pedido quando possível, pois são a maneira mais robusta de armazenar e recuperar dados personalizados de pedidos na Shopify.

O Checkout Blocks não permite adicionar novos campos aos formulários de checkout, como o endereço de entrega ou o endereço de faturamento. Em vez disso, adicione um bloco de campo personalizado acima ou abaixo do formulário de checkout atual.

Metacampos de pedido

Ao salvar campos personalizados em um metacampo do pedido, o namespace usado é checkoutblocks e a chave é definida quando você adiciona um campo personalizado ao bloco (por exemplo, agree_to_terms).

Dica

É possível criar definições de metacampo para exibir campos personalizados específicos direto na página de informações do pedido.

Atributos do pedido

Atributos de pedido, também conhecidos como atributos de observações ou atributos de carrinho, são incompatíveis com as guias de remessa padrão e os rascunhos de pedido da Shopify.

Se você precisar usar guias de remessa ou rascunhos de pedido, use metacampos de pedido como tipo de dados.

Observações de pedido

Quando você salva campos personalizados nas observações sobre o pedido, o conteúdo que o cliente já digitou é substituído pelas suas informações. Portanto, ao fazer isso, é melhor desativar a opção de adicionar uma observação ao carrinho no tema, se estiver ativada. Assim, o cliente não precisa escrever a mesma coisa duas vezes.

Uma vantagem de usar o tipo de observações sobre o pedido é a exibição automática do texto digitado no carrinho durante o checkout. Isso garante consistência em todo o fluxo de finalização da compra para casos de uso específicos, como observações sobre o pedido ou a entrega.

As observações sobre o pedido são incompatíveis com rascunhos de pedido.

Tipos de entrada aceitos

Os blocos de campo personalizado aceitam os seguintes tipos de campos:

• Caixa de seleção
• Seletor de data e hora
• Data de nascimento
• Lista suspensa
• Campo de telefone
• Botões
• Entrada de texto

Criar um bloco de campo personalizado

É possível criar e configurar um bloco de campo personalizado no app Checkout Blocks e, depois, adicioná-lo ao checkout.

Etapas:

1. No admin da Shopify, acesse Canais de vendas > Checkout Blocks.
2. Clique em Blocks ("Blocos") e em Create block ("Criar bloco").
3. Clique em Custom field ("Campo personalizado").
4. Selecione o modelo do campo que você quer usar. Se não quiser campos ou configurações preenchidos previamente, escolha Blank template ("Modelo em branco").
5. Na seção Block name ("Nome do bloco"), digite um nome para o bloco. Essa informação não aparece para clientes.
6. Na seção App block ID ("ID do bloco de app"), use o menu suspenso para aplicar um número de ID específico. Saiba mais sobre IDs de blocos de app.

7. Na seção Display rules ("Regras de exibição"), configure as regras de exibição do bloco:

   • Para mostrar o bloco a todos os clientes, deixe a seção Display rules ("Regras de exibição") vazia.
   • Para criar uma regra de exibição, clique em ⊕ Add display rule ("Adicionar regra de exibição") e configure. É possível incluir quantas forem necessárias.

8. Na seção Content ("Conteúdo"), adicione e personalize o conteúdo do bloco:

   1. No menu Save as ("Salvar como"), selecione onde salvar os dados do campo personalizado. Saiba mais sobre os tipos de dados de campo personalizado.
   2. Na seção Fields ("Campos"), clique em ⊕ Add custom field ("Adicionar campo personalizado") e selecione o tipo que você quer usar.
   3. Configure as informações do campo personalizado, como etiquetas, chave, opções de escolha e se é obrigatório. Clique em Done ("Pronto").
   4. Opcional: na seção Section header ("Cabeçalho da seção"), adicione título e subtítulo ao campo personalizado.
   5. Opcional: na seção Settings ("Configurações"), selecione se quer colocar "optional" ("opcional") na etiqueta de campo e se quer exibir todos os campos.

9. Opcional: na seção Styles ("Estilos"), clique em Customize design ("Personalizar design") para customizar as margens, o recipiente e os estilos do divisor do bloco.

10. Opcional: na seção Publishing ("Publicação"), clique no ícone de lápis para selecionar os mercados e as páginas de checkout em que você quer exibir o bloco.

11. Clique em Salvar.

O bloco fica salvo como Draft ("Rascunho") por padrão. Quando estiver tudo pronto para publicação, na seção Status, selecione Active ("Ativo") no menu suspenso.

Adicionar um bloco de campo personalizado ao checkout

É possível adicionar um bloco de campo personalizado ao checkout. Vale destacar que blocos precisam ser definidos como Ativos para aparecerem durante a finalização da compra.

Etapas:

1. No admin da Shopify, acesse Canais de vendas > Checkout Blocks.
2. Clique em Blocks ("Blocos").
3. Clique no bloco de campo personalizado que você quer adicionar ao checkout.
4. Clique em More actions ("Mais ações") > Add to checkout ("Adicionar ao checkout").
5. Opcional: na seção Preview block id ("Pré-visualizar ID do bloco"), clique na área de transferência para copiar o ID de pré-visualização exclusivo do bloco.
6. Escolha a configuração de checkout e clique em Open editor ("Abrir editor").

7. No editor de checkout e contas, adicione o bloco de campo personalizado ao checkout:

   1. Acesse a página de checkout em que você quer incluir o bloco.
   2. Clique em ⊕ Adicionar bloco de app na seção em que você quer incluir o bloco.
   3. Clique na opção Custom field ("Campo personalizado") do Checkout Blocks.
   4. Defina as informações e selecione o ID do bloco de checkout em questão.
   5. Opcional: use o campo Preview block id (For testing purposes) ("Pré-visualizar ID do bloco [para fins de teste]") e o ID de pré-visualização do bloco para ver como fica a aparência no checkout.
   6. Opcional: arraste e solte o bloco dinâmico para mudar o local na página de checkout onde você quer exibi-lo.

8. Clique em Salvar.