Pular para o conteúdo principal

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).

Tema Vertex — Paleta da página inicial

Misture e combine — a ordem é sua

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.

Dica de LCP

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.

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).

Mostre faixas, não números exatos

"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).

Rich snippets de fábrica

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:

  1. Hero — a proposta de valor + CTA primário (catálogo vs. RFQ)
  2. Stats bar — marcas de credibilidade instantâneas
  3. Featured collection — best sellers ou categoria top-of-funnel
  4. Multicolumn — Why us em 3 colunas
  5. Industries grid — os verticais que você atende
  6. Logo list — marcas que você comercializa
  7. Dual brands + quickorder — combine com o CTA da trade-list
  8. Testimonials — citações de compradores com ratings
  9. Resource hub — downloads
  10. FAQ — principais objeções
  11. CTA banner — Request a quote (oculto para B2B logado)
  12. Newsletter — signup da trade-list

Vertex Theme — Homepage palette

O que vem a seguir​