Atualizar seu checkout online

Você pode personalizar seu checkout virtual para ampliar o alcance de sua marca, alterar os textos das mensagens, disponibilizar ofertas e trazer outras melhorias para a experiência de seus clientes. Para garantir que suas personalizações sejam compatíveis com as alterações contínuas feitas pela Shopify, você precisa atualizar seu checkout periodicamente.

Para se preparar para essa atualização, você precisa fazer o seguinte:

  1. Pré-visualize o novo checkout e teste a experiência de checkout voltada para o cliente. Dependendo das personalizações que você fez no seu checkout, talvez seja necessário fazer alterações no arquivo checkout.liquid antes de realizar a atualização.
  2. Quando as alterações estiverem como você deseja, atualize sua loja para que use o novo checkout da Shopify.

Pré-visualização de seu checkout e teste para detectar erros

Antes de atualizar sua loja para usar a nova versão do checkout, não se esqueça de pré-visualizar as alterações.

Pré-visualização do checkout

Faça de conta que você é um cliente e crie checkouts de teste. Se você encontrar algum erro durante esses testes é porque existe alguma personalização de checkout em conflito com outras melhorias na nova versão. Nesse caso, você precisa fazer alterações em seu arquivo checkout.liquid antes de realizar a atualização.

Resolução de erros

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Clique em Ações e, depois, em Duplicar.
  3. Em Mais temas, localize seu tema duplicado e clique em Ações > Editar código. Faça suas edições e teste-as usando essa versão duplicada e não publicada do seu tema.
  1. Abra o arquivo checkout.liquid.

  2. Pré-visualize o arquivo checkout.liquid de seu tema duplicado usando o novo checkout da Shopify:

    1. Acesse a página de Atualização de checkout do admin da Shopify, clique em Pré-visualização do checkout e escolha o tema duplicado.
    2. Conclua os pedidos de teste na pré-visualização.

Se você encontrar erros ou notar problemas na aparência do checkout, será necessário editar seu arquivo checkout.liquid para resolvê-los.

Atualize para o novo checkout da Shopify

A atualização do seu checkout é um processo de duas etapas que exige que você atualize a verificação da Shopify e substitua o tema atual publicado pela cópia duplicada que contém suas alterações.

Escolha um horário de menos movimento para atualizar, como de manhã cedo, tarde da noite ou no fim de semana, para minimizar possíveis interrupções.

Etapas:

  1. Na página de atualização do checkout, clique em Atualizar checkout (esse botão está localizado na parte inferior da página).

  2. Se você encontrou erros ao visualizar seu tema pela primeira vez, certifique-se de que eles foram solucionados (consulte Resolução de erros acima). Em seguida, publique seu tema duplicado atualizado:

    1. Na sua Loja virtual, clique em Temas.
    2. Encontre o tema duplicado e clique em Ação > Publicar.

Seu checkout será atualizado e o tema duplicado passará a ser seu tema atual.

O que há de novo no checkout da Shopify

A nova versão do checkout da Shopify contém as seguintes alterações e novos recursos:

  • Variáveis de desconto do Liquid
  • Ativação do Shop
  • Edição de pedidos
  • Melhorias de acessibilidade
  • Preenchimento removido
  • Exibição de formas de pagamento
  • Strings de marcador de posição removidas
  • Exibição de endereço do cliente salvo
  • Autenticação com 3D Secure
  • Alterações adicionais de campos JavaScript do Google Analytics
  • Alterações de CSS
  • Mensagens de erro

Variáveis de desconto do Liquid

Diversas variáveis novas do Liquid relacionadas à exibição de descontos foram introduzidas em todo o processo de checkout. Essas alterações ajudam a representar descontos automáticos e baseados em script de uma maneira que faz sentido para seus clientes.

Tabela com as novas variáveis do Liquid
Variável Definição
checkout. cart_level_discount_applications Retorna uma matriz das aplicações de desconto em carrinhos específicos para o checkout.
line_item. discount_allocations Retorna uma lista de todas as alocações de descontos que contêm o valor com desconto e a referência à aplicação do desconto pai. line_item.discount_allocations está disponível em itens de linha em carrinhos, checkouts, pedidos e rascunhos de pedido.
line_item. final_line_price Retorna o preço combinado de todos os itens no item de linha. Esse valor é igual a line_item.final_price multiplicado por line_item.quantity .
line_item. final_price Retorna o preço do item de linha, incluindo todos os valores de desconto no nível de linha.
line_item. line_level_discount_allocations Retorna uma lista de alocações de desconto de linhas específicas contendo o valor com desconto e a referência à aplicação do desconto pai. line_item.line_level_discount_allocations está disponível em itens de linha em carrinhos, checkouts, pedidos e rascunhos de pedido.
line_item.total_discount Retorna o valor total de todos os descontos aplicados ao item de linha. Esse atributo só tem um valor se você estiver usando o app Script Editor.

Ativação do Shop

Um campo de número de telefone dedicado foi adicionado à página de status do pedido. Os clientes recebem uma solicitação para inserir um número de celular a fim de receber atualizações de envio por SMS. As mensagens também incluem um link para o app do Shop.

Edição de pedidos

Quando a edição de pedidos estiver disponibilizada para os lojistas do Shopify Plus, ela permitirá a captura de pagamentos pendentes adicionais nos pedidos editados usando o checkout da Shopify. Algumas alterações foram feitas para garantir que a página de checkout funcione como previsto:

  • O cliente não pode alterar as informações de contato, o endereço de entrega ou a forma de frete.
  • Agora, há itens de linha adicionais que indicam o total do pedido e o valor já pago.
  • O botão Finalize a compra mudou para Pagar agora. O Total mudou para Valor a pagar.
  • Em vez da trilha de navegação, que exibe onde o cliente está no processo de checkout, ele agora vê um banner recolhível com informações adicionais sobre o pedido: - Valor do pagamento adicional
    • Produtos adicionados ou removidos do pedido
    • Número do pedido

Imagem que mostra a página de checkout quando algum pagamento adicional é necessário

Essas alterações entrarão em vigor somente quando um pedido for editado e exigir um pagamento adicional de seu cliente.

Caso suas personalizações de checkout usem trilhas de navegação para identificar a etapa atual do checkout, você precisa usar o objeto Shopify.Checkout.step. Consulte Identificação da etapa para saber mais.

Melhorias de acessibilidade

Várias alterações foram introduzidas no checkout para assegurar a conformidade com os padrões de acessibilidade da Web. Isso facilita a navegação no processo de checkout dos clientes que utilizam a tecnologia de acessibilidade, como leitores de tela.

  • Agora, a trilha de navegação está encapsulada num elemento nav em todas as etapas de checkout. O atributo aria-current foi movido do elemento span para o elementoli.
  • Agora, os resumos de pedidos residem num elemento aside.
  • A ID do campo de código de desconto para clientes de dispositivos móveis foi alterado de checkout_reduction_code para checkout_reduction_code_mobile em todas as etapas de checkout.
  • Os atributos de acessibilidade foram adicionados ao mapa nas páginas Obrigado e Status do pedido. O mapa agora tem role=region e aria-label com o endereço de entrega.
  • step e divs do wrapper step__section foram adicionados às páginas Status do pedido, Fora de estoquee Obrigado.
  • Os elementos HTML5 semânticos foram introduzidos no processo de checkout e os atributos role foram atualizados. - O resumo do pedido agora está dentro de um elemento aside.
    • A div para .main__header agora é um elemento de cabeçalho com role=banner.
    • A div para .main__content agora é um elemento principal com role=main.
    • A div para .main__footer agora é um elemento de rodapé com role=contentinfo.
    • A div para banner agora é um cabeçalho com role=banner.

Preenchimento removido

As páginas Status do pedido, Fora de estoquee Obrigado tiveram espaço em branco removido entre o nome da loja e o número do pedido. Esse preenchimento extra foi removido da seção div.section.section--page-title.

Exibição de formas de pagamento

O valor total de um pedido agora aparece para os clientes na página de status do pedido na seção Forma de pagamento.

Imagem da página de status do pedido que mostra o valor total do pedido

Strings de marcador de posição removidas

Os campos Marcador de posição de e-mail e Marcador de posição de e-mail ou telefone foram removidos das opções de idioma nas configurações do seu tema. Todas as alterações necessárias podem ser feitas nos campos Etiqueta de e-mail, Etiqueta de e-mail ou telefone, respectivamente. Para acessar esses campos, acesse Loja virtual > Temas e clique em Ações > Editar idiomas > Checkout e sistema.

Exibição de endereço do cliente salvo

A maneira como os endereços salvos são exibidos durante o checkout dos clientes registrados foi alterada.

Imagem que mostra uma lista de endereços salvos

As opções de endereço são exibidas na seguinte ordem:

  1. O endereço salvo padrão.
  2. Os endereços adicionados mais recentemente, do mais recente ao menos recente.
  3. A opção de usar um novo endereço.

O menu suspenso exibe no máximo cinco endereços.

Autenticação com 3D Secure

A tecnologia 3D Secure oferece uma camada adicional de segurança que os clientes precisam concluir antes de finalizar a compra, além de habilitar serviços como Verified by Visa, MasterCard Identity Check ou Amex SafeKey. Durante o checkout, alguns clientes podem ser redirecionados para o portal do banco deles para realizar uma autenticação adicional. Para saber mais, consulte Noções básicas sobre PSD2 e uma Autenticação Segura do Cliente.

Os lojistas localizados no Espaço Econômico Europeu (EEE) podem usar a Cardinal para oferecer checkouts com 3D Secure. Para saber mais, consulte 3D Secure com a Cardinal.

A decisão de quais checkouts exigem verificação adicional é determinada pelo banco e não pode ser controlada usando o admin da Shopify. A ativação dessa alteração não requer nenhuma ação.

Alterações adicionais de campos JavaScript do Google Analytics

O JavaScript inserido na seção JavaScript adicional do Google Analytics em seu admin da Shopify em Loja virtual > Preferências é adicionado ao checkout como um iFrame não visível. Isso não afeta o JavaScript utilizado para fins de análise, mas impede que outras alterações sejam feitas no checkout. Se você quiser adicionar um JavaScript personalizado ao seu checkout por outros motivos, adicione-o diretamente ao arquivo checkout.liquid.

Alterações de CSS

heading-* e classes CSS text-container foram adicionadas a todas as etapas de checkout.

Mensagens de erro

Foi adicionado um banner de erro, que informa aos clientes quando a forma de pagamento do checkout expresso escolhida não estiver disponível. Esse banner é exibido na parte superior da etapa Informações de contato do checkout.

Imagem

O banner de erro informando aos clientes que uma taxa de frete anterior não é mais válida foi transferido de lugar. Esse banner agora aparece diretamente acima das opções de frete disponíveis.

Imagem

Pronto para começar a vender com a Shopify?

Experimente de graça