Vertex — O Tema Shopify B2B e Atacado Premium
O Vertex é um tema Shopify Online Store 2.0 premium criado especificamente para comerciantes de suprimentos industriais, MRO (manutenção, reparo e operações), atacado, trade e contas de revendedores que precisam que os recursos B2B nativos da Shopify realmente pareçam uma vitrine B2B — sem um único aplicativo complementar, assinatura mensal ou script de terceiros.
Cada objeto B2B nativo da Shopify — tabelas de preços por volume, aplicação de regras de quantidade, prazos de pagamento NET-30 / NET-60 / NET-90, contas isentas de imposto, troca de empresa multi-localização, catálogos B2B, solicitações de orçamento — é renderizado com o requinte que seus compradores contratuais esperam. Equipes de procurement, gerentes de instalações e contas de revendedores recebem uma vitrine que espelha a clareza de catálogo da McMaster-Carr, Grainger e Fastenal, mantendo-se totalmente OS 2.0.
Pronto para B2C de fábrica
O Vertex não é exclusivamente B2B. Cada recurso B2B se degrada com elegância quando não há uma empresa logada, e um único toggle Storefront mode (Hybrid / B2B-only / B2C-only) permite que você decida quanto chrome B2B expor. O mesmo tema funciona como uma vitrine B2C polida de suprimentos industriais desde o primeiro dia — sem segunda licença, sem codebase paralela.
Para quem é o Vertex
- Distribuidores de suprimentos industriais — fixadores, ferragens, ferramentas, abrasivos, fluidos
- Fornecedores MRO — consumíveis de manutenção, reparo, operações
- Comerciantes atacadistas — catálogos exclusivos para trade com preços escalonados
- Distribuidores de autopeças — catálogos com fitment orientado por finders Make / Model / Year
- Fornecedores de escritório, IT e eletrônicos — finders por brand / category / capacity
- Fornecedores de impressão e reprografia — finders por printer brand / model / color
- Comerciantes B2C de suprimentos industriais — vendendo para pequenas empresas e consumidores finais
Se seus compradores pesquisam por part number, esperam descontos por volume, fazem pedidos de 50 linhas a partir de uma planilha, precisam de prazos NET-30 ou querem documentação (datasheets, MSDS, certificações) inline na página de produto — o Vertex foi construído para eles.
O catálogo completo de recursos
Esta seção é a lista definitiva de cada recurso no Vertex v1.0.0. Cada entrada faz link para o seu guia dedicado quando aplicável.
B2B nativo (sem apps, sem assinaturas)
| Recurso | O que faz |
|---|---|
| Tabelas de preços por volume | Preços escalonados renderizados pelo servidor a partir do quantity_price_breaks da Shopify. Os compradores veem o preço por unidade para cada faixa de quantidade na PDP, no carrinho e na página de pedido em massa. |
| Aplicação de regras de quantidade | MOQ (quantidade mínima de pedido), quantidade máxima de pedido e incrementos de case-pack validados no lado do cliente (UI guard) e no lado do servidor (nativo da Shopify). |
| Preços que exigem login | Um único toggle de theme setting oculta cada preço para visitantes e o substitui por "Log in to see pricing". Os compradores veem os preços somente após fazer login. |
| Prazos NET-30 / NET-60 / NET-90 | Auto-detectados a partir do metafield de payment-terms da empresa. Aparecem como badge na barra de saudação azul-cobalto e no checkout. |
| Badges de isenção de imposto | Auto-detectados a partir do status de imposto nativo da empresa na Shopify. Aparecem na PDP, no carrinho e na barra de saudação. |
| Troca de empresa multi-localização | Compradores vinculados a várias empresas podem alternar entre elas a partir de um dropdown dedicado na drawer mobile. |
| Trocador de localização ship-to | Troca em um clique entre os endereços de entrega autorizados do comprador. Renderiza como um dropdown estilizado na barra de saudação B2B azul-cobalto (desktop) e na seção de conta da drawer mobile. |
| Escopo de catálogo B2B | Os compradores veem apenas os produtos + preços atribuídos ao catálogo de sua empresa via o recurso nativo B2B Catalogs da Shopify. O Vertex respeita isso de ponta a ponta. |
| Página de pedido rápido paste-to-cart em massa | Template dedicado /pages/bulk-order. Os compradores colam linhas SKU,qty de uma planilha; a página valida cada linha contra o catálogo e adiciona todo o pedido em um clique. SKUs inválidos são sinalizados inline. |
| Reorder rápido | Botão "Reorder" em pedidos anteriores. Reordena todo o pedido de uma vez OU linha por linha a partir do dashboard de conta do cliente. |
| Página Request-a-Quote (RFQ) | Template dedicado /pages/rfq usando o padrão nativo de formulário de contato da Shopify. Envia e-mail ao comerciante; nenhum app de gestão de cotações necessário. |
| Pill de contato do representante de vendas | Informações do representante de vendas por empresa extraídas dos metafields vertex.rep_name, vertex.rep_email, vertex.rep_phone. Renderiza como uma pill fixa no header desktop (≥1170px) e como um card de largura total na parte inferior da drawer mobile (<1170px). |
| Barra de saudação B2B | Faixa azul-cobalto acima do header que mostra o nome da empresa do comprador, badge de prazos NET, badge de isenção de imposto, trocadores de language / currency / ship-to quando logado. Auto-oculta para visitantes e modo B2C-only. |
| Faixa promocional de recursos B2B | Faixa na página inicial que destaca recursos exclusivos B2B (preços por volume, pedido em massa, RFQ, NET-30) — visível para visitantes como copy de marketing. |
| Dashboard de cliente com consciência B2B | Template /account detecta compradores B2B e mostra informações da empresa, prazos de pagamento, reorder rápido e o card de contato do representante de vendas. |
→ Guia completo de configuração B2B
Página de produto (PDP) — construída para catálogos técnicos
| Recurso | O que faz |
|---|---|
| Tabelas de especificações técnicas via metafield | Um metaobject dedicado tech_spec_row + metafields vertex.* renderizam um bloco de specs limpo na PDP. Cobrem dimensões, peso, material, certificações, voltagem, capacidade etc. |
| Documentos e downloads | Links de PDF por produto auto-renderizados em um bloco "Documents": datasheet, MSDS, brochure, technical sheet, installation guide, warranty card. Auto-oculta por produto quando nenhum documento está anexado. |
| Divulgação de histórico de preços | Metafield opcional vertex.price_history (lista de entradas date+price) renderiza um bloco colapsável "Price history" na PDP. |
| Rótulo Ships-from | Metafield por produto vertex.ships_from (ou padrão para todo o tema) aparece sob o título — útil para distribuidores com armazéns regionais. |
| Contador de estoque (indicador de estoque baixo) | Contador de estoque por variante na PDP, threshold configurável. Estimula urgência sem revelar o inventário exato aos concorrentes. |
| Botão ATC de pré-venda | Variantes marcadas como permissíveis para pedido posterior mostram um botão "Pre-order" em vez de "Sold out". Usa o rastreamento de inventário nativo da Shopify. |
| Comparação de produtos lado a lado | Barra de comparação fixa rastreia até 4 produtos; template dedicado /pages/compare renderiza uma tabela completa de comparação por linha de spec. Apenas sessão — não é uma wishlist. Totalmente em conformidade com a política da Shopify Theme Store. |
| Modal de quick view | Botão "Quick view" em cards de produto abre um modal com a galeria do produto, picker de variante, input de qty e ATC — sem sair da listagem. |
| Abas de produto | Bloco de seção dedicado para a PDP que divide o conteúdo do produto em abas (Description / Specs / Datasheet / Shipping / Video). |
| Recently viewed | Produtos rastreados via localStorage (até 12 por comprador); aparecem na parte inferior da PDP. Limpos quando o comprador limpa os dados do navegador. |
| Produtos relacionados | Recomendações da mesma coleção ou mesma tag abaixo da PDP. |
| Rollover de imagem em cards de produto | Quando um produto tem 2+ imagens, o hover no card da listagem troca para a segunda imagem. |
Header, navegação, localização
| Recurso | O que faz |
|---|---|
| Announcement bar | Barra superior estilo APEX com slots de link, ícones sociais, telefone e um × dispensável à direita (persistido via localStorage). Três esquemas de cor: Dark (padrão), Accent (marca) e Light. |
| Dois layouts de header (auto-aplicados) | Visitante: header principal branco com logo + busca preditiva + pills de language / currency + Sign-in/Register + Cart. B2B logado: o mesmo + barra de saudação azul-cobalto acima com badges da empresa e trocadores. |
| Mega menu | Painéis dropdown multi-coluna com ícones opcionais e uma grade dedicada "Shop-by-brand" (grade com divisória fina). |
| Dropdown simples alternativo | Quando o comerciante prefere uma lista plana por item de menu pai. Auto-detectado ou forçável por configuração. |
| Navegação secundária alinhada à direita | Special offers / Guides / Services / FAQ — auto-detectado pelo handle se uma link list secondary-menu existir. |
| Overlay de busca preditiva | Produtos / coleções / páginas / consultas sugeridas com miniaturas de imagem. Reconhece manufacturer part numbers via o metafield vertex.mpn. |
| Header fixo ao rolar | Toggle de admin — fixa o header no viewport. |
| Trocadores estilo REP-pill | Language + currency renderizados como pequenas pills circulares de avatar de bandeira com uma stack de texto em 2 linhas (eyebrow + código ISO) e um chevron. A drawer mobile tem as mesmas pills em largura total em uma grade de 2 colunas para alcance com uma mão. |
| Painéis dropdown customizados | Zero <select> nativos em qualquer lugar. Lang, currency e ship-to todos usam um sistema compartilhado <details> + painel customizado com estados de hover, destaque de seleção atual, ícone de check, animação de fade-in, exclusão mútua, fechar ao clicar fora, fechar com Escape. |
| Multi-currency via Shopify Markets | A pill de currency é renderizada mesmo para compradores B2B fixados a um único market — informativo para que sempre vejam em que moeda estão pagando. |
| 5 idiomas inclusos | Inglês (padrão), Francês, Italiano, Alemão, Espanhol — strings de UI + strings de schema completas em locales/. |
| Suporte completo a RTL | <html dir> é invertido automaticamente para Árabe, Hebraico, Persa, Urdu, Iídiche, Curdo, Dhivehi, Pashto. Pode ser forçado via a configuração Localization do tema. |
| Breakpoint com consciência de tablet | A <1170px (mobile + tablet), a hamburger drawer assume. A ≥1170px, a navegação desktop completa é exibida. |
→ Guia de modos de storefront · Guia de Markets e multi-currency
Seções de marketing (30+ na paleta da página inicial)
| Seção | Propósito |
|---|---|
| Hero | Rotador multi-slide com auto-advance, navegação por pontos, composição editorial. O padrão vem com 1 slide para o LCP mais rápido. |
| Featured collection | Grade de produtos; aceita blocos @app para conformidade com a Theme Store. |
| Collection list | Grade de categorias com sobreposições de imagem. |
| Image with text | Pareamento editorial (texto + imagem, 50/50 ou assimétrico). |
| Multicolumn | Grade de 2–4 colunas (ícones + texto + link opcional). |
| Rich text | Bloco centralizado de intro / about. |
| CTA banner | Call-to-action pré-footer com efeito de sobreposição no footer; copy por estado de cliente (visitante vs B2B). |
| Newsletter | Opt-in de e-mail com botão de subscrever. |
| FAQ | Acordeão baseado em disclosure; auto-emite JSON-LD de FAQPage para rich snippets. |
| Logo list | Logos de marca em marquee com linhas de grade em fade. |
| Testimonials | Cards com rating e tratamento de header com avatar sobreposto. |
| Stats bar | Faixa KPI em dark mode (ex.: "40,000+ SKUs · NET-30 · 24-hr Dispatch · ISO 9001"). |
| Industries grid | Grade editorial de cards (ex.: HVAC, Manufacturing, Facilities). |
| Resource hub | Lista de downloads — datasheets, MSDS, brochures. |
| Press coverage | Faixa de logos + citações destacadas. |
| Timeline | Cronologia para página About (ano + marco). |
| Services grid | Tiles com sobreposição de imagem para ofertas de serviço. |
| Countdown timer | Dias / horas / minutos / segundos — promocional. |
| Featured bundles | Cards curados de bundles com badges de desconto. |
| Finder Make/Model/Year | Dropdowns em cascata para autopeças — ou Brand/Category/Capacity para escritório e TI, ou Printer Brand/Model/Color para suprimentos de impressão. |
| Promo banner | Banner superior dispensável com persistência via localStorage. |
| Promo popup | Auto-open + exit-intent + localStorage; cadência configurável pelo comerciante. |
| Quick-order pad | Pad inline paste-to-cart (versão pronta para a página inicial da página completa de pedido em massa). |
| Recently viewed (página inicial) | Mesmo widget que a PDP, aparece na página inicial como uma faixa. |
| Related products | Faixa de cross-sell na PDP. |
| Sticky cart bar | Faixa fixa de ATC apenas mobile. |
| Dual brands + quickorder | Seção mesclada 50/50 combinando logos de marca + pad de pedido rápido. |
| Dual resources + FAQ | Seção mesclada 50/50 combinando downloads + FAQ. |
→ Guias de configuração de seções
Adapta-se à sua vertical
O Vertex instala como o estilo Vertex industrial / MRO e, então, se flexiona para outros setores. O mesmo tema pode ser re-skinado e reconfigurado para outras verticais — estas são configurações que você constrói no editor de tema com uma paleta de cores e o finder, não temas instaláveis separados:
| Configuração | Indústria | Paleta de cores | Finder |
|---|---|---|---|
| Vertex (padrão) | Industrial / MRO supply | Custom (azul-cobalto) | — |
| Autopeças | Autopeças | Signal red | Make / Model / Year |
| Escritório e TI | Office, IT e eletrônicos | Office blue | Brand / Category / Capacity |
| Suprimentos de impressão | Suprimentos de impressão | Inkline teal | Printer Brand / Model / Color |
Cada uma é o mesmo tema recolorido (via a Paleta de cores inicial) e reconfigurado (finder + seções) para aquela vertical — um ponto de partida que você mesmo monta, não um tema separado para instalar.
Templates inclusos (Online Store 2.0)
Templates Shopify obrigatórios (todos presentes): index.json, product.json, collection.json + list-collections.json, cart.json, search.json, blog.json + article.json, page.json, 404.json, password.json, gift_card.liquid.
Suite de conta de cliente: customers/account.json (com consciência B2B), activate_account.json, addresses.json, login.json, order.json (com reorder linha por linha + pedido completo), register.json, reset_password.json.
Templates de página customizados — aplique a qualquer nova página: page.about.json, page.contact.json (2-col), page.faq.json, page.rfq.json, page.bulk-order.json, page.compare.json, page.services.json, page.special-offers.json.
Performance
- Módulos ES vanilla — sem bundler, sem framework, sem jQuery, zero scripts de terceiros em runtime
- CSS por seção —
section-{name}.csscarregado apenas pela seção que o possui. Sem megabundle global. - Design tokens inline em
layout/theme.liquidelimina uma requisição CSS que bloqueia renderização - Imagens hero WebP em múltiplas larguras via
<picture><source srcset> font-display: optionalem fontes de body + heading para manter o LCP rápido- Preços renderizados pelo servidor — JS nunca recalcula preços, apenas melhora
- Preload de fontes base body + heading, preconnect a
fonts.shopifycdn.com - Abordagem hero com background-image + estilo padrão com 1 slide = LCP recuperado em mobile
- Lighthouse registrado: Performance 65–100 mobile, 90+ desktop
Acessibilidade (WCAG 2.1 AA)
- Operável por teclado em todos os lugares (dropdowns customizados usam
<details>/<summary>nativos; navegação por arrow-key no mega menu) - Foco visível em cada elemento interativo (anel de estilo focus-visible)
- Contraste mínimo de 4.5:1 em toda a paleta; testado
- Áreas de toque mínimas de 24 px em mobile
- Inputs com label + roles ARIA (
role="menu",menuitemradio,aria-checked,aria-current) - Link skip-to-content
- Auto-troca de RTL com override manual opcional
SEO e social
- Grafo completo de schema JSON-LD — Organization, WebSite + SearchAction, BreadcrumbList (PDP), Product (com GTIN, shippingDetails, returns), BlogPosting, ContactPage + LocalBusiness, FAQPage, ItemList (coleção)
- Meta Open Graph + Twitter card em cada página (
og:image,og:locale,og:image:alt,twitter:image,twitter:site) rel="next"/rel="prev"em paginação de coleção + blogfetchpriority="high"na primeira imagem de card de coleção (LCP win)noindexem todo o site em 12 tipos de páginas utilitárias (account, search etc.)- hreflang auto-emitido para todos os 5 locales publicados
- Favicon vem como fallback SVG + slot PNG sobrescrevível por configurações
- Campos Google Merchant Center — GTIN, shipping details, returns
Privacidade e conformidade
- Sem banner de cookies customizado — usa o banner nativo Customer Privacy da Shopify (melhor pontuação Lighthouse Best Practices, menos código a manter, sem surpresas de política)
- Em conformidade com a política da Theme Store — sem rastreamento de terceiros, sem links de afiliados, sem créditos de designer dentro dos arquivos do tema
O que NÃO está na caixa (ainda)
Para definir as expectativas certas:
- Upload de PO (PDFs de purchase-order como pagamento) — depende da Shopify expor a API nativa correspondente sem um app complementar. Planejado para v1.1.
- Workflow de aprovação (aprovações internas multi-step antes do checkout) — mesma dependência. Planejado para v1.1.
- Wishlist — intencionalmente não incluso. A comparação de produtos é apenas por sessão pela política da Theme Store; wishlists persistentes exigem um app.
- Live chat — recomendamos o Chat nativo da Shopify ou qualquer app de terceiros de sua escolha.
Início rápido
- Instale o Vertex a partir da Shopify Theme Store (Online Store ▸ Themes ▸ Add theme)
- Habilite o B2B nativo (Settings ▸ Customer accounts ▸ Enable B2B). Sem isso, o chrome B2B auto-oculta — o tema ainda funciona como um tema B2C polido.
- Popule o namespace de metafield
vertex— datasheets, MPN, contatos de representante de vendas, ships-from. Veja o Guia de configuração de metafield. - Escolha uma paleta inicial — Customize ▸ Theme settings ▸ Colors ▸ Starter color palette. Escolha: Custom (azul-cobalto por padrão), Signal red, Office blue ou Inkline teal.
- Customize em Themes ▸ Customize e publique.
→ Walkthrough completo de instalação
O que vem a seguir
- Instalação → — Instalação passo a passo + habilitação B2B
- Referência de Theme Settings → — Cada configuração em Theme Settings, explicada
- Guias de configuração de seções → — Como configurar cada seção
- Guias de recursos → — Configuração B2B, metafields, Storefront modes, Markets, O que o Vertex pode ser, conta de cliente, RFQ
- FAQ + troubleshooting → — Principais perguntas respondidas
- Changelog → — O que há de novo em cada release
- Suporte → — Como nos contatar