Tema e personalização

Use a aba Tema para deixar a loja com a identidade visual da sua marca. Aqui você define layout, paleta de cores, tipografia e CSS avançado.

Como acessar

1. No menu lateral, clique em Vendas.
2. Expanda Loja Virtual.
3. Clique em Lojas.
4. Selecione a loja desejada na listagem.
5. Abra a aba Tema.

Layout

Define o estilo visual geral da loja.

Opção	Descrição
Padrão	Layout equilibrado para a maioria dos segmentos.
Moderno	Visual contemporâneo com mais espaço e destaque para imagens.
Mínimo	Layout limpo e direto, sem elementos decorativos.
Personalizado	Quando combinado com CSS personalizado, permite controle total.

Cores

A paleta de cores define as cores usadas em toda a loja. Cada cor tem uma função específica.

Cor	Onde é usada	Padrão
Cor Primária	Botões, links e destaques principais.	#1976d2
Cor Secundária	Elementos de apoio à primária.	#9c27b0
Cor de Destaque	Badges de promoção, etiquetas e alertas.	#ff9800
Cor de Fundo	Fundo geral da loja.	#ffffff
Cor do Texto	Corpo dos textos e parágrafos.	#111111

Ao alterar as cores, uma pré-visualização aparece abaixo da paleta mostrando como ficam botões, textos e badges com as cores escolhidas.

Dicas de cores

• Mantenha contraste entre fundo e texto para garantir legibilidade.
• Use a cor de destaque com moderação — ela chama atenção para promoções e badges.
• Teste as cores em dispositivos diferentes — uma cor pode parecer diferente no celular.

Fontes

Configure as fontes usadas na loja.

Campo	O que faz
Fonte Principal	Fonte dos textos gerais (descrições, preços, corpo).
Fonte dos Títulos	Fonte dos títulos e cabeçalhos.

O sistema oferece uma lista de fontes disponíveis. Fontes diferentes para título e corpo ajudam a criar hierarquia visual.

CSS personalizado

Para personalizações avançadas que não são possíveis pelas opções de tema, use o campo CSS Customizado.

O CSS informado é injetado na loja e tem prioridade sobre os estilos padrão.

Quando usar

• Ajustar tamanhos específicos de elementos.
• Alterar espaçamentos que o tema não cobre.
• Esconder elementos que não fazem sentido para a sua operação.
• Aplicar estilos para datas comemorativas ou campanhas.

Cuidados

• CSS mal escrito pode quebrar a aparência da loja. Teste sempre depois de salvar.
• Evite !important desnecessário — preferir seletores mais específicos.
• CSS personalizado é mantido mesmo ao trocar de preset/template.

Dica importante

Use o painel de Preview (lateral direita) para acompanhar em tempo real como as alterações de tema ficam na loja. Depois de salvar, abra a loja em uma nova aba para conferir o resultado final.