Pular para o conteúdo principal

Instalando o Vertex em sua loja Shopify

Este guia conduz você pela instalação do tema Shopify B2B premium Vertex — desde a compra, passando pela habilitação B2B, configuração de metafields, até a sua primeira publicação.

Tempo estimado
  • Instalação B2C básica (somente tema, sem B2B): 5 minutos
  • Instalação B2B completa (tema + B2B nativo + metafields + primeira empresa): 45–60 minutos

Antes de começar​

Requisitos do plano Shopify​

Você precisaPor quê
Qualquer plano ShopifyO Vertex instala em todos os planos — Basic / Shopify / Advanced / Plus
Shopify Plus OU Advanced + B2B add-onNecessário apenas se você quiser usar os recursos B2B nativos da Shopify. Sem eles, o Vertex funciona como um tema B2C polido de suprimentos industriais.
Novas contas de cliente habilitadasNecessário para qualquer recurso de conta — Settings ▸ Customer accounts ▸ Show login link in checkout

Passo 1 — Instale o Vertex a partir da Shopify Theme Store​

  1. Vá para Online Store ▸ Themes no seu admin da Shopify
  2. Clique em Add theme ▸ Visit Theme Store
  3. Pesquise por "Vertex" ou navegue até a categoria B2B & Wholesale
  4. Clique em Try theme para instalar o Vertex como um tema não publicado em sua loja
  5. Clique em Customize para abrir o editor de tema
Neste ponto, sua vitrine não foi alterada

O tema está instalado mas não publicado. Você pode visualizar e customizar o Vertex sem afetar sua vitrine ao vivo. Publique (Passo 6) somente quando estiver pronto.

Passo 2 — Habilite o B2B nativo da Shopify (opcional, mas recomendado)​

Pule este passo se quiser apenas B2C — o chrome B2B do Vertex auto-oculta quando nenhum cliente B2B está logado.

  1. Vá para Settings ▸ Customer accounts
  2. Habilite New customer accounts
  3. Role até B2B e clique em Manage
  4. Clique em Enable B2B
  5. Agora você verá uma nova seção B2B na barra lateral do admin da Shopify

→ Veja o guia completo de configuração B2B para criar sua primeira empresa, atribuir catálogos, definir prazos NET etc.

Passo 3 — Configure o namespace de metafield Vertex​

O Vertex lê vários metafields gerenciados pelo comerciante para alimentar os aprimoramentos da PDP (informações do representante de vendas, ships-from, busca por MPN, datasheets, especificações técnicas, histórico de preços).

Você pode fazer isso de duas maneiras:

Opção A — Configuração manual via admin da Shopify (~15 min)​

  1. Vá para Settings ▸ Custom data
  2. Clique em Companies (ou Products, dependendo de qual metafield você está adicionando)
  3. Clique em Add definition e crie cada metafield a partir da tabela no Guia de configuração de metafield

Opção B — Configuração em massa via Shopify GraphQL Admin API (~5 min)​

Use as mutations GraphQL incluídas no Guia de configuração de metafield para semear cada definição de metafield Vertex em um único lote.

Você não precisa de cada metafield para começar

O tema se degrada com elegância quando metafields estão faltando. Blocos da PDP (Documents, Price history, Ships-from) auto-ocultam quando seu metafield de suporte está vazio. Comece com os mais impactantes (vertex.mpn para busca de SKU e vertex.rep_* para a pill do representante de vendas) e adicione os outros conforme você escala.

Passo 4 — Escolha um preset de cores​

O Vertex vem com 4 paletas iniciais:

PresetIndústriaCor de destaque
Vertex (padrão)Industrial / MROÂmbar #fbbf24
ThrottleAutopeçasVermelho-laranja #ec5f24
OfficeITSuprimentos para escritório e ITAzul
InklineSuprimentos de impressãoVerde-azulado

Para trocar de preset:

  1. No editor de tema, clique em Theme settings (canto inferior esquerdo)
  2. Abra Colors
  3. Selecione sua paleta inicial no dropdown Starter color palette
  4. Toda a vitrine é recolorida no painel de preview

→ Veja o Guia de presets demo para as diferenças entre presets.

Passo 5 — Configure header, navegação, footer​

O header + footer são configurados via section groups no editor de tema:

  1. No editor de tema, clique em Sections (barra lateral esquerda)
  2. Clique em Header group para configurar:
    • Announcement bar (faixa superior dark/amber com links, sociais, telefone)
    • B2B greeting bar (visível apenas para clientes B2B logados)
    • Main header (logo, busca, navegação)
  3. Clique em Footer group para configurar:
    • Menu do footer, links sociais, e-mail de contato, signup de newsletter, ícones de pagamento

→ Walkthrough detalhado: Guia de header, footer e chrome · Referência de Theme settings.

Passo 6 — Visualize e depois publique​

  1. No editor de tema, clique no botão Preview (canto superior direito) para ver sua vitrine em uma nova aba
  2. Clique através de:
    • Página inicial
    • Uma página de coleção
    • Uma página de produto
    • O carrinho
    • A página de login do cliente
  3. Se uma conta de teste de comprador B2B estiver configurada, faça login e verifique:
    • A barra de saudação âmbar aparece com o nome da empresa + badge de prazos NET
    • Faixas de preços por volume são renderizadas na PDP (se atribuídas ao catálogo daquele comprador)
    • A pill do representante de vendas aparece no header (se o metafield vertex.rep_name estiver definido)
  4. De volta a Online Store ▸ Themes, localize o Vertex na Theme library
  5. Clique no menu ⋯ ao lado do Vertex ▸ Publish

Sua vitrine agora está ao vivo no Vertex 🎉

Troubleshooting de instalação​

"Não vejo a barra de saudação B2B âmbar"​

Causas (em ordem de probabilidade):

  1. Você não está logado como cliente B2B. A barra âmbar só renderiza quando customer.b2b? é true E customer.current_company está definido. Faça login como um comprador B2B vinculado a uma empresa.
  2. O modo de storefront está definido como B2C-only. Abra Theme settings ▸ B2B ▸ Storefront mode e confirme que está definido como Hybrid (auto) ou B2B-only.
  3. O B2B nativo não está habilitado no admin da Shopify. Confirme o Passo 2 acima.

"Os preços mostram 'Log in to see pricing' mesmo estando logado"​

O toggle Theme settings ▸ B2B ▸ Hide prices until customer logs in está habilitado. Para desativar, desmarque a caixa.

"A pill do representante de vendas não aparece no header"​

A pill só renderiza quando a empresa do comprador tem um valor definido no metafield vertex.rep_name. Verifique em Customers ▸ Companies ▸ [Nome da empresa] ▸ Metafields se vertex.rep_name está populado.

→ Veja FAQ + troubleshooting para mais.

Próximos passos​