Personalizações de checkout comuns usando o Checkout Blocks

É possível personalizar o checkout de várias maneiras com o Checkout Blocks. Esta página contém guias rápidos para algumas personalizações de checkout comuns com o Checkout Blocks.

Criar níveis de desconto de frete para valores de carrinho específicos

Para criar níveis de desconto de frete, como “50% de desconto no frete para pedidos acima de US$ 50” e “frete grátis para pedidos acima de US$ 100”, crie vários descontos de frete automáticos com base na regra Subtotal do carrinho. Se um checkout atender aos critérios de vários descontos, o de maior valor será aplicado.

Etapas:

  1. No admin da Shopify, acesse Apps > Checkout Blocks.

  2. Clique em Descontos > Adicionar desconto > Valor de desconto no frete.

  3. Na seção Valor de desconto no frete, selecione Desconto automático e adicione a mensagem do desconto (por exemplo: 50% de desconto no frete para pedidos acima de US$ 50).

  4. Na seção Configuração de desconto, crie o conjunto de regras de desconto personalizado:

    1. No menu suspenso Valor do desconto, selecione Porcentagem e adicione 50%.
    2. Na Regras de desconto seção, configure o conjunto de regras:
      1. Clique em ⊕ Adicionar regra.
      2. Configure a regra para ser Subtotal do carrinho > É maior ou igual a > 50,00.
  5. Opcional: é possível configurar as seguintes opções:

    • Opções de entrega: para especificar a quais opções de entrega o desconto será aplicado. Ao selecionar opções específicas, é possível aplicar a opções por título, preço ou tipo de entrega.
    • Combinações: para permitir que os clientes combinem o código de desconto com descontos de produto ou de pedido.
    • Datas de vigência: para especificar quando o desconto começa e se ele expira.
  6. Na seção Resumo, analise as informações do desconto para confirmar que ele está configurado corretamente.

  7. Clique em Salvar.

  8. No admin da Shopify, volte para Apps > Checkout Blocks.

  9. Clique em Descontos > Adicionar desconto > Valor de desconto no frete.

  10. Na seção Valor de desconto no frete, selecione Desconto automático e adicione a mensagem do desconto (por exemplo: Frete grátis para pedidos de US$ 100+).

  11. Na seção Configuração de desconto, crie o conjunto de regras de desconto personalizado:

    1. No menu suspenso Valor do desconto, selecione Frete grátis.
    2. Na Regras de desconto seção, configure o conjunto de regras:
      1. Clique em ⊕ Adicionar regra.
      2. Configure a regra para ser Subtotal do carrinho > É maior ou igual a > 100,00.
  12. Opcional: é possível configurar as seguintes opções:

    • Opções de entrega: para especificar a quais opções de entrega o desconto será aplicado. Ao selecionar opções específicas, é possível aplicar a opções por título, preço ou tipo de entrega.
    • Combinações: para permitir que os clientes combinem o código de desconto com descontos de produto ou de pedido.
    • Datas de vigência: para especificar quando o desconto começa e se ele expira.
  13. Na seção Resumo, analise as informações do desconto para confirmar que ele está configurado corretamente.

  14. Clique em Salvar.

Alterar o texto “OR” abaixo dos métodos de checkout acelerado

É possível mover um bloco de ícones de frete e pagamento para que ele seja exibido abaixo da linha divisória ---- OR ----, sob as opções de pagamento do checkout acelerado, e alterar o texto “OR” para um texto personalizado de sua preferência, como “Formas de pagamento aceitas” ou “Transportadoras compatíveis”.

Imagem dos botões de pagamento acelerado e ícones de pagamento adicionais no checkout. A linha divisória “OR” está destacada.

Etapas:

  1. Crie e configure um bloco de ícones de frete e pagamento no editor de checkout e contas.
  2. Arraste e solte o bloco Ícones de frete e pagamento para que ele seja exibido abaixo da seção Carteiras.
  3. No admin da Shopify, acesse Loja virtual > Temas.
  4. No tema ativo, clique em ... > Editar conteúdo do tema-padrão.
  5. Use a barra de pesquisa para pesquisar o termo alternative.
  6. No banner Forma de pagamento alternativa do checkout, altere o campo Or para incluir o texto personalizado.
  7. Clique em Salvar.

Exibir uma mensagem abaixo de formas de frete específicas

É possível usar o bloco de conteúdo dinâmico para exibir uma mensagem abaixo de formas de frete específicas durante o checkout.

Por exemplo, se você oferece as taxas de frete Padrão, Expresso e Expresso internacional, pode ser uma boa ideia exibir uma mensagem breve abaixo da opção de frete “Internacional” para esclarecer que as cobranças de alfândega e os tributos de importação não estão incluídos no preço do frete exibido.

Etapas:

  1. No admin da Shopify, acesse Apps > Checkout Blocks.

  2. Clique em Blocos e, depois, em Criar bloco.

  3. Clique em Conteúdo dinâmico.

  4. Na seção Nome do bloco, digite um nome para o bloco. Ele não é exibido para os clientes.

  5. Na seção ID do bloco, defina o ID como Dinâmico ou aplique um número de ID específico. Saiba mais sobre IDs de bloco.

  6. Na seção Regras de exibição, configure as regras de exibição do bloco para que ele seja exibido somente quando a forma de frete específica for incluída. Neste exemplo, a regra está configurada para exibição abaixo de Expresso internacional:

    1. Clique em ⊕ Adicionar regra de exibição.
    2. Na caixa de diálogo Selecionar uma regra, selecione Título da forma de frete.
    3. Configure a regra como Contém > Internacional.
  7. Na seção Conteúdo, adicione e personalize o conteúdo do bloco:

    1. Na seção Itens de conteúdo, clique em ⊕ Adicionar item de conteúdo e selecione Texto.
    2. Na caixa de diálogo do item de conteúdo, adicione uma mensagem breve, como Podem ser aplicadas taxas alfandegárias e tributos de importação adicionais., e clique em Concluído.
  8. Opcional: na seção Publicação, clique no ícone de lápis para selecionar os mercados e as páginas de checkout em que o bloco será exibido.

  9. Clique em Salvar e defina o status do bloco como Ativo.

  10. No editor de checkout e contas, adicione o bloco dinâmico à seção Taxa de frete do checkout.

  11. Clique em Salvar.

Incluir um campo personalizado na guia de remessa do pedido

O Checkout Blocks permite que a loja colete dados de clientes com um bloco de campos personalizados e salve esses dados em um metacampo de pedido.

Etapas:

  1. No Checkout Blocks, crie e configure um bloco de campo personalizado. Verifique se o bloco está configurado para salvar como um metacampo de pedido.
  2. No admin da Shopify, acesse Configurações > Frete e entrega.
  3. Na seção Documentos, clique em Modelo de guia de remessa.
  4. No local do modelo em que você quer exibir o valor do campo personalizado, adicione a seguinte linha de código e substitua key pela chave do campo personalizado:
{{ order.metafields.checkoutblocks.key }}
  1. Opcional: se quiser exibir o valor do campo personalizado de forma condicional, basta incluir o conteúdo em uma instrução if/else do Liquid com base nas condições necessárias.
  2. Clique em Salvar.

É possível usar vários valores de chave de campo personalizado no modelo de guia de remessa. Por exemplo, este código exibirá o número de pedido de compra de um pedido (metacampo que usa po como chave) somente quando o cliente tiver concordado com os termos do pedido (metacampo que usa agree_to_terms como chave):

{% if order.metafields.checkoutblocks.agree_to_terms %}
    PO #{{ order.metafields.checkoutblocks.po }}
{% endif %}

Adicionar um campo personalizado de um pedido ao perfil do cliente

É possível sincronizar os dados de pedidos capturados por blocos de campos personalizados usando o app Shopify Flow.

É possível baixar um arquivo .flow de exemplo para adicionar um valor de metacampo birth_date a um perfil de cliente. Personalize os valores desse modelo para que correspondam às chaves de campo personalizado que você quer adicionar.

Etapas:

  1. No Checkout Blocks, crie e configure um bloco de campo personalizado. Verifique se o bloco está configurado para salvar como um metacampo de pedido.
  2. No Shopify Flow, configure um fluxo de trabalho personalizado para ser executado quando um pedido for feito:
    1. Clique em Criar fluxo de trabalho > Selecionar um acionador.
    2. Selecione Shopify > Pedido criado.
    3. No acionador, clique em Então ⊕ > Condição.
    4. Clique em Adicionar uma variável e selecione Pedido > metacampos > chave.
    5. No campo Chave, adicione a chave do campo personalizado que você quer adicionar ao perfil do cliente, como birth_date.
    6. Na condição, clique em Então ⊕ > Ação.
    7. Clique em Shopify > Atualizar metacampo do cliente.
  3. Na Atualizar metacampo do cliente seção, insira as seguintes informações:
    1. Namespace do metacampo: o metacampo que você quer adicionar, como personal_info.
    2. Chave: a chave do metacampo, como dob.
    3. Tipo: o tipo de valor que você quer incluir, como Data.
    4. Valor:
{% assign dob_key = "birth_date" %}
{% for metafields_item in order.metafields %}
{% if metafields_item.key == dob_key %}
    {{metafields_item.value}}
{% endif %}
{% endfor %}

Quando o fluxo estiver concluído, clique em Ativar fluxo de trabalho para ativá-lo.