Geral, layouts e temas da loja

A área Configurações › Geral e tema permite gerenciar e personalizar visualmente toda a loja virtual da sua gráfica, seguindo os padrões completos de personalização consagrados na versão 3 (Codegraf v3).

No painel administrativo, acesse pelo menu lateral em Configurações › Geral e tema (/configuracoes).

1. Visão geral da área

A tela é organizada em quatro seções principais:

Seção	O que você configura
Layout & Temas	Visualização do tema ativo, edição de tokens de cor, catálogo de modelos disponíveis e ativação de layouts com 1 clique
Logotipo & Identidade	Imagem do logotipo (com teste de contraste em fundo claro e escuro), nome da loja e título de SEO
Contato & Localização	Telefones de atendimento, WhatsApp com link direto, e-mail de pedidos e endereço físico do balcão
Opções Comerciais	Editor de código CSS personalizado (com sanitização automática) e opção White Label para remover a marca da plataforma

No topo da página, você conta com o botão Visualizar Loja, que abre sua loja virtual em uma nova aba para conferir o resultado das alterações em tempo real.

2. Layout ativo e personalização de cores

No topo da aba Layout & Temas, o bloco Layout Atual exibe:

a miniatura e o nome do modelo ativo no momento (ex.: Modelo 1 - Shopdeal);
o selo Ativo na Loja;
o painel de personalização dos tokens de cor.

Tokens de cores disponíveis

Você pode ajustar cada cor utilizando o seletor visual (color picker) ou digitando diretamente o código hexadecimal (#HEX):

Token	Onde é aplicado na loja	Exemplo padrão (Modelo 1)
Cor Primária	Botões principais de compra, links em destaque, badges promocionais e títulos	`#e11d48` (Carmim)
Cor Secundária	Botão “Todas as Categorias”, tags especiais e elementos de contraste	`#f59e0b` (Âmbar)
Fundo da Barra de Menus	Barra horizontal de navegação principal	`#e11d48`
Texto da Barra de Menus	Links e textos da barra de menus	`#ffffff`
Fundo da Barra Superior	Barra superior informativa (horários e telefone)	`#ffffff`
Fundo do Rodapé	Rodapé da loja (Dark Footer de alta legibilidade)	`#0f172a`

Paletas rápidas sugeridas

Ao lado da pré-visualização, você encontra botões de paletas rápidas que aplicam combinações harmônicas com apenas um clique:

Shopdeal Carmim & Ouro (padrão de alto impacto do Modelo 1);
Grafexa Indigo & Ciano (moderno e tecnológico);
Codegraf Azul Clássico (azul corporativo com contrastes neutros);
Esmeralda & Menta (ideal para gráficas com apelo ecológico);
Âmbar & Café (tons quentes para comunicação vibrante).

Estilo do slide da home

Assim como no Codegraf v3, você pode escolher o formato do banner principal da página inicial:

Slide Responsivo (Largura Total): ocupa toda a largura da coluna de conteúdo com transição fluida;
Slide Compacto (Em Bloco): banner em proporção compacta alinhado ao lado da barra lateral.

Após realizar os ajustes, clique em Gravar Modificações de Cor. As mudanças são salvas no banco de dados e refletidas na loja.

3. Catálogo de layouts disponíveis

Na seção Suas Opções de Layout, a plataforma disponibiliza modelos prontos desenvolvidos especificamente para gráficas online e serviços Web-to-Print:

Modelo 1 (Shopdeal) — Recomendado

O Modelo 1 é o layout completo com foco em conversão e catálogo amplo, inspirado no anexo da v3:

Barra Superior (Top Bar): horário de atendimento, telefone e links rápidos de apoio;
Cabeçalho: logotipo em destaque, campo de busca com seletor de categorias, atendimento telefônico e widget de carrinho com subtotal;
Barra de Navegação: botão de destaque “Todas as Categorias” com menu suspenso, links para produtos e chamadas rápidas;
Barra Lateral Esquerda (Sidebar):
- menu vertical estruturado de categorias de impressos;
- vitrine de Mais Vendidos com avaliação em estrelas e preços a partir de;
- caixa de Depoimento de Cliente com foto e nota;
- banner lateral chamativo de Produção Express 24h;
- caixa de captura de e-mails (visual — os e-mails digitados ainda não são guardados);
Coluna Principal:
- hero banner de alto impacto comunicando a análise técnica automática dos arquivos;
- faixa promocional com código de cupom de primeira compra;
- vitrine de Produtos em Destaque com cartões detalhados de tiragem, prazo e acabamentos;
- trio de banners para linhas de produtos (Cartões Premium, Panfletos em Lote, Comunicação Visual);
- faixa de Garantias & Benefícios (Conferência por IA, Balcões de Retirada, Pagamento Seguro);
- seção educativa Dicas & Blog Gráfico para orientar clientes sobre fechamento de PDF e sangria;
Rodapé Completo: colunas de loja, conta e atendimento, com as formas de pagamento realmente ativas e os links de termos, privacidade e páginas publicadas. Telefone, e-mail, endereço e horário só aparecem se você os preencheu — a plataforma não preenche contatos de exemplo.

Modelo 2 (Clean Minimal)

Design enxuto voltado para gráficas com catálogo focado, priorizando navegação limpa e compra ágil.

Temas Clássicos Codegraf ONE (Azul, Laranja, Verde, Vermelho)

Modelos inspirados no layout clássico Codegraf One com barras superiores coloridas e visual sólido.

Como ativar um modelo

Localize o cartão do layout desejado no catálogo.
Clique no botão Ativar este Layout.
A plataforma desativa o tema anterior, ativa o novo e invalida os caches automaticamente.
A mensagem de confirmação será exibida e o tema já estará ativo na loja virtual.

4. Logotipo e identidade visual

Na aba Logotipo & Identidade:

URL do Logotipo: informe o caminho ou link direto da imagem do logotipo.
Visualização em fundos claro e escuro: confira se o logotipo possui contraste adequado tanto no cabeçalho branco quanto em fundos escuros.
Recomendações técnicas:
- formato: PNG com fundo transparente;
- largura: entre 200px e 350px;
- altura: entre 40px e 80px;
- peso: preferencialmente abaixo de 100 KB para carregamento veloz.
Nome da Loja e Título de SEO: configure o nome da sua gráfica e a frase descritiva que aparece na aba do navegador e nos resultados de busca do Google.

5. Informações de contato e atendimento

Na aba Contato & Localização:

Telefone: número fixo de atendimento exibido no topo e rodapé;
WhatsApp de Atendimento: número que recebe mensagens diretas dos botões da loja (e do botão flutuante);
E-mail de Contato: endereço para onde notificações e dúvidas de clientes são direcionadas;
Endereço da Gráfica / Balcão: endereço completo do ponto de retirada principal;
Horário de atendimento: texto livre exibido no rodapé e na página de contato;
CEP de origem (cálculo de frete): CEP de onde os pedidos saem. É a origem usada nas cotações de Correios e transportadoras no carrinho e no checkout — sem ele, a loja usa o CEP padrão da plataforma e os valores podem ficar errados.

6. Opções comerciais adicionais

Seguindo o modelo de negócios do Codegraf v3, a plataforma oferece recursos adicionais para personalização avançada:

Edição de código CSS do template

Para clientes que desejam ajustes finos de tipografia, espaçamentos ou cores específicas:

Acesse a aba Opções Comerciais.
Certifique-se de que a opção Habilitar Editor está marcada.
Insira suas regras de CSS na caixa de código.
Clique em Salvar Código CSS.

Remoção da marca da plataforma (White Label)

O recurso White Label remove qualquer menção à plataforma Grafexa no rodapé da loja virtual:

quando ativado, o rodapé exibe exclusivamente a razão social e os direitos reservados da sua gráfica (© 2026 Nome da sua Loja);
a menção “Tecnologia de loja virtual fornecida por Grafexa” é ocultada.

Para utilizar, marque a caixa Marca Oculta (White Label Ativo) e clique em Salvar Preferência White Label.

7. Como as alterações refletem na loja virtual

As alterações de layout e cores utilizam variáveis CSS (CSS Custom Properties) injetadas dinamicamente no <head> do storefront:

:root {
  --color-primary: #e11d48;
  --color-secondary: #f59e0b;
  --color-nav-bg: #e11d48;
  --color-nav-text: #ffffff;
  --color-topbar-bg: #ffffff;
  --color-footer-bg: #0f172a;
  --theme-radius: 0.5rem;
}

Isso garante que:

a troca de cores seja instantânea para os visitantes da loja;
não seja necessário recompilar a aplicação Next.js a cada modificação;
todos os componentes da loja (botões, badges, cabeçalho, rodapé e vitrines) adaptem-se uniformemente ao tema selecionado.

8. Registro de auditoria

Toda alteração de layout, troca de cores, edição de CSS ou ativação de White Label é registrada no módulo de Logs e Auditoria com o identificador do administrador responsável, data, hora e os valores anteriores e atuais.