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.

Uma versão atualizada do checkout estará disponível em fevereiro de 2019. Esta atualização apresenta várias melhorias visuais que afetarão a aparência de seu checkout.

Você tem até o dia 4 de março de 2019 para fazer as alterações necessárias em seu arquivo checkout.liquid e testar (em pré-visualização) as alterações com o novo checkout da Shopify. Se você não atualizar seu checkout até 4 de março de 2019, sua loja será atualizada automaticamente para a nova versão do checkout da Shopify.

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.

    De acordo com as personalizações que você fez em seu checkout, pode ser necessário fazer alterações no arquivo checkout.liquid antes que você possa realizar a atualização.

  2. Quando estiver satisfeito com suas alterações, atualizar 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 visualizar as alterações. Ou seja, finja que você é um cliente e crie checkouts de teste. Se você encontrar algum erro durante esses testes, existe alguma personalização de checkout em conflito com outras melhorias na nova versão. Nesse caso, você precisa alterar seu arquivo checkout.liquid antes de atualizar.

Etapas:

  1. Duplique seu tema atual:

    1. Na sua Loja virtual, clique em Temas.
    2. Clique em Ações e, em seguida, clique em Duplicar:
      Arquivo de tema duplicado
      Uma versão duplicada (e não publicada) do seu tema atual é criada.
  2. 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 do seu tema duplicado usando o novo checkout da Shopify:

    1. Volte para a página de atualização do checkout, clique em Visualizar checkout e, em seguida, escolha o tema duplicado:
      Pré-visualização do checkout
    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 seus arquivos checkout.liquid para resolvê-los.

Se você não encontrar erros durante os testes, o checkout é compatível com a nova versão do checkout da Shopify. Você pode atualizar para a nova versão do checkout da Shopify e atualizar seu tema.

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. Publique seu tema duplicado (e agora 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.

Descontos

Foram feitas mudanças visuais (HTML e CSS) em relação à exibição de descontos automáticos e descontos de script no resumo do pedido. Por exemplo, um ícone aparece ao lado dos itens de linha afetados pelo desconto automático:

Alterações em descontos automáticos

Também foram feitas pequenas alterações visuais (HTML e CSS) nos ícones que indicam a aplicação de um código de desconto a um item de linha.

Atendimento internacional para campos de endereço

Foram feitas alterações no arquivo countries.js para que os clientes tenham mais facilidade no preenchimento de seus endereços. O arquivo countries.js controla como os campos de endereço são formatados e quais campos aparecem, dependendo do país do cliente.

As alterações em countries.js incluem:

  • Atualização da lista de províncias e estados dos países aceitos.

  • Ajuste da largura de alguns campos de endereço.

Se você tiver personalizações que usam countries.js, precisará verificar se essas personalizações funcionam na pré-visualização do checkout. Se você tiver personalizações que adicionem ou ocultem campos de endereço, talvez seja necessário atualizá-los.

Preenchimento automático de campos de endereço

O recurso de preenchimento automático agora usa um serviço da Shopify para enviar dados ao Google. Como resultado, a vinculação do preenchimento automático do checkout deixou de se apoiar em data=”google_autocomplete_*” para usar data=”autocomplete_*”.

Se você fez personalizações no recurso de preenchimento automático, talvez seja necessário renomear as referências de google_autocomplete_* para autocomplete_*.

Se você adicionou seu próprio recurso de preenchimento automático (isto é, adicionou um código personalizado que substitui o recurso de preenchimento automático da Shopify), ele continuará a ser usado em sua loja (portanto, essas alterações de preenchimento automático não devem afetar sua loja).

O preenchimento automático de endereços é compatível com os seguintes países:

  • Austrália (AU)
  • Bélgica (BE)
  • Brasil (BR)
  • Canadá (CA)
  • Suíça (CH)
  • Alemanha (DE)
  • Dinamarca (DK)
  • Espanha (ES)
  • França (FR)
  • Hong Kong (HK)
  • Índia (IN)
  • Itália (IT)
  • Japão (JP)
  • Luxemburgo (LU)
  • Países Baixos (NL)
  • Nova Zelândia (NZ)
  • Estados Unidos (US)
  • Cingapura (SG)

Melhorias de acessibilidade nos campos de endereço

Alterações visuais (HTML, SVG e CSS) foram feitas nos campos de endereço que usam menus suspensos (por exemplo, o campo País). Essas alterações melhoram a experiência de clientes que usam software de acessibilidade:

Alterações nos campos suspensos

Ícones de cartão de crédito

Foram feitas alterações visuais (HTML e CSS) nos ícones de cartão de crédito que aparecem quando um lojista insere as informações do cartão de crédito dele. Ao detectas o tipo de cartão de crédito, a Shopify destaca o ícone do cartão de crédito.

Alterações no Shopify Pay

Foram feitas alterações visuais (HTML e CSS) no pop-up de verificação do Shopify Pay, que solicita a seus clientes que insiram o código do Shopify Pay:

Alterações no prompt do Shopify Pay

Página de status do pedido

Foram feitas alterações visuais (HTML e CSS) e de conteúdo na página Status do Pedido. Essas alterações incluem o reordenamento e a atualização de conteúdo. Além disso, agora seus clientes de dispositivos móveis podem optar por usar o app móvel Arrive para rastrear o envio de seus pacotes.

Um novo botão permite que os clientes usem o app Arrive para rastrear a chegada de seus pacotes

Botões de checkout expresso

Foram feitas alterações visuais (HTML e CSS) que afetam a apresentação das opções de checkout expresso. Por exemplo, essas opções agora estão agrupadas numa caixa e alguns botões (como o do Google Pay) usam IFrames.

O novo checkout verifica o navegador do seu cliente para obter as preferências de pagamento e as informações de login e, em seguida, usa essas informações para solicitar os botões e, quando possível, fazer login no cliente:

Alterações no formato das opções de checkout expresso

Política e Termos de Serviço:

A política de reembolso, a política de devolução e o conteúdo dos Termos de Serviço agora aparecem em um IFrame que aparece dentro da janela modal:

Novo IFrame para políticas

Pronto(a) para começar a vender com a Shopify?

Experimente de graça