Painel da Conta do Cliente — Fluxo com Reconhecimento B2B
O Vertex oferece uma suíte completa de conta do cliente que se adapta automaticamente a quem está logado. Um comprador de compras B2B com prazos NET-30 e um representante de vendas atribuído vê um painel. Um cliente final B2C vê outro diferente. Um comprador de contas a pagar multilocal vê uma terceira variante com um seletor de empresa. Tudo a partir do mesmo tema — sem aplicativo, sem segunda fam ília de templates, sem código personalizado.
Este guia cobre cada tela de conta do cliente no Vertex, como funciona o comportamento com reconhecimento B2B, o fluxo de reordenamento rápido, a experiência do comprador multilocal e como personalizar cada tela no editor de tema.
A conta do cliente do Vertex é construída sobre as novas contas de cliente do Shopify (a experiência sem senha, hospedada pelo Shopify, que o B2B exige) com o estilo do tema Vertex e seções com reconhecimento B2B sobrepostas. Você obtém o polimento de um tema personalizado e a flexibilidade de editar cada seção como qualquer outra página.
O que vem na suíte da conta do cliente
| Tela | O que faz |
|---|---|
| Painel | A página de destino após o login. Com reconhecimento B2B: mostra informações da empresa, prazos de pagamento, cartão do representante de vendas e reordenamento rápido para compradores B2B. Mostra a lista de pedidos e o link de endereços para clientes B2C. |
| Visualização de pedido único | Cabeçalho do pedido (número, data, status, total), itens de linha com botões "Reordenar este item" por linha, botão "Reordenar todos" do pedido completo na parte inferior, endereços de entrega e cobrança, status de atendimento. |
| Endereços | Adicionar, editar, excluir e definir endereços padrão. Campos com reconhecimento de país e validação de estado/província. |
| Login | E-mail + senha + "Esqueceu a senha?" + CTAs "Criar conta". |
| Criar conta | Nome, sobrenome, e-mail, senha. CTA opcional "Solicitar conta comercial" que direciona para a página Solicitar uma cotação. |
| Ativar convite | Ativa uma conta de cliente criada pelo lojista no admin do Shopify. |
| Redefinir senha | Duas etapas (solicitar e-mail de redefinição, depois inserir nova senha). |
Cada tela é redesenhada no design system Vertex — a escala de espaçamento, escala de tipografia, escala de raio, escala de sombra, sistema de botões e sistema de inputs que alimentam o restante da loja. Assim, a conta do cliente não parece um aplicativo separado — ela se parece e se comporta exatamente como o restante da sua loja.
Esta é a nova experiência de conta de cliente hospedada pelo Shopify que os compradores B2B veem — com a marca do nome da sua loja e do endereço de entrega, com abas de histórico de pedidos e perfil no topo. A aparência vem diretamente do Shopify, não do tema Vertex. O cartão do representante de vendas e os atalhos de reordenamento rápido são adicionados pelo Vertex por cima.
O painel com reconhecimento B2B
O painel é a peça central. Ele detecta se o cliente logado é um comprador B2B e renderiza um de dois layouts automaticamente.
Como a detecção funciona
Não há aplicativo, configuração, nem toggle. O Vertex verifica se o cliente logado está vinculado a uma empresa no Shopify B2B. Se estiver, o painel B2B é renderizado. Caso contrário, o painel B2C é renderizado. É totalmente nativo e instantâneo.
Layout do painel B2B
Para um comprador B2B logado, o painel exibe:
1. Cabeçalho de boas-vindas
- Olá, [nome] — saudação amigável
- Nome da empresa — extraído do registro da empresa do comprador
- Selos da empresa — NET-30 / NET-60 / NET-90 e Isento de impostos
- Local de entrega atual — breve resumo do endereço de entrega atualmente selecionado pelo comprador
2. Cartão do representante de vendas (variante completa)
Se você preencheu os metafields do representante de vendas por empresa (vertex.rep_name / vertex.rep_email / vertex.rep_phone em Customers ▸ Companies ▸ [empresa] ▸ Metafields), o painel mostra um cartão completo do representante de vendas — maior que a pílula menor do cabeçalho.
O cartão inclui:
- Nome do representante (com um avatar de inicial)
- E-mail do representante (clique para enviar e-mail)
- Telefone do representante (clique para ligar)
Consulte o guia de configuração de metafields para preenchê-los.
O cartão do representante de vendas usa os dados do representante que você preenche para cada empresa. Todos os compradores vinculados à mesma empresa veem o mesmo representante.
3. Lista de reordenamento rápido
O recurso B2B mais amado. Mostra os últimos 5 pedidos do comprador com:
- Número e data do pedido
- Total e contagem de itens
- Botão Reordenar todos (um clique — adiciona cada linha de volta ao carrinho com os preços atuais)
- Selo de status do pedido (Atendido / Parcial / Não atendido / Cancelado)
- Link para a visualização completa do pedido único
Sem necessidade de aplicativo — o reordenamento rápido vem integrado ao Vertex.
Se um item de linha do pedido original não estiver mais no catálogo do comprador, o reordenamento o pula e exibe uma pequena nota: "2 itens do pedido #1234 não estão mais disponíveis e foram pulados." Os compradores ainda podem revisar o carrinho antes do checkout.
4. Grade de links rápidos
Uma grade das ações canônicas da conta B2B:
- Todos os pedidos — histórico completo de pedidos
- Endereços — gerenciar endereços de entrega
- Pedido em massa — link para a página de pedido em massa (colar para o carrinho)
- Solicitar uma cotação — link para a página RFQ
- Catálogo — link para a loja filtrada pelo seu catálogo B2B
5. Atividade recente
Uma linha do tempo condensada das últimas 10 ações do comprador:
- Pedidos feitos
- Endereços adicionados ou atualizados
- Solicitações de cotação enviadas
Layout do painel B2C
Para um cliente não-B2B, o painel é mais simples:
- Cabeçalho de boas-vindas (sem informações da empresa, sem selo de prazos de pagamento)
- Lista de pedidos (paginação completa)
- Cartão de endereço padrão com links de editar e gerenciar
- Sem cartão do representante de vendas (clientes B2C não recebem um representante atribuído)
- Sem lista de reordenamento rápido (CTA único "Ver pedidos" — compradores reordenam a partir da visualização de pedido único)
O painel B2C é desenvolvido especificamente para ser rápido e descomplicado — a maioria dos clientes B2C quer verificar o status de um pedido, não interagir com o chrome da empresa.
Fluxo de reordenamento rápido
O reordenamento rápido está disponível em duas superfícies:
Superfície 1 — Lista dos últimos 5 pedidos no painel
(Descrito acima.) Um clique "Reordenar todos" por pedido, exibindo os 5 mais recentes. Compradores que reordenam o mesmo kit semanalmente adoram isto — são dois cliques desde o login até um carrinho totalmente carregado.
Superfície 2 — Visualização de pedido único
Para pedidos mais antigos ou para reordenar apenas um subconjunto, a visualização de pedido único mostra:
- Botão "Reordenar este item" por linha em cada linha — adiciona uma variante na quantidade original
- Input de quantidade por linha para que o comprador possa alterar a qtd antes de adicionar (padrão é a qtd original do pedido)
- Botão "Reordenar todos os itens" do pedido completo na parte inferior — adiciona cada linha na quantidade original
O mesmo comportamento de itens pulados que o reordenamento do painel, apenas com granularidade mais fina.
Os reordenamentos usam qualquer que seja o preço atual do catálogo do comprador — não o preço histórico do pedido. Isso é importante para o B2B: os preços contratados mudam, e reordenar com um preço antigo entraria em conflito com o novo catálogo. Se um comprador precisa que o preço antigo seja honrado, ele deve entrar em contato com seu representante de vendas e enviar uma cotação.
Compradores multilocal
Alguns compradores B2B estão vinculados a várias empresas (ex.: um gerente corporativo de contas a pagar que faz pedidos para 5 subsidiárias). Para esses compradores, o Vertex mostra automaticamente um seletor de empresa no rodapé da gaveta mobile e na barra de saudação do desktop.
Onde o seletor é renderizado
- Desktop (≥1170px) — na barra âmbar de saudação B2B (topo do cabeçalho) quando mais de uma empresa estiver disponível
- Mobile e tablet (<1170px) — na parte inferior do rodapé da gaveta hamburger, acima das pílulas de idioma e moeda
Compradores de empresa única não o veem — UI limpa. O seletor é totalmente acessível por teclado e combina com cada outro dropdown no Vertex.
Como funciona a troca
Quando o comprador escolhe uma empresa-local diferente, o Shopify recarrega a página com a nova empresa na sessão. Catálogo, preços, prazos de pagamento, local de entrega e status de isenção de impostos mudam todos para a nova empresa. O carrinho é preservado se compatível, ou limpo com um aviso se não for. Tudo nativo — sem aplicativo, sem sincronização manual.
Login, criar conta, ativar, redefinir senha
Todas as telas de autenticação foram redesenhadas no design system Vertex. Elas compartilham uma linguagem visual consistente:
- Layout de cartão centralizado com a fonte de heading e a fonte de body da loja
- Logo e headline pequena no topo do cartão
- Formulário de uma coluna com inputs de largura total (alvos de toque de 52 px, ring de focus-visible, label no topo)
- Botão CTA principal na cor de destaque da loja
- Links secundários abaixo — "Esqueceu a senha?", "Criar conta", "Já tem uma conta?"
- Rodapé da loja abaixo do cartão (leve — apenas links legais e copyright)
Tela de login
- E-mail e senha
- Link "Esqueceu a senha?"
- CTA "Criar conta"
- (Adição B2B) — pequena nota: "Precisa de uma conta comercial? Solicite acesso →"
Tela de criar conta
- Nome, sobrenome, e-mail, senha
- CTA "Criar conta"
- (Adição B2B) — pequena nota: "Cliente comercial existente? Entre →"
Comportamento padrão do Shopify: novas contas passam por verificação de e-mail antes de poderem entrar. Novas contas B2B são criadas pelo lojista através de Customers ▸ Companies — elas não se auto-registram.
Tela de ativar conta
Para clientes convidados pelo lojista. Eles chegam a esta página a partir do e-mail de convite e definem sua senha.
Tela de redefinir senha
Duas telas em uma:
- Solicitar redefinição — input apenas de e-mail + CTA "Enviar link de redefinição"
- Definir nova senha — nova senha + confirmar senha + CTA "Atualizar senha" (após clicar no link do e-mail)
Personalização no editor de tema
As telas de conta do cliente são editáveis no editor de tema, onde o Vertex expõe um pequeno conjunto de configurações de seção. A personalização aqui é intencionalmente restrita — a estrutura do painel é fixa, e os controles abaixo são os que o Vertex fornece.
Abra o painel no editor de tema
- Abra Online Store ▸ Themes ▸ Customize
- No dropdown de template superior, escolha Customers ▸ Account
- O editor de tema agora renderiza o painel da conta com a seção Account na barra lateral esquerda
A seção Account mantém a personalização deliberadamente pequena — há exatamente duas configurações, ambas sob o cabeçalho Layout da seção:
| Personalizar | Como |
|---|---|
| Recent orders to show | Configurações da seção → "Recent orders to show" → controla quantos pedidos recentes a lista de reordenamento rápido exibe. Intervalo 3–10, padrão 5. |
| Show Quick actions card | Configurações da seção → "Show Quick actions card" → ativa ou desativa o cartão de ações rápidas (ligado por padrão). |
| Visibilidade do cartão do representante de vendas | Automático — o cartão aparece quando o metafield vertex.rep_name da empresa está preenchido e o comprador está logado; ele se oculta para clientes B2C e no modo Somente-B2C. Não há toggle por seção. |
O painel do Vertex é renderizado dentro da experiência de novas contas de cliente do Shopify. A saudação de boas-vindas, as abas de pedidos e perfil, e o chrome geral da página vêm diretamente do Shopify — a marca (nome da loja, logo, cores) é editada em Settings ▸ Customer accounts no admin do Shopify, não nesta seção. As duas configurações acima são os únicos controles em nível de tema que o Vertex sobrepõe.
Para a visualização de pedido único (a seção Order), há uma configuração:
| Personalizar | Como |
|---|---|
| Show print invoice link | Configurações da seção → "Show print invoice link" → ativa ou desativa o link de impressão de fatura na página de detalhe do pedido (ligado por padrão). |
Leitura relacionada
- Visão geral — Por que a conta do cliente do Vertex tem reconhecimento B2B
- Instalação — Os templates da conta do cliente vêm habilitados
- Guia de configuração B2B — Criando empresas, locais de entrega, prazos de pagamento
- Guia de configuração de metafields — Onde preencher os metafields do representante de vendas que alimentam o cartão do representante
- Guia de modo da loja — Como Híbrido / Somente-B2B / Somente-B2C interagem com o painel
- Markets & multi-moeda — Como a moeda é renderizada na conta do cliente
- Guia da página RFQ — O CTA "Solicitar conta comercial" na tela de cadastro
- Referência de configurações do tema — Configurações relacionadas à conta
- FAQ + solução de problemas — Perguntas comuns sobre conta
Resumo
- A suíte de conta do cliente do Vertex tem reconhecimento B2B — mesmas telas, dois layouts, autodetectado.
- O painel B2B exibe informações da empresa, selo de prazos de pagamento, cartão completo do representante de vendas, últimos 5 pedidos com reordenamento rápido e uma grade de links rápidos.
- O painel B2C é desenvolvido especificamente para ser rápido — apenas pedidos e endereço padrão.
- O reordenamento rápido funciona a partir do painel E da visualização de pedido único — sem necessidade de aplicativo.
- Compradores multi-empresa recebem um seletor de empresa no rodapé da gaveta mobile e na barra de saudação do desktop.
- As telas de login, criar conta, ativar e redefinir senha redesenhadas no design system Vertex.
- A seção Account expõe duas configurações de tema (contagem de pedidos recentes e o cartão Quick actions); a seção Order adiciona um toggle de impressão de fatura.