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 onovo checkoute teste a experiência de finalização de compra do cliente. Dependendo das personalizações realizadas, talvez seja necessário alterar o arquivocheckout.liquidantes da 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.

Etapas:

1. No admin da Shopify, acesse a página deAtualização de checkoute clique emPré-visualização.
2. Selecione o tema atual na lista e clique emPré-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 outrasmelhoriasda nova versão. Nesse caso, faça mudanças no arquivocheckout.liquidantes de realizar a atualização.

Resolução de erros

Etapas:

1. No admin da Shopify, acesseLoja virtual>Temas.
2. Clique no botão…e emDuplicar.
3. EmMais 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 arquivocheckout.liquid.

2. Pré-visualize o arquivocheckout.liquidde seu tema duplicado usando o novo checkout da Shopify:

Se você encontrar erros ou problemas na aparência do checkout, edite o arquivocheckout.liquidpara 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 deatualização do checkout, clique emAtualizar 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 (consulteResolução de errosacima). Em seguida, publique seu tema duplicado atualizado:

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

Novidades做结账da商店ify

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

• Assinaturas
• Upsell
• Gorjeta no checkout
• Retirada e entrega local
• Campos internacionais adicionais
• Acompanhar pedido com o botão do Shop
• Atualizações da página de status do pedido
• Alterações no arquivo geral
• Estados de estruturas/carregamento
• Mensagens de erro
• Alterações no atributo de dados
• Melhorias de acessibilidade

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 daShopify App Storepara oferecê-las ou crie um app personalizado com as novasAPIs Subscriptions.

Saiba mais sobre assinaturas naCentral 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_planaparece 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 naShopify 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çãoIncluir gorjetaé exibida na etapa de escolha da forma de pagamento no checkout. A seçãoIncluir gorjetaoferece 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çãoIncluir 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 aretirada no locale aentrega 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 deInformaçõesno 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.

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

• Se a opçãoRetiradafor 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.

• instrucoes de entrega当地aparecem na paginade status do pedido. Elas podem ser editadas no admin da Shopify, emConfigurações>Frete e entrega. Na seçãoRetirada no local, encontre a localização a ser editada e clique emGerenciar.

• 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 sobreos 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ãoAcompanhar pedido com o Shopnas páginas de status do pedido e de conclusão da compra tem um novo design.

Saiba mais sobreo 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ãoAcompanhar pedido com o Shopnos 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 napá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 classeicon-svg--align-text-bottomfoi removida.
• data-step="thank-you"foi alterado paradata-step="thank_you". Caso você use o atributo para identificar em qual página do checkout o cliente está, utilize o objeto JavaScriptShopify.Checkout.page.
• Um cartão de status do pedido foi adicionado.

Alterações no arquivo geral

• div.content-box__rowagora contémrole="table".
• Caso o cliente esteja na etapa de conclusão da compra e tenha o pacote QR,show_qr.jsserá adicionado.
• Uma verificação foi incluída para garantir que o cliente tenha acesso ao checkout.
• Agora, os cartões-presente são exibidos comcheckouts/order_status/gift_cards.
• As instruções sobre informações de contato foram corrigidas comenforce_content_directionality.
• As informações de frete foram transferidas paracheckouts/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-lineserá 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-subfieldspossui 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á emdiv.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 paracheckouts/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
  • {类型}_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 àulde:

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

• A dica de contexto foi removida dearia-labelledbyemtelephone_field.

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

• Foram adicionados títulosh3ao aguardar tributos.

• Foram incluídos títulosh3para o redirecionamento.

• Ao carregar as formas de frete, a tagpfoi alterada parah3.

• Agora, o recurso autocompletar refere-se amobile tel, em vez dephone.

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

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

  • adicionadorole="region"
  • aria-labelledbyfoi configurado para corresponder ao ID do elemento de cabeçalho.
  • aria-describedbyfoi configurado para corresponder ao ID do elemento de contêiner de conteúdo.

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

  • adicionadorole="region"
  • aria-labelledbyfoi configurado para corresponder ao ID do elemento de cabeçalho.

• A grade de checkout expresso foi aprimorada para usar os elementosuleli, em vez dediv.

• O resumo do pedido foi atualizado:

  • O preço promocional e o normal tiveram melhorias em relação à compreensão.
  • A extensão da tagdlfoi alterada.
  • A tagdelfoi alterada paradtedd.

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

  • span.radio__label__accessorymudou paradiv.radio__label__accessory
  • span.visually-hiddenmudou parah3.visually-hidden
  • span.payment-icon-list__moremudou parali.payment-icon-list__more
  • span.content-box__small-textmudou parasmall.content-box__small-text

Links relacionados

• Melhores práticas para edição de checkout.liquid
• checkout.liquid
• CSS no checkout.liquid