Pular para o conteúdo principal

Header, Footer e Chrome do Site

O chrome é tudo que envolve sua vitrine — a announcement bar, o header (logo, nav, busca, conta, carrinho), a barra de saudação B2B que aparece automaticamente para compradores de empresa logados e o footer. No Vertex, cada peça desse chrome é B2B-aware desde o início: trocadores, badges e rep-pills aparecem automaticamente quando um comprador de empresa está logado, e se degradam com elegância para um layout B2C polido quando não está.

Vertex desktop header — logo, nav, search, account, cart

Dois layouts de header, aplicados automaticamente

Você não tem que escolher entre um "header B2B" e um "header B2C". O Vertex renderiza um único header — e sobrepõe a barra de saudação B2B âmbar acima dele no momento em que um comprador de empresa faz login. Visitantes recebem o header branco limpo; compradores logados recebem o mesmo header mais os badges de sua empresa, pill de prazos NET, indicador de isenção de imposto e trocador de ship-to.

Announcement bar​

Arquivo da seção: sections/announcement-bar.liquid

A barra superior estilo APEX acima do header principal — texto à esquerda, ícone esquerdo opcional (truck / lightning / lock), número de telefone, ícones sociais e um × dispensável à direita. Dois esquemas de cor vêm de fábrica: dark e amber.

Configurações​

ConfiguraçãoTipoNotas
TextRich textMensagem de valor curta — "Free shipping on orders over $500", "NET-30 available to qualified buyers". Suporta links inline.
Left iconSelecttruck · lightning · lock · none. Combina um glyph SVG com o texto.
Phone numberTextPill de telefone alinhada à direita. Tap-to-call em mobile (link tel:).
Instagram URLURLÍcone social da marca. Renderiza apenas se preenchido.
LinkedIn URLURLÍcone LinkedIn.
X (Twitter) URLURLÍcone X.
YouTube URLURLÍcone YouTube.
Color schemeSelectdark (padrão) ou amber.

Adicione blocos Link para inserir pequenos links de texto na announcement bar — Special Offers, Become a dealer, Resources. Cada bloco recebe um label e uma url.

Dispensável​

O botão × à direita fecha a announcement bar para o visitante atual. O estado é persistido no localStorage via assets/announcement-dismiss.js, então a barra permanece oculta até que o visitante limpe os dados do site.

Quando usar o esquema âmbar

O esquema âmbar combina com a cor de destaque da barra de saudação B2B. Use-o quando seu anúncio é uma proposta de valor B2B (NET-30 terms, dealer signup, RFQ). Use o esquema dark para marketing geral.

Header principal​

Arquivo da seção: sections/header.liquid

A superfície primária de navegação — logo, texto da marca, menu primário, menu secundário opcional, busca preditiva, trocadores de locale e currency, conta e carrinho.

Configurações​

ConfiguraçãoTipoNotas
LogoImageRecomendado: SVG ou PNG 2x. Restrito a uma altura máxima definida pela configuração numérica Logo max height.
Brand text overrideTextTexto opcional usado quando nenhum logo está presente (ex.: "Vertex Supply"). Renderiza na fonte de heading.
Primary menuLink listA navegação principal. Cada item de menu pai recebe um dropdown alimentado por seus itens filhos.
Submenu styleSelectauto · mega · dropdown. Auto escolhe mega quando um pai tem 8+ filhos ou um layout em grade é detectado; caso contrário, renderiza um dropdown plano.
Secondary menuLink listNav utilitária alinhada à direita (Special offers · Guides · Services · FAQ). Auto-detectado pelo handle de link-list secondary-menu se você não escolher um.
Search placeholderTextTraduzível. Padrão para "Search by product, SKU, or part number".
Show locale switcherCheckboxPadrão on. Oculta/mostra a pill de language no header desktop e na drawer mobile.
Show currency switcherCheckboxPadrão on. Oculta/mostra a pill de currency. Mesmo compradores B2B de um único market veem isso informativamente para sempre saberem em que moeda estão pagando.
Sticky on scrollCheckboxFixa o header no viewport ao rolar.

O que renderiza à direita do menu​

Da esquerda para a direita: input de busca preditiva, pill de language, pill de currency, pill de representante de vendas (auto-exibida para B2B), Account, contador do Cart.

A pill do representante de vendas puxa dos metafields vertex.rep_name, vertex.rep_email, vertex.rep_phone da empresa. Veja o guia de configuração B2B para detalhes de populamento.

Mega menu vs. dropdown simples​

O estilo do submenu é decidido por item de menu pai pela configuração menu_style. Dois formatos:

  • Mega menu — painéis em grade multi-coluna com ícones opcionais e uma grade dedicada de marca. Use para Shop by category, Shop by brand, Industries — itens pai com 8+ filhos ou subcategorias visuais.
  • Dropdown simples — lista plana. Use para About, Resources, Account — itens pai com algumas páginas.

Quando configurado como auto, o Vertex escolhe mega se o pai tem ≥ 8 filhos; caso contrário, o dropdown simples.

Barra de saudação B2B​

Arquivo da seção: sections/b2b-greeting-bar.liquid

A faixa âmbar que fica acima do header principal para compradores de empresa logados. Sem configurações do comerciante — auto-renderiza com base no estado do cliente.

Quando aparece​

Todas as três devem ser verdadeiras:

  1. customer.b2b? — o cliente é um comprador B2B (empresa), não uma conta B2C
  2. customer.current_company — eles estão vinculados a pelo menos uma empresa
  3. settings.storefront_mode != 'b2c' — o tema não está fixado em modo B2C-only

Se qualquer uma falhar (visitante, modo B2C-only, sem empresa vinculada), a barra de saudação não renderiza de forma alguma.

O que mostra​

  • Nome da empresa — "Signed in as {company.name}"
  • Badge de prazos NET — NET-30 / NET-60 / NET-90 a partir do metafield de payment-terms da empresa
  • Badge de isenção de imposto — do status de imposto nativo da empresa na Shopify
  • Pill de language — avatar estilo REP + código ISO + chevron
  • Pill de currency — avatar estilo REP + código ISO + chevron
  • Trocador de ship-to — label estático quando o comprador tem uma localização; dropdown completo quando tem várias
Comportamento responsivo

Em telas ≤ 1169px a barra de saudação colapsa e seu conteúdo se move para a seção de conta da hamburger drawer. A faixa âmbar só aparece em ≥ 1170px (desktop) para que não dispute com a barra de busca por espaço vertical em mobile.

→ Veja Seções exclusivas B2B para a superfície completa do recurso.

Arquivo da seção: sections/footer.liquid

O footer do site — menu, social, e-mail, ícones de pagamento, newsletter, links legais.

Configurações​

ConfiguraçãoTipoNotas
Footer menuLink listNav de footer multi-coluna. Cada pai renderiza como cabeçalho de coluna.
Instagram URLURLRenderiza apenas se preenchido.
Facebook URLURLRenderiza apenas se preenchido.
LinkedIn URLURLRenderiza apenas se preenchido.
X (Twitter) URLURLRenderiza apenas se preenchido.
YouTube URLURLRenderiza apenas se preenchido.
EmailTextPadrão vazio. Quando preenchido, renderiza como link mailto: na coluna de contato.
Show payment iconsCheckboxPadrão on. Usa shop.enabled_payment_types para que você não precise manter a lista manualmente.
Newsletter headingTextEx.: "Join the trade list".
Newsletter introRichtextCopy curta de reasseguramento — "Monthly drops, no spam".
Legal menuLink listPrivacy · Terms · Refund · Cookies. Recorre automaticamente às suas URLs /policies/* se você deixar o menu em branco.

Formulário de newsletter​

O bloco de newsletter usa o formulário nativo de customer-newsletter da Shopify, então os inscritos são gravados em sua lista de clientes Shopify (com a flag accepts-marketing newsletter). Sem integração de terceiros necessária.

Ícones de pagamento refletem o que está habilitado

Você não escolhe os ícones de pagamento manualmente — o Vertex lê shop.enabled_payment_types e renderiza apenas os ícones que você habilitou nas configurações de pagamento da Shopify. Habilite Apple Pay em Settings → Payments → ele aparece no footer. Desabilite → ele desaparece.

Busca preditiva​

Arquivo da seção: sections/predictive-search.liquid (renderizado por header.liquid)

Aparece como dropdown do input de busca conforme o comprador digita. Mostra quatro painéis:

  1. Produtos — miniatura de imagem, título, vendor, preço. Reconhece manufacturer part numbers via o metafield vertex.mpn (então buscar 1N4148 encontra o diodo pelo part number).
  2. Coleções — título + imagem.
  3. Páginas — título + URL.
  4. Consultas sugeridas — sugestões nativas de busca da Shopify.

Reconhecimento de MPN​

Se você popular o metafield vertex.mpn (texto de uma linha) em um produto, a busca preditiva fará match das consultas contra esse campo além do título / SKU / vendor padrão do produto. Crítico para catálogos técnicos onde compradores pesquisam por part number em vez de nome do produto.

→ Veja o Guia de configuração de metafield para detalhes de populamento.

Comportamento responsivo​

O header tem um breakpoint rígido em 1170px — escolhido para que o iPad Pro em portrait (1024px) fique no fluxo de hamburger, mas a maioria dos laptops caia no layout desktop.

ViewportLayout
< 1170pxMenu hamburger → drawer. A drawer contém: menu primário, menu secundário, trocador de ship-to, pills de locale + currency (grade 2-coluna), card de representante de vendas (largura total na parte inferior), language + sign-in.
≥ 1170pxNav desktop completo. Painéis de mega menu / dropdown, input de busca preditiva, pills REP, pill de representante de vendas, conta, carrinho.

Painéis dropdown customizados (sem <select> nativo)​

O Vertex usa zero elementos <select> nativos em qualquer lugar. Os trocadores de language, currency e ship-to todos usam um sistema compartilhado <details> + <summary> + painel customizado com:

  • Estados de hover
  • Destaque de seleção atual + ícone de check
  • Animação de fade-in
  • Exclusão mútua (abrir um fecha os outros)
  • Click-fora-fecha
  • Escape-fecha
  • Navegação completa por teclado (setas + Enter)

A implementação fica em assets/global.js (procure pelo helper closeAllDetails()). Re-estilizar esses dropdowns é uma questão de sobrescrever os seletores details[data-vertex-dropdown] — sem JS necessário.

O que vem a seguir​