Seções de Página Inicial e Marketing
O Vertex traz 30+ seções prontas para a página inicial projetadas para vitrines B2B e de suprimentos industriais: hero rotators, multicolumns editoriais, marcas de confiança, faixas de KPI, acordeões FAQ com JSON-LD auto-emitido, banners de conversão e seções mescladas 50/50 que combinam duas ideias relacionadas em uma faixa (brands + quick-order, resources + FAQ).
Cada seção aqui é uma seção OS 2.0 standalone. Arraste-as em qualquer ordem no customizer. Você não precisa usá-las na página inicial também — solte-as em page.about.json, page.services.json ou qualquer template de página customizado.
Hero e seções de abertura
hero
Arquivo da seção: sections/hero.liquid
Rotador multi-slide com auto-advance, navegação por pontos e composição editorial (eyebrow + headline + subhead + CTAs duplos). Padrão para um único slide para o LCP mais rápido — slides adicionais são aprimoramento progressivo.
Configurações de bloco por slide: imagem (com seleção de largura mobile-aware via <picture><source>), texto eyebrow, headline, subhead, label e URL do CTA primário, label e URL do CTA secundário, alinhamento (left / center).
Configurações da seção: intervalo de auto-advance (segundos), toggle de mostrar pontos, esquema de cor.
Mantenha a página inicial em um único slide de hero se o Lighthouse Performance for uma prioridade. Cada slide extra adiciona uma imagem do tamanho do hero ao payload inicial. O padrão vem com 1 slide por essa razão.
featured-collection
Arquivo da seção: sections/featured-collection.liquid
Grade de produtos que puxa de um picker de coleção. Aceita blocos @app para conformidade com a Theme Store.
Configurações: picker de coleção, heading, produtos por linha (2 / 3 / 4 / 5), colunas em mobile (1 / 2), mostrar link View all, esquema de cor.
collection-list
Arquivo da seção: sections/collection-list.liquid
Grade de categorias com sobreposições de imagem e títulos centralizados sobre cada tile. Colunas e aspect ratio configuráveis.
Blocos editoriais
image-with-text
Arquivo da seção: sections/image-with-text.liquid
Pareamento clássico 50/50 ou assimétrico de imagem + texto. Útil para About us, Our process, Why us.
Configurações: imagem, heading, body (richtext), label e URL do CTA, layout (image-left / image-right), esquema de cor.
multicolumn
Arquivo da seção: sections/multicolumn.liquid
Grade de 2, 3 ou 4 colunas. Cada coluna tem um ícone (ou imagem), heading, body e link opcional. Use para propostas de valor (Same-day dispatch · NET-30 · Volume pricing · ISO 9001 certified).
Configurações de bloco por coluna: ícone (imagem), heading, body, label e URL do link.
rich-text
Arquivo da seção: sections/rich-text.liquid
Bloco centralizado de intro ou about. Heading + body richtext + CTA opcional. Use com moderação — é o bloco de "quebra de página".
timeline
Arquivo da seção: sections/timeline.liquid
Cronologia de ano + marco para uma página About. Por bloco: ano, título, body.
Confiança e prova social
testimonials
Arquivo da seção: sections/testimonials.liquid
Cards com rating e tratamento de header com avatar sobreposto. Cada card tem um rating (1–5 estrelas), citação, nome do cliente, cargo, empresa e imagem do avatar.
Configurações por bloco: nome, cargo, empresa, citação (richtext), rating (1–5), avatar (imagem).
logo-list
Arquivo da seção: sections/logo-list.liquid
Logos de marca em marquee com linhas de grade em fade. Use para Trusted by / As featured in / Brands we carry.
Configurações por bloco: imagem do logo, URL opcional. Nível de seção: velocidade de scroll, mostrar linhas de grade.
press-coverage
Arquivo da seção: sections/press-coverage.liquid
Faixa de logos + citações destacadas. Combina logos de imprensa com citações curtas atribuídas — "...the McMaster-Carr of WordPress." — Trade Weekly.
stats-bar
Arquivo da seção: sections/stats-bar.liquid
Faixa KPI em dark-mode. Use para números de manchete — 40,000+ SKUs · NET-30 · 24-hr Dispatch · ISO 9001.
Configurações por bloco: número (texto grande), label (texto pequeno).
"40,000+ SKUs" lê mais forte que "40,127 SKUs" e não exige atualizar a seção toda vez que o inventário muda. O mesmo com volume de pedidos.
Conversão e CTA
cta-banner
Arquivo da seção: sections/cta-banner.liquid
Call-to-action pré-footer com efeito de sobreposição no footer — a faixa visualmente quebra para dentro do footer para polimento editorial.
Configurações: heading, subhead, CTA primário, CTA secundário, imagem (opcional), toggle Hide for B2B customers.
O toggle Hide for B2B customers é um detalhe pequeno mas crítico. Se o CTA diz "Become a dealer" ou "Request a quote", você não quer mostrá-lo a um comprador que já é um dealer logado. Vire isso e a seção desaparece quando customer.b2b? é true.
newsletter
Arquivo da seção: sections/newsletter.liquid
Opt-in de e-mail com botão de inscrever. Usa o formulário nativo de customer-newsletter da Shopify — os inscritos caem em sua lista de clientes Shopify com a flag newsletter.
industries-grid
Arquivo da seção: sections/industries-grid.liquid
Grade editorial de cards para mostrar os verticais que você atende — HVAC · Manufacturing · Facilities · Marine · Aerospace.
Configurações por bloco: imagem, título, link.
resource-hub
Arquivo da seção: sections/resource-hub.liquid
Lista de downloads para datasheets, MSDS, brochures, certificações. Cada entrada é um link de arquivo.
Configurações por bloco: título, arquivo (PDF), descrição, ícone opcional.
services-grid
Arquivo da seção: sections/services-grid.liquid
Tiles com sobreposição de imagem para ofertas de serviço — Cut to size · Custom kitting · Onsite consultation · Inventory management.
FAQ
faq
Arquivo da seção: sections/faq.liquid
Acordeão baseado em disclosure (construído em <details> / <summary> nativos para suporte completo de teclado + screen reader). Auto-emite FAQPage JSON-LD para rich snippets do Google.
Configurações por bloco: pergunta (texto), resposta (richtext).
A seção emite o grafo JSON-LD automaticamente — você obterá rich snippets de FAQ nos resultados de busca do Google sem tocar em código. Certifique-se de que as perguntas são perguntas reais que compradores fazem (não copy de marketing), pois as diretrizes de conteúdo do Google se aplicam.
Seções mescladas de duplo propósito
Algumas seções combinam duas ideias em uma faixa, economizando espaço vertical e criando ritmo editorial.
dual-brands-quickorder
Arquivo da seção: sections/dual-brands-quickorder.liquid
Mesclada 50/50: grade de logo de marca de um lado, pad de quick-order paste-to-cart do outro. Ótimo para páginas iniciais B2B onde você quer destacar marcas de confiança E um caminho de conversão na mesma faixa.
dual-resources-faq
Arquivo da seção: sections/dual-resources-faq.liquid
Mesclada 50/50: downloads de recursos (datasheets, brochures) de um lado, acordeão FAQ do outro. Pareamento comum para indústrias com forte suporte.
Recomendações de ordenação de seção
Ordem sugerida para uma página inicial MRO / suprimentos industriais:
- Hero — a proposta de valor + CTA primário (catálogo vs. RFQ)
- Stats bar — marcas de credibilidade instantâneas
- Featured collection — best sellers ou categoria top-of-funnel
- Multicolumn — Why us em 3 colunas
- Industries grid — os verticais que você atende
- Logo list — marcas que você comercializa
- Dual brands + quickorder — combine com o CTA da trade-list
- Testimonials — citações de compradores com ratings
- Resource hub — downloads
- FAQ — principais objeções
- CTA banner — Request a quote (oculto para B2B logado)
- Newsletter — signup da trade-list
O que vem a seguir
- Seções da página de produto → — Main product, tabs, related products, recently viewed, sticky cart
- Seções exclusivas B2B → — B2B feature promo, pedido em massa, RFQ, comparação
- Seções de sales boost → — Promo banner, countdown, bundles, stock counter
- Referência de Theme settings → — Esquemas de cor, tipografia, configurações de layout