Um layout Tray personalizado dá retrabalho quando o briefing descreve só a aparência. Cores, logotipo e referências de lojas bonitas são a parte fácil. O que costuma ser refeito é o que nasce do catálogo: filtros que não correspondem às características cadastradas, menus que não comportam as categorias reais, página de produto que não mostra a variação do jeito que o cliente escolhe. Este guia é para quem vai contratar a criação ou a personalização do layout de uma loja na Tray e quer entregar ao fornecedor um briefing que ele consiga orçar e testar. Para o briefing geral da loja (catálogo, integrações, preço e lançamento), use o modelo de briefing da loja virtual; aqui o foco é só o visual e a navegação.
O que o catálogo exige do layout?
Antes de falar de estética, o briefing precisa responder cinco perguntas sobre o catálogo, porque cada resposta muda a estrutura das páginas.
| Item | Pergunta do briefing | Por que muda o layout |
|---|---|---|
| Filtros | Por quais características o cliente escolhe o produto? | Cada filtro precisa de uma característica cadastrada em todos os produtos da categoria |
| Variações | Quais atributos geram variação e qual deles muda a foto? | Define se a página mostra seletor de cor com imagem, botões de tamanho ou lista |
| Busca | O cliente procura por nome, por código ou por uso? | Muda o destaque da busca no topo e o que aparece nos resultados |
| Menus | Quantas categorias e quantos níveis existem hoje e em um ano? | Define menu simples, menu com subcategorias ou menu amplo com imagens |
| Atributos próprios | Que informação o cliente precisa ver antes de comprar? | Tabela de medidas, composição, modo de uso, prazo de produção, compatibilidade |
Briefing preenchido (exemplo ilustrativo)
O exemplo abaixo é uma simulação de uma loja de calçados fictícia, para mostrar o nível de detalhe esperado. Não é um projeto real.
| Bloco | Resposta |
|---|---|
| Catálogo | 180 produtos ativos em 6 categorias; previsão de 300 em um ano |
| Filtros por categoria | Tamanho, cor, material, altura do salto; faixa de preço em todas |
| Variações | Cor e tamanho; a cor troca a galeria de fotos, o tamanho não |
| Página de produto | Galeria com zoom, seletor de cor por miniatura, botões de tamanho, tabela de medidas em aba, cálculo de frete por CEP |
| Busca | Por nome e por modelo; resultados com foto e preço |
| Menu | 6 categorias, 1 nível de subcategoria; “Lançamentos” e “Outlet” fixos no menu |
| Vitrines da home | Lançamentos, mais vendidos, outlet; banner principal com versão para celular |
| Páginas institucionais | Sobre, trocas e devoluções, guia de tamanhos, contato |
| Landing pages | 2 no lançamento (coleção de verão e Black Friday) |
| Referências | 3 lojas, com o que agrada em cada uma (navegação de uma, página de produto de outra) |
| Restrições da marca | Tipografia e cores do manual; logotipo em versão horizontal e reduzida |
Repare que quase nenhuma linha fala de cor ou estilo. São essas respostas que permitem ao fornecedor dizer se o tema escolhido atende ou se será preciso mexer no código.
O que é personalização de tema e o que depende de plano ou aplicativo?
Na Tray, a personalização acontece em camadas, e cada uma tem um limite diferente. Segundo a página de planos, consultada em 20/10/2026:
- Tema: a Tray informa mais de 50 layouts gratuitos e mais de 500 opções na Loja de Temas. Os temas pagos são desenvolvidos por agências parceiras; pelas perguntas frequentes da Loja de Temas, o tema comprado não tem mensalidade, vem com manual de configuração, tem suporte da agência que o criou e pode ser pré-visualizado na loja antes da compra. A mesma página afirma que todos os temas são responsivos.
- Editor visual: é o nível de personalização listado para o plano Lançamento.
- HTML e CSS: a edição do código aparece a partir do plano Crescimento.
- Recursos de catálogo ligados ao plano: configurações de exibição e definições de zoom aparecem a partir do Crescimento; abas de conteúdo na página de produto, a partir do Avançado.
- Landing pages: 1 no Lançamento, 5 no Crescimento, 20 no Avançado e ilimitadas no Ultra.
Na prática, cada item do briefing cai em uma destas categorias. A tabela a seguir é o filtro que separa o que é configuração do que é projeto:
| Pedido do briefing | Onde se resolve | Verificar |
|---|---|---|
| Cores, fontes, logotipo, banners | Configuração do tema | Opções do painel do tema escolhido |
| Ordem e tipo das vitrines da home | Configuração do tema | Quantas vitrines o tema permite |
| Filtros por característica | Cadastro de características + recurso do tema | Se o tema exibe filtros na categoria e de que forma |
| Seletor de cor com miniatura | Recurso do tema | Se o tema suporta imagem por variação |
| Tabela de medidas em aba | Recurso do plano ou do tema | Abas de conteúdo aparecem no plano Avançado; verificar no plano e no tema |
| Bloco novo na página de produto, fora do tema | Código (HTML e CSS) | Plano Crescimento ou superior |
| Comportamento novo (calculadora, configurador) | Aplicativo ou desenvolvimento específico | Loja de aplicativos e limites do código editável; verificar no plano |
| Landing pages de campanha | Recurso do plano | Quantidade por plano |
Dois cuidados antes de fechar o escopo. Primeiro, se o projeto prevê edição de código em um tema comprado, confirme com a agência autora como as atualizações do tema convivem com as alterações. Segundo, peça ao fornecedor para indicar, em cada linha do briefing, em qual dessas camadas o item será resolvido. Item sem camada definida é item que vai virar retrabalho ou cobrança extra.
Quais páginas, versões mobile e testes entram na entrega?
Protótipo anotado
O briefing fica mais fácil de aprovar quando vem com um protótipo anotado: um esboço de cada página principal com notas sobre conteúdo e responsabilidade. O exemplo abaixo é ilustrativo e descreve, em zonas, a home da loja fictícia do briefing.
| Zona (de cima para baixo) | Conteúdo | No celular | Quem edita depois da entrega |
|---|---|---|---|
| Barra de aviso | Frete, troca ou campanha | Uma linha, texto curto | Lojista |
| Cabeçalho | Logotipo, busca, conta, carrinho | Busca recolhida em ícone ou campo visível (decidir) | Fornecedor |
| Menu | 6 categorias + Lançamentos + Outlet | Menu lateral | Lojista (categorias); fornecedor (estrutura) |
| Banner principal | Campanha do momento | Imagem própria para celular, não a mesma recortada | Lojista |
| Vitrine 1 | Lançamentos | Rolagem lateral | Lojista |
| Faixa de categorias | 6 atalhos com imagem | Grade de 2 colunas | Lojista (imagens) |
| Vitrine 2 | Mais vendidos | Rolagem lateral | Lojista |
| Bloco institucional | Guia de tamanhos e trocas | Texto curto com link | Lojista |
| Rodapé | Políticas, contato, pagamento, redes | Seções recolhíveis | Fornecedor (estrutura); lojista (textos) |
Faça o mesmo para a página de categoria, a página de produto, o carrinho e as páginas institucionais. A coluna “Quem edita” é a que define a autonomia do lojista: tudo o que estiver marcado como “Lojista” precisa ser alterável pelo painel, sem código, e deve constar do treinamento da entrega.
Lista de páginas e testes da entrega
Inclua no escopo, por escrito:
- Páginas entregues: home, categoria, busca, produto, carrinho, institucionais e landing pages previstas, cada uma com versão para celular.
- Testes de catálogo: produto sem variação, com uma e com duas variações; produto esgotado; produto em promoção; categoria com muitos produtos e com nenhum.
- Testes de navegação: todos os filtros retornam resultado; menu abre e fecha no celular; busca encontra pelo nome e pelo modelo.
- Testes de conteúdo: nome de produto longo não quebra o card; banner com e sem texto; vitrine com poucos itens.
- Testes de compra: adicionar ao carrinho a partir da vitrine e da página de produto, calcular frete e chegar ao pagamento.
- Treinamento: como trocar banner, montar vitrine, editar menu e criar landing page.
Condições e limites
Os níveis de personalização, os recursos de catálogo e a quantidade de landing pages por plano foram consultados em 20/10/2026 na página de planos da Tray e podem mudar. As opções de configuração variam de um tema para outro: o que um tema oferece no painel, outro pode exigir código. Confira no manual do tema escolhido e, quando houver dúvida, verifique no plano antes de aprovar o briefing. Recursos de aplicativos de terceiros não foram avaliados neste texto.
Próximo passo
Se a loja vai vender também em marketplaces, o cadastro de características que alimenta os filtros precisa servir aos dois lados; veja a loja Tray conectada a marketplaces. Se você ainda está decidindo a plataforma pelo nível de personalização, compare Tray e Nuvemshop. E se quer transformar esse briefing em um layout entregue com protótipo aprovado, testes e treinamento, conheça a nossa criação de loja na Tray.
