Referência de Theme Settings do Vertex
Cada opção em Theme Settings no editor de tema da Shopify, explicada. Para acessar: abra o editor de tema e clique no ícone de engrenagem (canto inferior esquerdo) rotulado Theme settings.
As configurações do Vertex são agrupadas em 7 painéis:
Tipografia
| Configuração | O que faz | Padrão |
|---|---|---|
| Heading font | Fonte usada para <h1>–<h6> em cada página, além de manchetes de seções de marketing. | Poppins Bold |
| Body font | Fonte usada para texto do corpo, navegação, botões, campos de formulário e preços. | Poppins Regular |
Boa prática
O Vertex pré-carrega ambas as fontes para que estejam prontas antes do primeiro paint. Use uma única fonte para ambas (com pesos diferentes) se quiser o LCP mais rápido.
Cores
Paleta de cores inicial
Um único dropdown que re-colore toda a vitrine em um clique.
| Opção | Indústria | Cor de destaque |
|---|---|---|
| Custom | Qualquer | Use os color pickers individuais abaixo |
| Vertex amber | Industrial / MRO supply (padrão) | #fbbf24 |
| Throttle red | Autopeças | #ec5f24 |
| OfficeIT blue | Office & IT supply | #3b82f6 |
| Inkline teal | Print & reprographics | #0d9488 |
Paleta customizada (usada apenas quando a paleta inicial = Custom)
| Configuração | Propósito | Padrão (Vertex amber) |
|---|---|---|
| Background | Bg do body, bg do drawer | #ffffff |
| Surface | Bg de card, bg do painel de configurações | #f5f5f4 |
| Surface alternate | Superfície secundária sutil | #fafaf9 |
| Text | Cor primária de texto | #0c0a09 |
| Muted text | Eyebrows, labels, legendas | #57534e |
| Borders | Bordas de card, divisores | #e7e5e4 |
| Accent | Cor primária da marca (CTAs, badges) | #d97706 |
| Accent dark | Estado hover/active em CTAs âmbar | #b45309 |
| Accent soft | Tinta suave para fundos com tom âmbar | #fef3c7 |
| Text on accent | A cor do texto e do ícone aplicada sobre botões e badges preenchidos com a cor de destaque. Mantenha alto contraste contra Accent dark (branco por padrão). | #ffffff |
| Success | Badges de sucesso (In stock, NET-30 approved) | #15803d |
Layout
| Configuração | Opções | Padrão |
|---|---|---|
| Page width | Narrow (75rem) / Standard (90rem) / Wide (110rem) | Narrow |
| Page side padding | 16–60 px (slider) | 28 px |
Comportamento do header
| Configuração | O que faz | Padrão |
|---|---|---|
| Sticky header on scroll | Fixa o header principal no viewport. | On |
Comportamento do cart
| Configuração | O que faz | Padrão |
|---|---|---|
| Cart layout | Slide-out drawer (recomendado para quick-adds B2B) ou Dedicated cart page. | Drawer |
Utilitários
| Configuração | O que faz | Padrão |
|---|---|---|
| Show 'Back to top' button | Botão flutuante após um viewport de rolagem. | On |
| Show 'Recently viewed' on product pages | Rastreia até 12 produtos por comprador no localStorage. | On |
B2B
Modo de Storefront
| Opção | O que faz | Melhor para |
|---|---|---|
| Hybrid (auto) (padrão) | Auto-detecta: padrões B2C-friendly para visitantes, chrome B2B para compradores B2B logados. | A maioria dos comerciantes — aceita ambos os públicos. |
| B2B-only | Oculta padrões B2C-friendly. | Comerciantes exclusivamente atacadistas. |
| B2C-only | Suprime todos os elementos B2B da UI mesmo para compradores B2B logados. | Quando o mesmo tema roda em uma loja B2C irmã. |
→ Deep dive: Guia de modos de storefront
Visibilidade de preços
| Configuração | O que faz | Padrão |
|---|---|---|
| Hide prices until customer logs in | Substitui preços por "Log in to see pricing" para visitantes. | Off |
Seções da página de produto
| Configuração | O que faz | Metafield de suporte |
|---|---|---|
| Show price history on PDP | Renderiza um disclosure "Price history" quando o produto tem vertex.price_history. | vertex.price_history |
| Show 'Ships from' on PDP | Lê vertex.ships_from, recorre ao padrão abaixo. | vertex.ships_from |
| Default 'Ships from' location | Usado quando o produto não tem vertex.ships_from. Deixe em branco para pular. | — |
| Show 'Documents & downloads' on PDP | Encapsula links de datasheet / MSDS / brochure / install guide. Auto-oculta por produto quando nenhum documento está anexado. | vertex.datasheet, etc. |
| Show variant swatches | Transforma valores de opção de cor/imagem em chips de swatch clicáveis na página de produto. Quando desativado, as opções são renderizadas como dropdowns simples em todos os lugares. | — |
De onde vêm os swatches
Atribua uma cor ou imagem a um valor de opção no seu admin da Shopify e o Vertex o exibe como um chip clicável automaticamente — sem necessidade de configuração no tema. Um dropdown acessível permanece logo abaixo para usuários de teclado e leitores de tela.
Localization
| Configuração | Opções | Padrão |
|---|---|---|
| Text direction | Auto (locale-driven) / Left to right / Right to left | Auto |
Auto-RTL
O Vertex inverte <html dir> automaticamente para Árabe, Hebraico, Persa, Urdu, Iídiche, Curdo, Dhivehi e Pashto. Defina como Left to right / Right to left apenas se precisar forçar.
SEO e compartilhamento
Ativos de marca
| Configuração | Tamanho recomendado |
|---|---|
| Favicon | PNG 32×32. Deixe em branco para usar a marca Vertex incorporada. |
Social cards
| Configuração | Tamanho recomendado |
|---|---|
| Default share image (OG / Twitter) | 1200 × 630 px. |
| Twitter / X handle | Sem o @. |
URLs de perfil social (Organization JSON-LD sameAs)
- LinkedIn URL, Twitter / X URL, Facebook URL, Instagram URL, YouTube URL
Google Merchant / Shopping
| Configuração | Notas |
|---|---|
| Default ship-from country (ISO code) | Duas letras (US, GB, DE etc.) |
| Default shipping rate (numeric) | Use 0 para frete grátis |
| Handling time — min / max (days) | 0–14 dias |
| Transit time — min / max (days) | 0–30 dias |
| Return window (days) | 0–180 dias |
| Return method | By mail / In store / Keep product |
| Return shipping fees | Free return shipping / Customer pays |
Informações de negócio
Esses valores alimentam o JSON-LD Organization em todo o site (dados do Knowledge Panel).
| Configuração | Formato | Exemplo |
|---|---|---|
| Phone (E.164 preferred) | Formato internacional com código do país | +1-216-555-0182 |
| Phone hours | Texto livre | Mon-Fri 7am-6pm CST |
| Street address | — | 1500 W Industrial Pkwy |
| City / locality | — | Cleveland |
| State / region code | Código de região de 2 letras | OH |
| Postal / ZIP code | — | 44113 |
| Country (ISO code) | Código de país de 2 letras | US |
| Founding year | Ano de 4 dígitos | 2014 |
Maior vitória de SEO em 5 minutos
Preencher esses campos popula o JSON-LD Organization + LocalBusiness em cada página — os dados que o Google usa para construir seu Knowledge Panel e listagem no Maps.
Onde cada configuração se aplica
| Painel | Afeta |
|---|---|
| Tipografia | Cada página — body + headings |
| Cores | Cada página — background, texto, accent |
| Layout | Cada página — max-width, padding, sticky header |
| B2B | Chrome B2B (barra âmbar, RFQ, pedido em massa) + visibilidade de preço |
| Localization | Atributo <html dir> em cada página |
| SEO e compartilhamento | Tags <meta> + JSON-LD em cada página |
| Informações de negócio | JSON-LD Organization + LocalBusiness em cada página |
Próximos passos
- Guias de configuração de seções → — Configure cada bloco de seção
- Guia de modos de storefront → — Deep dive Hybrid / B2B-only / B2C-only
- Guia de configuração de metafield → — Metafields de suporte para aprimoramentos B2B na PDP