Atualizar seu checkout online

Esta página foi impressa em Apr 27, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/checkout-settings/checkout-upgrade.

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 finalização de compra do cliente. Dependendo das personalizações realizadas, talvez seja necessário alterar o arquivo checkout.liquid antes da atualização.
  2. Quando as alterações estiverem como você deseja, atualize sua loja para que use o novo checkout da Shopify.

Nesta página

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.

Etapas:

  1. No admin da Shopify, acesse a página de Atualização de checkout e clique em Pré-visualização.
  2. Selecione o tema atual na lista e clique em Pré-visualizar.
  3. Crie um checkout de teste realizando o processo como se fosse um cliente.

Se você encontrar um erro durante os testes, alguma personalização do checkout poderá estar em conflito com outras melhorias da nova versão. Nesse caso, faça mudanças no 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 no botão … e em Duplicar.
  3. Em Mais temas, localize o tema duplicado e clique no botão … > Editar código. Faça e teste suas edições na versão duplicada e não publicada.

  1. Abra o arquivo checkout.liquid.

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

Se você encontrar erros ou problemas na aparência do checkout, edite o 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:

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

Novidades do checkout da Shopify

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

Assinaturas

Várias seções foram adicionadas ao checkout da Shopify para que você possa oferecer produtos por assinatura e manter as personalizações. As seções permitem a venda por assinatura e o processamento de pagamentos recorrentes diretamente no checkout.

Após concluir a atualização do checkout, adicione um app de assinaturas da Shopify App Store para oferecê-las ou crie um app personalizado com as novas APIs Subscriptions.

Saiba mais sobre assinaturas na Central de ajuda da Shopify.

  • Quando as assinaturas são habilitadas, as formas de frete usadas por elas são exibidas separadamente daquelas de compra única.
  • .product_description_variant Span.product_description_selling_plan aparece como uma propriedade de item de linha adicional no caso de haver uma assinatura associada ao produto.
  • Um total recorrente acompanhado de uma dica de ferramenta é exibido abaixo do valor no resumo do pedido.
  • As opções de frete para esse tipo de compra são exibidas quando um produto de assinatura é incluído no pedido.

Upsell

Novos apps de upsell pós-venda estão disponíveis na Shopify App Store. Eles apresentam aos clientes ofertas desse tipo no checkout da Shopify e modificam o pedido concluído para incluir o produto de upsell sem inserir novamente nenhuma informação de faturamento ou frete.

O upgrade inclui alterações nos arquivos de checkout, que permitem que as upsells pós-venda funcionem com o checkout personalizado.

Saiba mais sobre upsells pós-venda.

  • Instalar um app de pós-venda válido no admin da Shopify faz com que os clientes recebam ofertas desse tipo.

Gorjeta no checkout

As opções de gorjeta podem ser usadas para permitir que os clientes incluam uma gorjeta no pedido online ou para recolher doações. Quando o recurso está habilitado, a seção Incluir gorjeta é exibida na etapa de escolha da forma de pagamento no checkout. A seção Incluir gorjeta oferece três opções predefinidas, além de um campo em que é possível inserir um valor personalizado.

Saiba mais sobre gorjetas.

  • Quando a gorjeta é habilitada, a seção Incluir gorjeta é exibida na etapa de escolha da forma de pagamento do checkout.

Retirada e entrega local

Entregas e retiradas no local são novas formas que permitem que os clientes recebam os pedidos localmente. Quando esses recursos estão habilitados, os clientes podem selecionar como querem receber o pedido na etapa de frete do checkout.

Saiba como habilitar a retirada no local e a entrega local.

  • Quando a entrega local está habilitada e é selecionada pelo cliente, campos adicionais são exibidos.
  • Caso a entrega local esteja habilitada, a seção de forma de entrega é exibida ao cliente na página de Informações no checkout. Se o frete não estiver disponível, somente os dados de retirada serão mostrados.

  • As formas de entrega aparecem em abas diferentes.

    • Selecionar Envio solicita que os clientes insiram as informações de frete e exibe as formas disponíveis quando clicar em Prosseguir para frete.
    • Selecionar Retirada mostra uma lista de locais. Basta que os clientes cliquem no botão da opção desejada e, em seguida, em Prosseguir para pagamento.

  • Se a opção Retirada for selecionada na etapa de frete do checkout, os respectivos detalhes não serão recolhidos. É necessário que os clientes insiram as informações de faturamento na etapa de pagamento.

  • As instruções de entrega local aparecem na página de status do pedido. Elas podem ser editadas no admin da Shopify, em Configurações > Frete e entrega. Na seção Retirada no local, encontre a localização a ser editada e clique em Gerenciar.

  • A página de status do pedido foi atualizada para exibir o andamento das entregas e retiradas. Mensagens aparecem quando:

    • um pedido foi preparado e está pronto para entrega.
    • uma entrega foi concluída. Esta mensagem também fornece um link para pedir os mesmos itens novamente.
    • um pedido de retirada foi confirmado. Dessa forma, o cliente receberá um e-mail quando o pacote estiver pronto para ser retiradado.
    • um pedido está pronto para ser retirado.
    • um pedido já foi retirado.

Campos internacionais adicionais

Alguns países têm regulamentos de frete exclusivos que precisam ser atendidos para que as remessas cheguem até os clientes. Para esses casos, campos adicionais são disponibilizados e exibidos na etapa de forma de pagamento no checkout.

Saiba mais sobre os campos internacionais adicionais.

  • Os campos de checkout adicionais são exibidos apenas para clientes no Brasil, Coreia do Sul, Itália e China.

Acompanhar pedido com o botão do Shop

O botão Acompanhar pedido com o Shop nas páginas de status do pedido e de conclusão da compra tem um novo design.

Saiba mais sobre o app do Shop.

  • Um botão de texto foi adicionado e permite que os clientes possam acompanhar a compra no app do Shop.
  • Parâmetros incluídos para exibição de acompanhamento do Shop Pay.
  • Renderização do botão Acompanhar pedido com o Shop nos seguintes casos:
    • Tentativa de entrega
    • confirmação
    • Entregue
    • falha
    • Em trânsito
    • frete indisponível
    • Saiu para entrega

Atualizações da página de status do pedido

Várias atualizações foram feitas na página de status do pedido.

  • Uma seção dedicada para informações sobre cartão-presente foi criada. Ela é exibida quando um novo cartão é comprado.
  • Informações de assinaturas foram adicionadas.
  • A classe icon-svg--align-text-bottom foi removida.
  • data-step="thank-you" foi alterado para data-step="thank_you". Caso você use o atributo para identificar em qual página do checkout o cliente está, utilize o objeto JavaScript Shopify.Checkout.page.
  • Um cartão de status do pedido foi adicionado.

Alterações no arquivo geral

  • div.content-box__row agora contém role="table".
  • Caso o cliente esteja na etapa de conclusão da compra e tenha o pacote QR, show_qr.js será adicionado.
  • Uma verificação foi incluída para garantir que o cliente tenha acesso ao checkout.
  • Agora, os cartões-presente são exibidos com checkouts/order_status/gift_cards.
  • As instruções sobre informações de contato foram corrigidas com enforce_content_directionality.
  • As informações de frete foram transferidas para checkouts/web/checkouts/contact_information/pickup.
  • Agora a exibição de várias linhas de frete na barra lateral de resumo do pedido é compatível.
  • tr.total-line será exibido apenas caso haja totais atualizados.
  • Agora as linhas de pagamento genéricas são compatíveis.
  • Agora a alteração da moeda durante o checkout é compatível.

  • #payment-gateway-subfields possui classes:

    • .radio-wrapper content-box__row .content-box__row--secondary
    • .card-fields-container

  • A dica de ferramenta de cartão de crédito foi ajustada e agora está em div.field__icon.

  • O atributo aria-label foi removido da descrição completa das taxas de frete.

  • Os campos de formulários das taxas de frete foram transferidos para checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields.

Estados de estruturas/carregamento

Os estados de carregamento das páginas de checkout foram atualizados, incluindo estruturas visíveis enquanto a página é carregada ou ocultando seletivamente alguns elementos até que o processo seja concluído. As alterações otimizam os tempos de carregamento.

  • Objetos ocultos ao carregar:

    • del.total-recap__original-price
    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis

  • Objetos que exibem uma estrutura ao carregar:

    • Span.total-recap__final-price
    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price.total-line--subtotal span.order-summary__emphasis

Mensagens de erro

Novas mensagens de erro foram adicionadas ao checkout.

  • Um aviso de número cívico foi adicionado ao campo endereço.
  • Um aviso indicando que não há taxas de frete disponíveis para um carrinho, destino ou país foi separado em duas mensagens diferentes: uma indicando que não há tarifas disponíveis para um carrinho ou destino e outra dizendo que não há tarifas disponíveis para um país.
  • Um banner de aviso foi adicionado ao checkout durante uma tentativa de conclusão de compra em uma loja de desenvolvimento.
  • Um aviso foi incluído e exibido uma vez que o cliente não foi cobrado durante o checkout.
  • Um banner de aviso apareceu para indicar um erro de alteração de autenticação.
  • Uma mensagem de erro foi adicionada para indicar quando as formas de frete estão indisponíveis na etapa de frete do checkout.

Alterações no atributo de dados

Trekkie foi removido dos seguintes objetos:

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • Campos de entrada de checkout:
    • {type}_address_field
    • {type}_firstname_field
    • {type}_lastname_field
    • {type}_company_field
    • {type}_address1_google_autocomplete_field
    • {type}_address1_field
    • {type}_address2_field
    • {type}_city_field
    • {type}_country_field
    • {type}_province_field
    • {type}_zip_google_autocomplete_field
    • {type}_phone_field

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.

  • role="list" foi adicionada à ul de:

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • A dica de contexto foi removida de aria-labelledby em telephone_field.

  • No Shop, a etiqueta de entrada foi alterada para se referir ao telefone.

  • Foram adicionados títulos h3 ao aguardar tributos.

  • Foram incluídos títulos h3 para o redirecionamento.

  • Ao carregar as formas de frete, a tag p foi alterada para h3.

  • Agora, o recurso autocompletar refere-se a mobile tel, em vez de phone.

  • div[data-processing-order] foi atualizado com a adição de role="region".

  • div[data-announce-change] foi atualizado da seguinte maneira:

    • adicionado role="region"
    • aria-labelledby foi configurado para corresponder ao ID do elemento de cabeçalho.
    • aria-describedby foi configurado para corresponder ao ID do elemento de contêiner de conteúdo.

  • div.content-box blank-slate foi atualizado da seguinte maneira:

    • adicionado role="region"
    • aria-labelledby foi configurado para corresponder ao ID do elemento de cabeçalho.

  • A grade de checkout expresso foi aprimorada para usar os elementos ul e li, em vez de div.

  • O resumo do pedido foi atualizado:

    • O preço promocional e o normal tiveram melhorias em relação à compreensão.
    • A extensão da tag dl foi alterada.
    • A tag del foi alterada para dt e dd.

  • Os métodos de informação de pagamento foram atualizados da seguinte forma:

    • span.radio__label__accessory mudou para div.radio__label__accessory
    • span.visually-hidden mudou para h3.visually-hidden
    • span.payment-icon-list__more mudou para li.payment-icon-list__more
    • span.content-box__small-text mudou para small.content-box__small-text

Tudo pronto para começar a vender com a Shopify?

Experimente de graça