Organização do tema

Organize seu trabalho por responsabilidade. O formato dos arquivos é um contrato da plataforma; nomes de classes, aparência e composição visual são escolhas suas.

Arquivo ou pasta	Responsabilidade	Exemplo de alteração
theme.json	Manifesto técnico e caminhos dos templates	Consultar qual template atende a Home
layout.liquid	Documento HTML que envolve as páginas	Estrutura compartilhada e chamadas de componentes
templates/*.json	Presença e ordem das sections	Colocar uma vitrine depois de um banner
sections/*.liquid	Estrutura de uma seção da página	Criar uma vitrine
components/*.liquid	Trechos reutilizáveis	Reutilizar um card de produto
assets/theme.css	Aparência e responsividade	Alterar espaçamento e colunas
assets/theme.js	Interações visuais do tema-base	Preservar no fluxo de importação atual
assets/images/	Imagens do tema, inclusive subpastas	Adicionar um banner próprio

Um caminho para trabalhar

Comece pelo template da página, identifique as sections e depois os components que elas renderizam. Crie nomes descritivos, como vitrine_presentes, e agrupe o CSS por componente ou seção. Evite espalhar o mesmo markup por várias páginas quando um component puder recebê-lo por parâmetros.

Não há settings visuais ou presets obrigatórios. JSON compõe, Liquid estrutura e CSS desenha. dataSources serve para declarar consultas comerciais, não para guardar cores, fontes ou resultados de produtos.

Componentes recebem argumentos

Use render e passe explicitamente os dados necessários. Um component não deve presumir que herda todos os objetos da página. Veja o exemplo completo de vitrine.

Escolha o alcance da alteração

Mudar um component afeta todos os locais que o usam. Mudar o template institucional afeta todas as páginas atendidas por ele. Se uma seção precisa aparecer duas vezes, cada instância deve ter um id diferente.

Confira o contrato completo dos arquivos e os limites de importação.

Partir de um tema pronto

O Aura é diretamente o tema padrão do sistema e do laboratório; não existe um bundle separado default. A biblioteca do editor oferece Aura, Lumen, Brisa, Fluxo, Nova, Cobalto, Pulso e Vértice. Selecionar um deles abre um rascunho; a vitrine publicada muda somente após a publicação explícita.

O Lumen traz tipografia Inter, fundo branco, botões arredondados e cabeçalho fixo. Sua Home compõe um banner e uma grade de produtos da loja. Para personalizar o banner, edite sections/hero.liquid e o asset assets/images/banner.webp; a logo usa a identidade global da loja. As demais páginas já incluem os hooks de produto, carrinho, checkout, pagamentos e conta do runtime compartilhado.

O Brisa traz a direção editorial da referência: Newsreader nos títulos, Red Hat Text no corpo, preto e branco, cantos retos e imagens amplas. A Home combina hero, coleções, produto em destaque, quatro produtos, banner editorial e um comparador de imagens. Textos e estrutura ficam nas sections; cores, proporções e espaçamentos ficam em assets/theme.css. As fotografias decorativas estão em assets/images/banner.webp e assets/images/detail.webp, resolvidas por asset_url. A logo continua sendo a identidade global da loja.

Coleções e produtos vêm dos dados da loja; blocos sem dados comerciais são omitidos ou exibem o estado vazio. O comparador é apenas visual, e compra, carrinho, checkout, pagamentos e conta usam o runtime compartilhado.

O Fluxo usa Instrument Sans sobre fundo escuro em oliva e creme; sua Home divide o hero entre declaração e imagem, lista categorias em tiles tipográficos, alterna dois blocos de mídia com texto e mostra oito produtos. O Nova usa Liter, creme quente, laranja e lilás: o hero apresenta a marca em largura total sobre a imagem editorial, seguido por dois blocos de cor, oito produtos e um par de categorias; a página de produto termina com uma faixa em movimento das categorias. O Cobalto usa Proza Libre e Archivo com bordas de 2px, cantos arredondados e sombras sólidas em creme e framboesa: hero com caixa de texto, cards de categoria e oito produtos. O Pulso usa Oswald em caixa alta sobre preto com amarelo neon e ciano: hero dividido com título gigante, quatro produtos em retrato e uma faixa de categorias; o rodapé abre com uma faixa de busca. O Vértice usa Cormorant em petróleo sobre branco: título centralizado, faixa de imagem, seis produtos em três colunas e dois blocos em petróleo.

Essas escolhas pertencem aos arquivos do tema e podem ser redesenhadas. Nenhuma delas cria um novo campo visual no manifesto ou uma configuração paralela.

Todos os oito temas incluem três depoimentos demonstrativos preenchidos na Home, com relatos e nomes fictícios em sections/testimonials.liquid. Os cards não mostram rótulos de exemplo nem avisos de substituição. Para trocar os relatos, edite o Liquid; para mudar o visual, edite assets/theme.css; para remover ou reordenar o bloco, altere templates/home.json. Não há leitura de avaliações ou compras cadastradas para esse conteúdo. A orientação ao cliente sobre a troca dos relatos ocorre fora da vitrine. Revisões publicadas recebem a alteração somente por uma nova revisão.

Os temas-base incluem a assinatura “Tecnologia LojaVirtual” no rodapé, com link para o site da plataforma. A imagem fica em assets/images/lojavirtual/ e o component components/footer.liquid a resolve por asset_url, inclusive na prévia. Aura, Lumen, Brisa e Vértice usam a versão para fundo claro; Fluxo, Nova, Cobalto e Pulso, cujo rodapé é escuro ou saturado, usam a versão para fundo preto. Ao redesenhar o rodapé, mantenha o contraste adequado e a proporção da imagem em assets/theme.css.

Essa assinatura é separada de shop.logo, que continua identificando o lojista. Lojas com revisões anteriores recebem esse rodapé somente ao publicar uma nova revisão com os arquivos atualizados.

Entregar imagens junto com um tema novo

Inclua as imagens editoriais finais utilizadas pelo layout em assets/images/ antes de entregar o tema. Banners devem combinar com sua direção visual, funcionar no recorte de celular e manter títulos e botões como HTML. Não deixe placeholders provisórios nem dependa de fotos do catálogo para a identidade do hero.

O Aura inclui uma fotografia de interior em tons naturais; o Lumen, uma composição minimalista de objetos; o Brisa, uma composição de couro e linho e uma fotografia de detalhes. Fluxo, Nova, Cobalto, Pulso e Vértice incluem composições abstratas geradas por script na paleta de cada tema. São imagens decorativas substituíveis, sem representar produtos à venda. Preserve fotos reais nos cards e o estado vazio quando faltar imagem comercial.

Siga os critérios de resolução, acessibilidade, otimização e validação da referência de estrutura. Escolha livremente os nomes e a quantidade de arquivos, sem adicionar um cadastro de imagens ao manifesto.