Seções da Página de Produto (PDP)
O template de produto do Vertex é construído para catálogos técnicos — compradores que se importam com part numbers, specs, datasheets, MOQs, case-packs e preços por volume. Cada touchpoint B2B (faixas de volume, preços que exigem login, regras de quantidade, card de representante de vendas, ships-from, badge de prazos NET) é renderizado inline na PDP sem um único aplicativo complementar.
O mesmo template product.json renderiza para visitantes e compradores B2B logados. Preços, badges, regras de quantidade e o card de representante de vendas refletem automaticamente o catálogo da empresa do cliente e os prazos de pagamento — você não precisa de um "template de produto B2B" e um "template de produto B2C" como arquivos paralelos.
main-product
Arquivo da seção: sections/main-product.liquid
A PDP em si — galeria, título, preço, picker de variante, input de quantidade, ATC e cada superfície B2B-aware empilhadas em uma seção. Cada bloco abaixo é um bloco de seção main-product que você pode reordenar no customizer.
Galeria
- Imagem principal com rollover de imagem em cards de listagem (2+ imagens necessárias)
- Miniaturas abaixo da imagem principal
- Click-to-zoom (lightbox)
- Mobile: carrossel deslizável com pontos
Título + meta
- Título do produto
- Vendor (se exibido)
- Rótulo Ships-from — metafield por produto
vertex.ships_fromou padrão para todo o tema - Linha de MPN — quando
vertex.mpnestá definido, exibe "MPN: 1N4148" sob o título
Bloco de preço
A superfície de preço é B2B-aware por padrão:
- Faixas de preços por volume — renderizadas pelo servidor a partir do
quantity_price_breaksda Shopify. Compradores veem "1–9: $4.50 · 10–49: $4.10 · 50+: $3.80" inline. Auto-renderiza quando a variante temquantity_price_breaks_count > 0. - Preços que exigem login — quando a theme setting Hide prices until customer logs in está habilitada, preços são substituídos por "Log in to see pricing" + um link de sign-in para visitantes.
- Preço B2B compare-at — exibição riscada quando o preço do catálogo B2B é menor que o preço da vitrine.
Picker de variante
Renderiza como botões estilizados (swatches para cor, botões de tamanho para tamanho, dropdown para outros eixos). Variantes esgotadas são visualmente desabilitadas (riscadas) mas ainda selecionáveis para que o comprador veja alternativas.
Input de quantidade
Regras de quantidade são aplicadas tanto no lado do cliente quanto no lado do servidor:
| Regra | Comportamento |
|---|---|
| MOQ (mínimo) | Não pode decrementar abaixo do MOQ. Mensagem inline: "Minimum order: 12". |
| Máximo | Não pode incrementar acima do máximo. Mensagem inline: "Maximum: 144". |
| Incremento de case-pack | Avança em incrementos do tamanho do case-pack. Entrada manual arredonda para o próximo valor válido com uma pequena notificação toast. |
Compradores vinculados a um catálogo B2B recebem as regras de quantidade específicas da empresa; visitantes recebem as regras da vitrine. Ambas vêm da API nativa da Shopify — o Vertex apenas as renderiza.
Add to cart + Buy it now
- Add to cart — ATC padrão, desabilitado quando esgotado a menos que pre-order esteja habilitado
- Buy it now — botões de checkout acelerado da Shopify (Shop Pay, Apple Pay, Google Pay, PayPal). Opcional via Shopify Settings.
- Pre-order — quando a variante é permissível para pedido posterior, substitui "Sold out" por "Pre-order" (usa o rastreamento de inventário nativo da Shopify)
- Alerta back-in-stock — quando a variante está esgotada e pre-order está desligado, mostra um formulário de opt-in de e-mail (nativo, sem app extra)
Card de representante de vendas
Para compradores B2B logados, um card de representante de vendas aparece na PDP mostrando o rep atribuído à empresa:
- Nome (de
vertex.rep_name) - E-mail (de
vertex.rep_email, como linkmailto:) - Telefone (de
vertex.rep_phone, como linktel:)
Renderiza apenas quando pelo menos um campo de rep está populado e o cliente é customer.b2b?.
Breadcrumb
Auto-gerado a partir da coleção primária do produto. Emite JSON-LD BreadcrumbList.
Bloco de tabela de especificações técnicas
Bloco tech-specs — renderiza uma tabela de specs limpa em 2 colunas a partir dos seus dados de especificações técnicas. Use para dimensões, peso, material, voltagem, capacidade, certificações.
→ Veja o Guia de configuração de metafield para populamento.
Bloco de documentos e downloads
Bloco documents — renderiza uma lista de downloads de PDF a partir de metafields do produto:
- Datasheet (
vertex.datasheet) - MSDS (
vertex.msds) - Brochure (
vertex.brochure) - Technical sheet (
vertex.tech_sheet) - Installation guide (
vertex.installation) - Warranty card (
vertex.warranty)
Auto-oculta por produto quando nenhum documento está anexado.
Disclosure de histórico de preços
Bloco price-history — seção colapsável "Price history" que lê do metafield vertex.price_history (lista de entradas date+price). Útil para compradores industriais monitorando tendências de mercado.
Contador de estoque (indicador de estoque baixo)
Bloco stock-counter — cue de urgência por variante. Só aparece para variantes cujo inventário você rastreia, e muda para o aviso "Only N left" assim que o estoque cai ao limite baixo (10 unidades). Estimula a ação sem revelar o inventário exato aos concorrentes.
Renderiza um destes estados:
- Estoque suficiente (mais de 10): "In stock"
- A 10 unidades ou menos: "Only 4 left in stock"
- Permissível para pedido posterior (zero, mas configurado para continuar vendendo): "Back-ordered — ships in 7–10 days"
- Esgotado (zero, não permissível para pedido posterior): "Sold out" (com formulário back-in-stock)
Quando Hide prices until customer logs in está ligado, todo o bloco de preço (incluindo faixas de volume e compare-at) é substituído por um prompt "Log in to see pricing" para visitantes. Regras de quantidade, contador de estoque e o card de representante de vendas ainda aparecem para que compradores possam decidir se vale a pena fazer login pelo produto.
product-tabs
Arquivo da seção: sections/product-tabs.liquid
Bloco de seção que divide o conteúdo da PDP em abas. Solte essa seção abaixo de main-product no seu template product.json para reduzir confusão visual em produtos com specs longas.
Configurações de bloco por aba: título, conteúdo (richtext / arquivo / vídeo).
Padrões comuns de aba:
- Description — copy principal de marketing
- Specs — specs técnicas estendidas além da tabela de tech-spec
- Datasheet — viewer de PDF embutido
- Shipping & Returns — info de logística
- Video — YouTube / Vimeo embutido
As abas usam <details> + <summary> nativos para acessibilidade total por teclado. A primeira aba está aberta por padrão; abrir outra auto-fecha as outras (modo acordeão) ou permanece aberta (modo toggle) dependendo da configuração Allow multiple open da seção.
related-products
Arquivo da seção: sections/related-products.liquid
Faixa de recomendação abaixo da PDP. Puxa de produtos da mesma coleção ou mesma tag.
Configurações:
| Configuração | Notas |
|---|---|
| Heading | Ex.: "Customers also viewed" ou "You may also like". |
| Source | same_collection (padrão) · same_tag · manual. |
| Max products | 4 (padrão) / 6 / 8 / 12. |
| Show price | Toggle. Respeita regras de preços que exigem login. |
| Show vendor | Toggle. |
Para compradores de catálogo B2B, apenas produtos no catálogo do comprador são exibidos (filtragem nativa da Shopify — o Vertex respeita isso de ponta a ponta).
recently-viewed
Arquivo da seção: sections/recently-viewed.liquid
Produtos rastreados via localStorage (até 12 por comprador). Aparecem na parte inferior da PDP e podem ser soltos na página inicial como uma faixa.
Como funciona
- Cada visualização de produto anexa a uma chave de localStorage
vertex_recently_viewed(FIFO, limitada a 12) - A seção lê essa chave do lado do cliente e busca o markup do card de cada produto
- Limpa quando o comprador limpa os dados do site no navegador — não é uma wishlist, não é persistido na Shopify
Configurações
- Heading — "Recently viewed"
- Max products — 4 / 6 / 8 / 12
- Hide if empty — toggle, padrão on (toda a seção desaparece quando o comprador não tem histórico de visualização)
Uma wishlist persistente exige um app Shopify — o Vertex permanece em conformidade com a política da Theme Store mantendo recently-viewed estritamente com escopo de sessão/navegador. Compare é o mesmo padrão (veja Seções exclusivas B2B).
sticky-cart
Arquivo da seção: sections/sticky-cart.liquid
Barra fixa de ATC apenas mobile que aparece após o comprador rolar além do ATC principal. Mantém add-to-cart a um toque de distância mesmo quando estão profundamente na tabela de specs.
O que renderiza
- Miniatura da imagem do produto (esquerda)
- Título e preço da variante selecionada
- Input de qty
- Botão ATC (direita)
Configurações
- Show on mobile only — padrão on (desktop tem o sticky header para navegação; mobile ganha mais lift de conversão de sticky ATC)
- Show variant title — toggle
- Color scheme
A seção usa um IntersectionObserver no ATC principal — só renderiza quando o ATC principal sai do viewport e desaparece quando rolado de volta para a view.
Cheat-sheet de interações B2B
| Superfície | Visitante | B2C logado | B2B logado |
|---|---|---|---|
| Bloco de preço | Oculto se "Hide prices until customer logs in" está ligado | Preço da vitrine | Preço do catálogo B2B + faixas de volume |
| Faixas de preços por volume | Oculto | Oculto | Visível (renderizado pelo servidor) |
| Regras de quantidade | MOQ/max da vitrine | MOQ/max da vitrine | MOQ/max do catálogo da empresa |
| Card de representante de vendas | Oculto | Oculto | Visível (quando campos de rep estão populados) |
| Badge de prazos NET | Oculto | Oculto | Visível na barra de saudação (não na PDP) |
| ATC Pre-order | Visível quando habilitado | Visível quando habilitado | Visível quando habilitado |
| Formulário back-in-stock | Visível quando esgotado | Visível quando esgotado | Visível quando esgotado |
| Contador de estoque | Visível | Visível | Visível |
| Recently viewed | Visível (localStorage) | Visível (localStorage) | Visível (localStorage) |
O que vem a seguir
- Seções exclusivas B2B → — Pedido em massa, RFQ, comparação, B2B feature promo
- Seções de sales boost → — Contador de estoque, alerta back-in-stock, quick view
- Header, footer e chrome → — Header, footer, barra de saudação B2B
- Guia de configuração B2B → — Habilite B2B + popule metafields de representante de vendas
- Guia de configuração de metafield → — Datasheets, MPN, ships-from, tech-specs