Seções Exclusivas B2B
Estas são as seções criadas especificamente para fluxos B2B — a barra de saudação que aparece automaticamente para compradores corporativos logados, a faixa promocional da página inicial que divulga os recursos B2B para visitantes, a página de colar-para-carrinho em massa, a tabela de comparação lado a lado, a página RFQ e o bloco de pedido rápido inline.
Cada uma delas funciona com o B2B nativo do Shopify (sem aplicativos, sem assinaturas). Quando o B2B não está habilitado em sua loja, as orientadas a marketing (promo de recursos B2B, pedido em massa, comparação, RFQ) continuam funcionando como seções polidas — os compradores apenas não verão os elementos específicos da empresa, como faixas de preço por volume na cotação.
O Vertex lê quantity_price_breaks renderizado no servidor a partir do catálogo B2B nativo do Shopify. Os compradores veem preços escalonados corretos no PDP, carrinho e página de pedido em massa automaticamente — sem recálculo via JS, sem atraso de sincronização de aplicativo. Configurar os catálogos B2B no admin do Shopify é tudo o que você precisa.
b2b-greeting-bar
Arquivo de seção: sections/b2b-greeting-bar.liquid
A faixa azul-cobalto que aparece acima do cabeçalho principal para compradores corporativos logados. Já abordada em Cabeçalho, Rodapé e Chrome — esta seção é referenciada aqui porque é o ponto de contato B2B mais visível.
Sem configurações de comerciante. Renderiza automaticamente com base em:
customer.b2b? AND customer.current_company AND settings.storefront_mode != 'b2c'
Exibe: nome da empresa, selo de prazos NET, selo de isenção fiscal, pílula de idioma, pílula de moeda, alternador de local de entrega (estático com 1 local, dropdown com 2+).
Visibilidade: apenas desktop (≥ 1170px) — no mobile, os mesmos dados são movidos para a seção de conta do drawer do menu hambúrguer.
b2b-feature-promo
Arquivo de seção: sections/b2b-feature-promo.liquid
Faixa da página inicial que divulga recursos exclusivos B2B para visitantes — preços por volume, pedido em massa, RFQ, NET-30 — para que visitantes que não sabiam que você oferecia esses recursos encontrem o caminho para um cadastro de revendedor ou RFQ.
Configurações por bloco: ícone (imagem / SVG), título, corpo, link opcional.
Oculta automaticamente para compradores B2B logados. O promo é para visitantes; revendedores logados já têm acesso aos recursos que ele anuncia, portanto exibi-lo seria redundante. A verificação condicional é:
{% unless customer.b2b? %}
{% render 'b2b-feature-promo' %}
{% endunless %}
Padrões comuns de blocos
| Ícone | Título | Corpo |
|---|---|---|
| Pilha | Preços por volume | Descontos escalonados por unidade em todos os tamanhos de pedido — aplicados automaticamente no checkout. |
| Planilha | Pedido em massa | Cole linhas de SKU e quantidade de uma planilha. Validamos e adicionamos ao carrinho em um clique. |
| Documento | Prazos NET-30 | Contas qualificadas recebem prazos de pagamento de 30 dias sem juros. Solicite no formulário de cadastro de revendedor. |
| Cotação | Solicitar uma cotação | Preços personalizados para solicitações em massa, cotações de projetos e preços contratuais. |
Acima da dobra (logo abaixo do hero) atrai visitantes que apenas folheiam — mas empurra todo o resto para baixo. Abaixo da dobra funciona quando você quer que revendedores logados pulem essa parte sem prejuízo de rolagem.
main-bulk-order
Arquivo de seção: sections/main-bulk-order.liquid
Template: templates/page.bulk-order.json → atribuir a /pages/bulk-order
A página de pedido em massa por colar-para-carrinho. Os compradores colam linhas de SKU,quantidade de uma planilha; a página valida cada linha contra o catálogo e adiciona a cesta inteira em um clique. SKUs inválidos são sinalizados inline.
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Título | Texto | "Pedido em massa" / "Bloco de pedido rápido". |
| Texto introdutório | Richtext | Bloco curto de instruções (ou use o bloco Instruções). |
| Colunas | Select | sku_qty · sku_qty_notes · sku_qty_notes_ship. Determina quantas colunas o bloco mostra. |
| Rótulo de envio | Texto | Padrão "Adicionar tudo ao carrinho". |
| Esquema de cores | Select | Dropdown padrão de esquema de cores. |
Bloco de Instruções
Adicione um bloco Instruções para renderizar um texto de garantia junto ao bloco: "Cole sua lista de SKUs — um por linha, quantidades separadas por vírgula. Validaremos contra seu catálogo antes de adicionar ao carrinho."
Como funciona a validação
- Cada SKU é verificado contra o catálogo do comprador (compradores B2B recebem o escopo do catálogo da empresa; visitantes recebem o storefront completo)
- SKUs inválidos são destacados em vermelho com um erro inline
- SKUs válidos são adicionados em uma única atualização de carrinho (uma viagem de rede, sem condições de corrida)
- Regras de quantidade (MOQ, máximo, case-pack) são aplicadas no momento da validação
Compatibilidade B2B
Para compradores B2B logados, a página de pedido em massa lê do catálogo B2B da empresa automaticamente. SKUs que não estão no catálogo falharão na validação mesmo que existam no storefront. Isso é intencional — os compradores devem poder pedir apenas o que está em seu contrato.
→ Monte em uma página (tipicamente /pages/bulk-order) selecionando o template page.bulk-order.json no editor de página. Consulte o guia de configuração B2B para atribuir o catálogo que orienta a validação.
main-compare
Arquivo de seção: sections/main-compare.liquid
Template: templates/page.compare.json → atribuir a /pages/compare
Tabela de comparação de produtos lado a lado. Até 4 produtos. Apenas por sessão — limpa quando o comprador fecha o navegador. Não é uma lista de desejos (a política da Shopify Theme Store proíbe listas de desejos persistentes sem um aplicativo).
Como funciona
- O comprador clica em + Comparar em um card de produto ou PDP
- O produto é adicionado a uma chave
vertex_comparenosessionStorage - A barra de comparação (bandeja inferior fixa, veja abaixo) mostra até 4 miniaturas de produtos
- O comprador clica em Comparar na bandeja → redireciona para
/pages/compare - A página de comparação renderiza uma tabela especificação por especificação com cada produto como uma coluna
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Título | Texto | "Comparar produtos". |
| Texto introdutório | Richtext | Opcional. |
| Título do estado vazio | Texto | Exibido quando não há produtos na comparação. "Adicione produtos para comparar". |
| Corpo do estado vazio | Richtext | "Navegue pelo catálogo e clique em ⊕ Comparar em qualquer card de produto. Até 4 produtos.". |
O que a comparação mostra
Por coluna de produto: imagem, título, preço, especificações principais (do metaobject tech_spec_row), MOQ, envia-de, botão ATC. Linhas que diferem entre produtos são destacadas visualmente para fácil leitura.
Snippet compare-bar
Arquivo de snippet: snippets/compare-bar.liquid
A bandeja inferior fixa que aparece sempre que a lista de comparação tem pelo menos um produto. Renderiza 4 slots de produto (preenchidos ou vazios), um botão Comparar (desabilitado até que 2+ produtos sejam adicionados) e um link Limpar tudo.
O snippet é incluído a partir de theme.liquid para aparecer em todas as páginas. Ele só renderiza quando sessionStorage.vertex_compare tem pelo menos uma entrada.
main-rfq
Arquivo de seção: sections/main-rfq.liquid
Template: templates/page.rfq.json → atribuir a /pages/rfq
A página de Solicitação de Cotação. Layout de 2 colunas: formulário de contato à esquerda, card de contato / horário / endereço à direita. Usa o padrão de formulário de contato nativo do Shopify — sem necessidade de aplicativo de gerenciamento de cotações.
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Título | Texto | "Solicitar uma cotação". |
| Texto introdutório | Richtext | Breve garantia + tempo esperado de resposta. |
| Nome de contato | Texto | Título da coluna direita — "Fale com um especialista". |
| E-mail de contato | Texto | Link mailto. |
| Telefone de contato | Texto | Link tel. |
| Horário | Texto | Ex.: "Seg–Sex · 8h – 18h". |
| Endereço | Richtext | Bloco de endereço de múltiplas linhas. |
| Código de dica NET-30 | Texto | Um código que os compradores referenciam ao solicitar NET-30 ("Mencione RFQ-NET30 em sua mensagem"). |
Campos do formulário
O formulário envia para o endpoint nativo de formulário de contato do Shopify:
- Nome (obrigatório)
- Empresa (obrigatório)
- E-mail (obrigatório)
- Telefone (opcional)
- Setor (select, opcional)
- Volume estimado do pedido (select, opcional)
- Opt-in NET-30 (checkbox) — anexado ao corpo da mensagem quando marcado
- Mensagem (obrigatório)
- Anexo de arquivo (opcional, nativo do Shopify)
O envio chega no e-mail de notificação do admin do Shopify como uma entrada padrão de formulário de contato. Sem integração de terceiros.
O padrão de formulário de contato integrado mantém o Vertex totalmente em conformidade com a política da Theme Store e sem custo. Se você precisa de rastreamento de cotações, fluxos de aplicação de prazos NET ou integração de CRM da equipe de vendas, combine com o B2B nativo do Shopify (compradores vinculados à empresa) ou um aplicativo de sua escolha — a página RFQ do Vertex funciona nos dois cenários.
quick-order
Arquivo de seção: sections/quick-order.liquid
O bloco inline de colar-para-carrinho — o mesmo motor do main-bulk-order, mas como uma seção pronta para a página inicial que você pode inserir no fluxo de marketing.
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Título | Texto | "Pedido rápido". |
| Texto introdutório | Richtext | Garantia de uma linha — "Já sabe o que precisa? Cole os SKUs abaixo.". |
| Linhas | Número | Padrão 5. Quantas linhas de entrada são renderizadas inicialmente. O botão "+ Adicionar linha" adiciona mais. |
| Rótulo de envio | Texto | "Adicionar ao carrinho". |
| Mostrar link 'Ir para pedido em massa' | Checkbox | Padrão ativado. Vincula a /pages/bulk-order para compradores que precisam de mais linhas ou querem validação de SKU. |
Quando usar isto vs. main-bulk-order
| Caso de uso | Use isto |
|---|---|
| Página inicial, entre hero e coleção em destaque | quick-order |
/pages/bulk-order dedicado para usuários avançados | main-bulk-order |
| Faixa 50/50 combinada com logos de marcas | dual-brands-quickorder (veja Marketing da Página Inicial) |
Mesmo motor de validação, mesma consciência do catálogo B2B, mesma adição ao carrinho com um clique. A diferença é layout (5 linhas padrão inline vs. bloco de página inteira) e descoberta.
Cheat-sheet de visibilidade de seções B2B
| Seção | Visitante | B2C logado | B2B logado |
|---|---|---|---|
b2b-greeting-bar | Oculto | Oculto | Visível (apenas desktop, drawer no mobile) |
b2b-feature-promo | Visível | Visível | Oculto |
main-bulk-order | Visível (catálogo do storefront) | Visível (catálogo do storefront) | Visível (catálogo da empresa) |
main-compare | Visível | Visível | Visível |
main-rfq | Visível | Visível | Visível (formulário pré-preenche nome/e-mail/empresa) |
quick-order | Visível (catálogo do storefront) | Visível (catálogo do storefront) | Visível (catálogo da empresa) |
O que vem a seguir
- Seções da página de produto → — Preços por volume, MOQ, card do representante de vendas no PDP
- Cabeçalho, rodapé e chrome → — Detalhes do ciclo de vida da barra de saudação
- Marketing da página inicial → — Onde inserir o promo B2B + pedido rápido na página inicial
- Guia de configuração B2B → — Habilitar B2B nativo do Shopify + catálogos + empresas
- Guia de modos do storefront → — Híbrido vs apenas B2B vs apenas B2C