As 4 Lojas de Demonstração do Vertex — Vertex, Throttle, OfficeIT, Inkline
Uma licença do tema Vertex. Quatro looks de loja prontos para produção. Cada preset é ajustado para um setor B2B / B2C industrial específico — diferentes cores de destaque, diferentes composições de página inicial, diferentes finders, diferentes imagens de lifestyle, diferentes ganchos de copy. Alternar entre eles é um clique no customizador (permanente) ou um parâmetro de URL (visualização temporária).
Se você vende em vários setores — ou está decidindo com qual setor liderar antes do lançamento — este é o guia que escolhe o ponto de partida certo para sua loja.
Você não precisa comprar o Vertex quatro vezes. Os 4 presets vêm no mesmo arquivo de tema. Você também pode remixá-los — escolha a página inicial do OfficeIT, mas a cor de destaque do Throttle, ou substitua qualquer preset com o seletor de paleta personalizada. Eles são pontos de partida, não templates trancados.
Por que 4 presets?
A Shopify Theme Store recompensa temas que demonstram amplitude. Um comprador que examina o diretório de temas quer ver seu setor de relance — não uma demonstração genérica de "tema B2B" que ele tem que traduzir mentalmente para seu caso de uso.
O Vertex aborda isso entregando quatro lojas de demonstração totalmente populadas sob uma única licença de tema. Cada preset é:
- Ajustado por setor — cor, copy, composição de hero e ordem de seções da página inicial são escolhidas para uma jornada de compra específica
- Com reconhecimento de finder — autopeças recebe um finder de adequação Marca/Modelo/Ano; suprimentos de impressão recebem um finder de Marca/Modelo/Cor da Impressora; o preset industrial não tem finder (depende da navegação por coleção com facetas)
- Imagens completas — ~9 imagens de hero / lifestyle / grade do setor por preset, todas geradas para a estética daquele setor. Sem incompatibilidade de fotos de estoque.
- Tematizável de forma independente — cada preset tem seu próprio arquivo de sobrescrita CSS (
assets/demo-{preset}.css) que troca cores de destaque, destaques de finder e quaisquer escolhas de tipografia por preset
O resultado: você pode lançar o Vertex como uma loja industrial MRO, um catálogo de autopeças, um distribuidor de suprimentos de escritório ou um fornecedor de gráfica sem encomendar nenhum design personalizado.
Os 4 presets em detalhes
Preset 1 — Vertex (padrão)
| Setor | Suprimentos industriais, MRO, ferragens, fixadores, ferramentas manuais, fluidos, abrasivos |
| Cor de destaque | Âmbar #fbbf24 |
| Finder | Nenhum — depende de filtros com facetas + pesquisa preditiva |
| Hero da página inicial | Tipografia em negrito + imagens de lifestyle de oficina / armazém |
| Ganchos B2B | "Preços por volume", "NET-30 disponível", "Certificado ISO 9001", "Despacho em 24h" |
| Melhor para | Distribuidores industriais genéricos, fornecedores de MRO, comerciantes de fixadores / ferragens, catálogos de ferramentas, fornecedores JanSan |
Este é o padrão. Quando você instala o Vertex da Shopify Theme Store, é isso que carrega. O destaque âmbar mapeia para uma linguagem visual industrial calorosa, McMaster-Carr / Grainger / Fastenal que os compradores de aquisição reconhecem imediatamente.
Preset 2 — Throttle (autopeças)
| Setor | Autopeças, performance, aftermarket, substituição OEM, motocicleta, marítimo, powersports |
| Cor de destaque | Vermelho-laranja #ec5f24 |
| Finder | Cascade Marca / Modelo / Ano de adequação (3 dropdowns) |
| Hero da página inicial | Mensagens de adequação primeiro ("Encontre peças para seu veículo") com o finder acima das coleções de produtos |
| Ganchos B2B | "Preços comerciais", "Despacho de armazém", "Referência cruzada OEM", "Contas de revendedores" |
| Melhor para | Distribuidores de autopeças, oficinas de performance, peças de motocicleta / marítimo / RV, ATV / UTV / powersports |
O recurso definidor do preset Throttle é o finder de adequação — um dropdown em cascata de 3 etapas (Marca ▸ Modelo ▸ Ano) renderizado no hero da página inicial, na barra lateral da página de coleção e como uma barra fixa opcional. Os compradores selecionam seu veículo uma vez; as visualizações de produtos subsequentes são filtradas apenas para peças correspondentes à adequação.
O destaque vermelho-laranja mapeia para uma linguagem visual performance / automotiva / energia — RockAuto + Summit Racing em um único tema.
Preset 3 — OfficeIT (escritório, IT, eletrônicos)
| Setor | Suprimentos de escritório, hardware de IT, eletrônicos, papel de copiadora, monitores, teclados, laptops, consumíveis em massa |
| Cor de destaque | Azul (corporativo, grau IT) |
| Finder | Cascade Marca / Categoria / Capacidade (3 dropdowns) — ex.: "HP ▸ Toner ▸ 5000 páginas" |
| Hero da página inicial | Mensagens de pedido em massa, ganchos de conta B2B, CTAs de NET-30 / cobrança por fatura |
| Ganchos B2B | "Descontos em massa", "Net-30 para empresas", "Frete grátis acima de $X", "Gerente de conta dedicado" |
| Melhor para | Distribuidores de suprimentos de escritório, revendedores de IT, atacadistas de eletrônicos, fornecimento para escolas / governo, fornecedores de compras corporativas |
O OfficeIT lidera com pedidos B2B de escritório em massa — a jornada do comprador é "Preciso equipar um escritório de 50 mesas" em vez de "Preciso de um mouse". A copy e CTAs do hero destacam pedidos em massa, RFQ e NET-30 com destaque; a página inicial apresenta o quick-pad de pedidos em massa acima da coleção em destaque padrão.
O destaque azul mapeia para a linguagem visual IT corporativo / Quill / Staples Business Advantage que os compradores esperam dessa categoria.
O que há dentro de cada preset
Cada preset vem com suas próprias cópias destes ativos:
| Ativo | Variante por preset |
|---|---|
| Template da página inicial | templates/index.json (Vertex padrão) + templates/index.throttle.json, index.officeit.json, index.printsupply.json |
| Template de coleção | templates/collection.json + variantes por preset onde a ordem das seções difere (ex.: o Throttle coloca o finder acima dos filtros) |
| Template de produto | templates/product.json + variantes por preset (ex.: o Inkline adiciona uma aba de "impressoras compatíveis") |
| Sobrescrita CSS | assets/demo-{preset}.css — sobrescreve --color-accent, --color-on-accent, destaque do finder, paradas de gradiente |
| Imagens de hero | ~3 variantes de hero por preset, todas geradas para a estética do setor |
| Imagens de lifestyle | ~3 fotos de lifestyle por preset (oficina / concessionária / escritório / gráfica) |
| Imagens de grade do setor | ~3 imagens de cartão de setor por preset (ex.: HVAC + manufatura + instalações para o Vertex; carros + motocicletas + barcos para o Throttle) |
| Copy de demonstração | Headlines de hero, subheads, rótulos de CTA, texto de depoimentos — todos ajustados por preset |
Isto significa que trocar presets não é "mudar uma cor e rezar" — é uma troca coerente de loja.
Como trocar de preset
Você tem duas maneiras de trocar — permanente e visualização temporária.
Permanente — através do customizador
- Abra o admin do Shopify e vá para Loja Virtual ▸ Temas.
- Clique em Customizar no Vertex.
- Na barra lateral esquerda, clique em Configurações do tema ▸ Cores.
- Role até Paleta de cores inicial.
- Escolha uma das:
- Personalizada — paleta totalmente personalizada (usa seus seletores de cor manuais abaixo)
- Vertex — âmbar industrial (padrão)
- Throttle — vermelho-laranja de autopeças
- OfficeIT — azul corporativo
- Inkline — teal de impressão/reprografia
- Salvar no canto superior direito.
A cor de destaque muda instantaneamente. Para também trocar a página inicial para o layout daquele preset, consulte Trocando o template da página inicial abaixo.
O preset de cor em Configurações do tema ▸ Cores só troca cores. Para obter a experiência completa do preset (layout da página inicial, finder, imagens de lifestyle), você também precisa aplicar o sufixo de template da página inicial correspondente — consulte a próxima seção.
Temporário — via visualização por URL
Para visualizar um preset em qualquer URL da loja sem aplicá-lo:
| Preset | Parâmetro de URL de visualização |
|---|---|
| Vertex | (padrão — sem parâmetro) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
Por exemplo:
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
Isto usa o recurso nativo de sufixo de template do Shopify — a loja renderiza usando o arquivo de template alternativo (index.throttle.json) para aquela visualização única de página. Nada é salvo; atualizar sem o parâmetro reverte para o padrão.
Use isto para:
- Testar A/B um preset com um público pequeno antes de comprometer
- Enviar um URL de demonstração para uma parte interessada ("veja como a versão de autopeças de nossa loja se sentiria")
- Comparar composições de hero lado a lado em duas abas de navegador
Trocando o template da página inicial
Para aplicar permanentemente o layout da página inicial de um preset:
- Abra Loja Virtual ▸ Temas ▸ Customizar ▸ Início.
- No seletor de template superior, escolha Adicionar template ou escolha a variante
index.{preset}.jsondo preset. - Salve.
Alternativamente, defina uma página inicial com o sufixo de template relevante na configuração da página, ou edite settings_data.json diretamente se estiver confortável.
Nada o força a usar a página inicial de um preset com seu destaque. Você pode usar o layout da página inicial do Throttle (porque você ama a composição finder-de-adequação-primeiro) com o destaque teal do Inkline (porque combina com sua marca) e a seção de bloco de pedido em massa do OfficeIT (porque seus compradores colam de planilhas). O Vertex é componível.
Como funciona a sobrescrita da cor de destaque
Cada preset vem com um pequeno arquivo CSS em assets/demo-{preset}.css:
/* assets/demo-throttle.css */
:root {
--color-accent: 236 95 36; /* ec5f24 — Throttle red-orange */
--color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }
Quando a configuração Paleta de cores inicial é definida como Throttle, o layout inclui este arquivo via {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %}.
As variáveis CSS de destaque --color-accent + --color-on-accent fluem através de cada componente — botões, pílulas, selos, links, anéis de foco, destaques de dropdown, a barra de saudação B2B, dropdowns do finder, CTAs do hero. Trocar a paleta troca todo o destaque da loja em uma única renderização.
Isto significa que você também pode criar seu próprio preset por:
- Copiar um dos arquivos
demo-*.cssexistentes - Renomeá-lo para
demo-mybrand.css - Ajustar os valores
--color-accent+--color-on-accent - Conectá-lo em
layout/theme.liquidcom outro branch{% if %} - (Opcional) Adicionar um template de página inicial correspondente em
templates/index.mybrand.json
Um usuário avançado pode produzir um 5º preset em menos de uma hora.
Escolhendo seu preset — matriz de decisão
Use isto para escolher um ponto de partida. Lembre-se: você pode sobrescrever qualquer coisa depois.
| Se você vende... | Comece com | Razão |
|---|---|---|
| Fixadores, ferramentas manuais, lubrificantes, abrasivos, ferragens, MRO geral | Vertex | Linha de base industrial genérica, sem finder necessário (filtros com facetas fazem o trabalho) |
| Peças de auto / motocicleta / marítimo / RV / powersports | Throttle | O finder de adequação é o recurso decisivo para este setor |
| Escritório, IT, eletrônicos, suprimentos de copiadora, fornecimento para escolas / governo | OfficeIT | Pedidos B2B de escritório em massa + linguagem visual de IT corporativo |
| Tinta de impressora, toner, papel de grande formato, consumíveis de reprografia | Inkline | O finder de cartucho de impressora elimina o erro nº 1 do comprador neste setor |
| Limpeza / saneamento (JanSan) | Vertex | A linha de base MRO do Vertex mapeia diretamente para JanSan; nenhum finder especializado necessário |
| Produtos químicos industriais / lubrificantes com fichas de dados técnicas | Vertex | Tabelas de especificações técnicas + bloco de documentos são essenciais para o preset Vertex |
| Materiais de construção (madeira, concreto, drywall) | Vertex | Linha de base do Vertex + página de pedido em massa funcionam bem; considere o azul do OfficeIT se quiser uma paleta mais fria |
| Produtos promocionais com impressão de logo personalizado | Inkline | Destaque teal + linguagem visual de gráfica alinham-se com a categoria, mesmo que o finder seja mais útil para tinta/toner |
| Somente atacado (sem B2C) | Vertex ou OfficeIT | Qualquer um funciona; escolha o destaque que combina com sua marca. Mude o Modo da loja para Somente-B2B. |
Personalizando um preset
Os presets são pontos de partida. Após a instalação, você pode:
| Personalizar | Como |
|---|---|
| Cor de destaque | Configurações do tema ▸ Cores ▸ Paleta inicial ▸ Personalizada, depois escolha seu próprio --color-accent |
| Logo | Configurações do tema ▸ Logo — substitua o logo de demonstração pelo seu próprio SVG ou PNG |
| Ordem das seções da página inicial | Customizador ▸ Início — arraste as seções para reordenar, ou adicione/remova seções da paleta de 30+ seções |
| Imagens de hero | Clique na seção Hero no customizador, substitua a imagem de cada slide |
| Imagens de lifestyle / setor | Substitua por seção no customizador; cada seção tem um seletor de imagem |
| Rótulos + dados dos dropdowns do finder | (Throttle / OfficeIT / Inkline) — consulte o Guia de configuração do finder para a estrutura de dados orientada por metafields |
| Tipografia | Configurações do tema ▸ Tipografia — fonte de heading, fonte de body, razão de escala |
| Copy / CTAs | Edite texto inline no customizador para cada seção |
| Traduções | Configurações do tema ▸ Idiomas — forneça strings personalizadas através de sobrescritas de locales/*.schema.json |
Após personalizar, você pode salvar seu trabalho como um tema nomeado em Loja Virtual ▸ Temas ▸ Biblioteca de temas — útil ao executar testes A/B ou ao preparar mudanças visuais.
Leitura relacionada
- Visão geral — Por que o Vertex entrega 4 presets em um tema
- Instalação — Instalação do tema + seleção de preset durante a configuração
- Referência de configurações do tema — Cores ▸ Paleta inicial e configurações por preset
- Markets & multi-moeda — Cada preset funciona identicamente em todos os mercados
- Guia de modo da loja — Como Híbrido / Somente-B2B / Somente-B2C interagem com presets
- Painel da conta do cliente — Idêntico em todos os presets (apenas a cor de destaque muda)
- Guia da página RFQ — Idêntico em todos os presets
- Guia de configuração B2B — A mesma configuração B2B funciona para todos os 4 presets
Resumo
- O Vertex entrega 4 presets de demonstração em uma única licença de tema: Vertex (âmbar industrial), Throttle (vermelho-laranja de autopeças), OfficeIT (azul de escritório/IT), Inkline (teal de suprimentos de impressão).
- Cada preset tem seu próprio template de página inicial, finder, CSS de destaque e ~9 imagens de lifestyle.
- Mude permanentemente em Configurações do tema ▸ Cores ▸ Paleta inicial + aplicando o sufixo do template da página inicial do preset.
- Mude temporariamente para visualizações anexando
?view=throttle | officeit | printsupplya qualquer URL da loja. - Os presets são pontos de partida — cor de destaque, layout da página inicial, finder, imagens e copy são todos substituíveis de forma independente.
- Um 5º preset personalizado leva cerca de uma hora para criar copiando um arquivo
demo-*.cssexistente e conectando-o emlayout/theme.liquid.