Este documento resume apenas os pontos que a agência consegue ajustar
sem mexer no código: tema, identidade visual, banners, vitrines, SEO,
integrações, atendimento e configurações operacionais da loja.
Informações úteis do projeto
A loja é multi-tenant. O storefront identifica o tenant pelo domínio,
busca as configurações nas APIs e renderiza a interface com esses
dados. A agência deve considerar o Admin/API como fonte de verdade.
Hostdefine o tenant, o tenant define as APIs, e as
APIs retornam tema, menus, settings, vitrines e páginas.
Limite
Sem alteração de código
O Admin altera conteúdo, cores e flags existentes. Novos layouts,
novas interações ou novos tipos de bloco exigem desenvolvimento.
Visual e identidade
Esses campos controlam a aparência principal da loja. Eles vêm de
/api/v1/layouts/templatee
/api/v1/configuracoes.
Cor primáriatheme.primaryColor
Cor do headertheme.headerColor
Texto do headertheme.headerTextColor
Título do footertheme.footerTitleColor
Admin/API
Branding
Nome da loja: storeSettings.loja.nome
Logo do header: storeSettings.loja.logo
Logo do footer: storeSettings.loja.logoFooter
Favicon/ícone: storeSettings.loja.icone
Selo: storeSettings.loja.selo.logoeurl
Admin/API
Templates visuais
O template define o comportamento visual base da loja.
modelo1
Radius padrão de 6px
modelo2
Estilo arredondado/pill
modelo3
Header reorganizado e banner mais amplo
Campo: theme.templateAdmin/API
Footer e contato
HTML do footer: /v1/layouts/footer
Recursos visuais: /v1/layouts/recursos
SAC: storeSettings.loja.sac
Endereço: storeSettings.loja.endereco
Redes sociais: storeSettings.redesSociais
Conteúdo, navegação e vitrines
A maior parte da experiência comercial da home e das páginas de
catálogo é configurável por API: menus, banners, blocos de vitrine,
hotsites e páginas CMS.
Admin/API
Menus
Endpoint: /api/v1/menus
Nome, URL, tipo de URL, ordem, destaque, novo e filhos
Mega menu: storeSettings.geral.habilitarMegaMenu
Ocultar categorias sem produto:
ocultarCategoriasSemProdutos
Nome, imagem, preço, desconto e badges vêm das APIs de
produto/vitrine
A agência altera a curadoria/posição via vitrine, quando
disponível no Admin
Layout interno do card não é editável pelo Admin
Componentes da home (vitrine)
A home é composta por blocos configuráveis no painel em
Marketing → Vitrines → Home → Componentes. Cada bloco
tem um tipo (component.tipo) e campos próprios. A ordem
dos blocos pode ser reordenada arrastando no Admin.
Banners com produtos (full-bleed)
BANNER_PRODUTOS
Banner
full-width (sai do container)
Banner em tela cheia (quebra o container — ocupa 100vw) com
carrossel de fade entre imagens. Os cards de produto ficam
sobrepostos na parte inferior do banner, dentro do container
centralizado. Exibe até 6 produtos.
1 ou mais banners (se mais de 1, vira carrossel com fade e
setas)
Imagem do banner + link de destino
Setas de navegação aparecem no hover (desktop)
Produtos curados: até 6 exibidos com imagem, nome, preço
"De/Por" e badge de desconto
Produtos ficam sobrepostos na base do banner (posição
absoluta)
Componente oculto em mobile (hidden lg:block). Para
garantir experiência mobile, adicione um componente PRODUTO
separado na vitrine.
Banners — Carrossel
BANNER · CARROSSEL
Imagem do banner
Slider de banners em tela cheia. Aparece no topo da home, acima
dos outros componentes. Suporta múltiplas imagens com auto-play.
Imagem desktop(campo imagem)
Imagem mobile(campo imagemMobile
)
Link de destino ao clicar
Vigência (data de início e fim)
Ordem de exibição entre os banners
Sempre forneça imagens separadas para desktop e mobile. O
storefront exibe a versão correta conforme o device do
visitante.
Banners — Grade
BANNER · GRADE
Grade estática de banners, sem slide. Quantidade de colunas
definida pelo campo quantidadeExibicao. Oculto em
mobile quando não há imagemMobile.
1, 2 ou 3 colunas (campo quantidadeExibicao)
Imagem desktop e imagem mobile por banner
Link e vigência por item
Banners grade sem imagemMobileficam ocultos em
telas pequenas. Sempre forneça a versão mobile para garantir
visibilidade.
Listagem de produtos
PRODUTO
Exibe uma grade ou carrossel de produtos. O template define o
layout (grade ou slide). O título e subtítulo da seção são
configuráveis.
Título da seção (nome)
Subtítulo (subTitulo) — visível apenas desktop
Template: grade ou carrossel (template)
Produtos curados no Admin por SKU ou categoria
Nome e preço do produto vêm da API de catálogo, não do
componente. O Admin controla quais produtos aparecem e em que
posição.
Marcas
MARCA
Carrossel ou grade de logos de marcas parceiras. Cada item exibe
a logo e funciona como link para a página da marca.
Logo de cada marca
Link para listagem da marca
Template: grade ou carrossel (template)
Ordem das marcas
Thumbs com produtos
THUMBS_PRODUTOS
Cards lado a lado, cada um representando uma vitrine. Cada card
exibe: nome da vitrine + link "Ver todos", imagem de capa
(banner), e até 4 produtos em miniatura abaixo.
Nome da vitrine (nome) — exibido em destaque
Link para a página da vitrine (permalink)
Imagem de capa da vitrine (imagem)
Até 4 produtos com imagem linkada ao detalhe
O componente só aparece se houver ao menos uma thumbnail
cadastrada
Bullets (categorias visuais)
BULLETS
Linha de círculos com imagem e label abaixo. Funciona como
atalho de navegação para vitrines/categorias ou abre um modal
com vídeo ao clicar.
Imagem circular por item (imagem)
Label abaixo do círculo (title)
Texto alternativo para acessibilidade (alt)
Comportamento ao clicar (target):
URL— navega para o link configurado
VIDEO— abre modal com vídeo incorporado
(YouTube, Vimeo ou .mp4)
URL de destino ou do vídeo (url)
Ordem dos itens (ordem)
Scroll horizontal automático em mobile; grid no desktop. Vídeos
do YouTube e Vimeo são incorporados automaticamente via URL.
Recursos
RECURSO
Blocos de ícone + label dispostos em linha. Usado para comunicar
vantagens ou serviços de forma visual e compacta (ex.: "Frete
grátis", "Troca fácil").
Título da seção (titulo)
Nome do bloco (nome)
Ícone, label e link por recurso
Cupom de desconto
CUPOM_DESCONTO
Exibe cartões de cupom de desconto copiáveis. Todos os
componentes do tipo CUPOM_DESCONTOna vitrine são
agrupados automaticamente em um único bloco.
Código do cupom
Valor ou percentual de desconto
Validade e regras (descrição)
Vários cupons podem ser adicionados; todos aparecem juntos
HTML livre
HTML
Bloco de conteúdo livre em HTML. Útil para banners customizados,
textos institucionais, incorporação de widgets externos ou
qualquer estrutura visual específica.
Campo html: conteúdo HTML completo
Campo nome: identificador interno (não aparece na
loja)
Use HTML semântico e imagens otimizadas. Evite scripts inline e
estilos que conflitem com o tema da loja.
Como gerenciar a ordem:no painel, acesse
Marketing → Vitrines → Home → Componentes. Arraste os blocos para reordenar. Cada bloco tem
seu tipo, nome
interno e campos próprios. Novos tipos de componente só podem ser
adicionados via desenvolvimento.
SEO, marketing e integrações
Estes campos são carregados em storeSettings. Eles afetam
scripts, rastreamento, suporte, privacidade e comunicação com o
cliente.
SEO
SEO da loja
Título: storeSettings.seo.titulo
Descrição: descricao
Keywords: palavrasChaves
Robots e sitemaps
Google
Google
Analytics: google.analytics
Tag Manager: google.tagManager
Ads: google.adWords
Maps: google.maps
Marketing
Pixels e busca
Facebook Pixel: storeSettings.facebook
Linx: storeSettings.linx
Busca por relevância: linx.buscarPorRelevancia
Atendimento
WhatsApp e Freshdesk
WhatsApp: número, país, saudação e mensagem de orçamento
Freshdesk: ativo, host, token e widget UUID
SAC: email, telefone e horário
Privacidade
LGPD e Privacy Tools
Termos de navegação: lgpd.termosNavegacao
Exclusão de cadastro:
lgpd.habilitarExclusaoCadastro
Banner e autoblock: privacyTools
Checkout/risco
ClearSale e pós-venda
Antifraude: clearSale.ativoe key
Tracking pós-venda: pedidoPosVenda
URL de API de tracking e token lojista
Configurações operacionais
Configurações que mudam comportamento de negócio, mensagens e
disponibilidade, mas ainda são consumidas pelo storefront via API.
Regra de negócio nova ou alteração em fluxo de checkout/cadastro.
Referências principais no código
A agência não precisa editar estes arquivos; eles são apenas
referência para entender de onde os dados vêm.
src/schemas/StoreSettings.tsxdefine os campos de
configuração.
src/services/theme.tscarrega tema e cores.
src/services/storeAndMenu.tscarrega menus, settings e
páginas.
src/collections/showcase.tscarrega vitrines e hotsites.
src/collections/layout.tscarrega layout, recursos e
footer.
Guia enxuto para agência — foco em configurações Admin/API, sem edição
direta de código.