Personalização

Aparência da Loja

Aparência da Loja — Personalização Visual Configure tipografia, cores, layout e banners para garantir que a experiência do cliente seja consistente com a identidade da sua marca. O que este módulo faz? Este painel reúne os controles centrais para adaptar o visual do seu e-commerce sem precisar mexer em código. Aqui você define fontes, cores da marca, disposição da vitrine e gerencia os banners promocionais da página inicial. Nota: As alterações aqui são puramente estéticas. Elas atualizam o "tema" da loja imediatamente após salvar, sem afetar o funcionamento dos pedidos. 1 - Atenção e Regras - Contraste e Legibilidade: O painel oferece pré-visualização das cores. Evite combinações que dificultem a leitura (ex: texto amarelo em fundo branco). - Banners: Existe um limite de até 5 banners na home para não prejudicar a velocidade do site. Planeje bem seus destaques. - Selos de Rodapé: Ative apenas os selos de serviços que você realmente oferece (ex: Compra Segura, Entrega Rápida) para manter a transparência com o cliente. 2 - Passo a Passo Rápido 1. Tipografia: Defina a Fonte principal e a largura do conteúdo. Isso cria a base visual do site. 2. Banners: No painel "Banners da Home", adicione seus destaques. Envie as imagens, defina títulos e links, e arraste para organizar a ordem de exibição. 3. Vitrine: Ajuste quantas colunas de produtos aparecem (desktop/mobile) e a proporção das imagens (quadrada, retrato) para valorizar suas fotos. 4. Identidade (Cores): Altere as cores primárias e de botões. Use o preview para garantir que o contraste está acessível. 5. Publicar: Clique em Salvar Alterações. Abra sua loja em uma janela anônima para conferir o resultado final. 3 - Seções de Configuração - Controle Geral Fonte, densidade e largura do container. Define o "respiro" e a leitura do site. - Banners da Home Editor visual para montar o carrossel principal e banners secundários. - Vitrine de Produtos Personalize colunas, formato de imagem e texto do botão de compra ("Comprar", "Ver Mais"). - Cores e Selos Paleta global da marca e ativação de selos de confiança no rodapé. Dica: Faça alterações incrementais e valide sempre em dispositivos diferentes (celular e computador). Imagens muito pesadas ou cores sem contraste são os erros mais comuns.

Logo & Identidade

Logo & Identidade — Marca consistente Garanta que logotipo, favicon e imagens de compartilhamento estejam corretos para evitar problemas visuais em páginas, redes sociais e documentos. Para que serve este módulo? Este painel reúne tudo que define a identidade visual da sua loja: logotipo principal, favicon (ícone da aba), imagem para redes sociais (OpenGraph) e versões para impressão. Ajustar esses itens garante consistência em todos os canais de contato com o cliente. Nota: As mudanças afetam a apresentação imediata do site. Para redes sociais, pode ser necessário limpar o cache da plataforma (Facebook/Twitter) para ver a atualização. 1 - Atenção e Regras - Formatos: Use PNG transparente para o logotipo (melhor contraste) e 1200x628px para imagens de compartilhamento social. - Exclusão: Remover uma imagem apaga o arquivo do sistema. Tenha certeza de que possui um backup antes de excluir. - Impressão: Para recibos e ordens de serviço, prefira um logo com fundo branco e boa resolução, pois imagens transparentes podem falhar em impressoras térmicas. 2 - Passo a Passo Rápido 1. Acesso: Navegue até a seção Personalização → Logo & Identidade. 2. Identidade Principal: Faça upload do seu Logotipo e Favicon. O painel mostrará uma pré-visualização. 3. Redes Sociais: Na seção OpenGraph, envie a imagem padrão que aparecerá quando alguém compartilhar o link da sua loja no WhatsApp ou Facebook. 4. Documentos: Adicione a versão do logo para Recibos/Impressão se precisar de um fundo contrastante (branco). 5. Salvar: Clique em Salvar Alterações. Verifique o resultado abrindo sua loja em uma janela anônima. 3 - Seções de Configuração - Identidade Principal Onde você define a "cara" da loja: Logo do cabeçalho e Favicon (ícone da aba do navegador). - Redes Sociais (OpenGraph) Define a imagem de capa para compartilhamentos. Evita que o link fique sem imagem ou corte o logo errado. - Documentos e Impressão Logo específico para PDFs e impressões térmicas, onde o contraste e fundo branco são essenciais. - Ações Botões para Salvar e pré-visualizações que permitem excluir arquivos atuais se necessário. Dica: Mantenha os arquivos originais (SVG/PNG) salvos em um local seguro (drive/nuvem) para que você possa restaurar versões se necessário.

Banners — Destaques e Campanhas Visuais

Banners — Destaques e Campanhas Visuais Gerencie o conteúdo visual da home e áreas de destaque para chamar a atenção dos clientes para promoções e coleções. Para que serve este módulo? Os banners formam a vitrine da sua loja. Aqui você cria imagens ou blocos de texto que ocupam posições estratégicas (slide principal, topo, lateral) para comunicar novidades sem alterar o cadastro de produtos. Nota: As alterações são visuais e imediatas. Porém, se você usa sistemas de cache (CDN), pode haver um pequeno atraso na atualização para o cliente final. 1 - Atenção e Regras - Versões Mobile: Sempre que possível, envie imagens separadas para Desktop e Mobile. Isso evita que textos fiquem ilegíveis ou imagens cortadas em telas pequenas. - Agendamento: Configure as datas de início e fim corretamente. Banners expirados param de aparecer automaticamente, sem precisar excluí-los. - HTML no Texto: O editor aceita HTML para banners de texto, mas prefira estruturas simples para não quebrar o layout da página. 2 - Passo a Passo Rápido 1. Acesso: Vá em Personalização → Banners para ver a lista de ativos. 2. Criar/Editar: Clique em Novo Banner ou no ícone de editar. Defina um Título interno e o Link de destino (para onde o cliente vai ao clicar). 3. Tipo e Conteúdo: Escolha se será um banner de Imagem ou Texto. Se for imagem, faça o upload das versões Desktop e Mobile. 4. Posição: Selecione onde ele deve aparecer (Slide Principal, Vitrine, Topo, Lateral). 5. Publicar: Defina o período de exibição, marque como "Ativo" e clique em Salvar. Use a pré-visualização para conferir. 3 - Seções de Configuração - Tipo de Conteúdo Alterna entre banner visual (imagem) ou informativo (texto com fundo colorido). - Upload de Imagens Campos separados para Desktop e Mobile. Essencial para garantir a qualidade em todos os dispositivos. - Fundo e Estilo Para banners de texto, permite escolher cores sólidas ou gradientes. - Posições e Período Define o local de exibição na loja e a validade temporal da campanha. Dica: Posicione seus banners com estratégia. O excesso de destaques pode poluir a home e prejudicar a conversão. Mantenha as campanhas organizadas.

Códigos HTML/JS — Scripts e Estilos Personalizados

Códigos HTML/JS — Scripts e Estilos Personalizados Integre ferramentas de terceiros (como pixels e chats) ou aplique estilos CSS específicos sem precisar alterar os arquivos do tema. Para que serve este módulo? Muitas vezes é necessário inserir um "trecho de código" (script de analytics, pixel de conversão ou regra CSS) que não existe nativamente no tema. Ao centralizar esses trechos aqui, você mantém o controle sobre o que é injetado no site, onde é exibido (cabeçalho ou rodapé) e em quais páginas. Nota: Isso não altera o funcionamento de pedidos ou preços. As alterações são aplicadas imediatamente ao salvar (sujeito a cache do navegador). 1 - Atenção e Segurança - Estabilidade: Scripts JavaScript mal escritos podem quebrar o layout ou travar o carregamento do site. Revise a origem do código antes de ativar. - Dados Sensíveis: Evite inserir senhas ou credenciais de API diretamente no código HTML/JS, pois eles ficarão visíveis no código-fonte da página. - Emergência: Se algo falhar no site (tela branca, botão que não clica) após uma alteração, use o botão de "Desativar" neste módulo para desligar o código suspeito imediatamente. 2 - Passo a Passo Rápido 1. Identificação: No campo de descrição, coloque um nome claro (ex: "Google Analytics 4", "Pixel Facebook", "Correção CSS Menu"). 2. Conteúdo: Cole o código no editor. Lembre-se de incluir as tags

Páginas Extras

Páginas Extras — Conteúdo Institucional Crie e gerencie páginas informativas como “Sobre nós”, “Políticas” e tutoriais que aparecem no site e no rodapé. Para que serve este módulo? Use Páginas Extras para publicar conteúdo que não faz parte do catálogo de produtos. Páginas bem escritas ajudam o cliente a entender sua marca, aumentam a confiança na loja e melhoram sua presença nos mecanismos de busca (SEO). Exemplos de uso: Termos de Uso, Política de Trocas, Quem Somos, Tabela de Medidas. 1 - Atenção e Regras - Páginas do Sistema: Algumas páginas essenciais (ex: Regulamento) não podem ser desativadas ou reordenadas para garantir a conformidade da loja. - Slug (URL): O endereço da página é gerado automaticamente pelo título, mas você pode editar. Evite mudar o slug de páginas já divulgadas para não quebrar links. - Exclusão: Antes de excluir uma página, verifique se ela não está linkada em menus ou banners da loja. 2 - Passo a Passo Rápido 1. Acesso: Vá em Personalização → Páginas Extras para ver a lista atual. 2. Criar/Editar: Clique em Nova Página ou no ícone de editar em uma linha existente. 3. Identificação: Preencha o Título. O Slug será preenchido automaticamente (ex: /sobre-nos). 4. Conteúdo: Use o editor de texto para escrever, formatar, adicionar imagens e links. 5. Configurar e Salvar: Na lateral, defina se a página está Ativa, se deve Exibir no Rodapé e a ordem (Posição). Clique em Salvar. 3 - Seções do Formulário - Título e Slug Nome legível da página e o caminho da URL. O slug deve ser único e sem espaços (use hifens). - Conteúdo (Editor) Área de edição visual (WYSIWYG). Permite criar layouts simples com texto, negrito, listas e imagens. - SEO (Opcional) Meta Título e Meta Descrição. Preencher estes campos ajuda o Google a entender e exibir sua página nos resultados. - Exibição Controles para ativar a página, mostrar link automático no rodapé e definir a ordem de aparição (Posição). Dica: Para organizar os links no rodapé, use o campo "Posição". Números menores (1, 2, 3) aparecem primeiro.

Mensagens do Sistema

Mensagens do Sistema — Comunicação Automática Personalize os e-mails transacionais (como confirmação de pedido e recuperação de senha) para manter o tom de voz da sua marca. Para que serve este módulo? Este módulo centraliza os templates de e-mail que a loja envia automaticamente. Aqui você edita o assunto e o corpo da mensagem, garantindo consistência na comunicação sem depender de desenvolvedores. Nota: Templates vinculados a eventos (ex: Pedido Confirmado) são disparados automaticamente pelo sistema quando o evento ocorre. 1 - Atenção e Regras - Identificador Imutável: O campo Nome (Identificador) é apenas leitura. Ele conecta o template ao código do sistema e não pode ser alterado. - Impacto Imediato: Qualquer alteração salva no assunto ou conteúdo será refletida instantaneamente nos próximos e-mails enviados. - Variáveis: Cuidado ao editar os textos entre chaves (ex: {{ '{{nome}}' }}). Se você digitar o nome da variável errado, o dado não aparecerá no e-mail. 2 - Passo a Passo Rápido 1. Acesso: Vá em Personalização → Mensagens do Sistema para ver a lista de templates disponíveis. 2. Editar: Clique no ícone de edição (lápis) no template que deseja ajustar (ex: "Confirmação de Pedido"). 3. Conteúdo: Atualize o Assunto do e-mail e edite o Corpo da Mensagem usando o editor de texto rico (negrito, links, imagens). 4. Personalização: Use a barra lateral "Placeholders" para copiar e inserir variáveis dinâmicas (ex: Nome do Cliente, ID do Pedido) no meio do texto. 5. Salvar: Clique em Salvar. Recomenda-se fazer uma ação de teste (ex: simular uma compra) para ver como o e-mail chega na caixa de entrada. 3 - Seções do Formulário - Identificação O nome técnico do template (ex: order_confirmed). Serve para você saber a qual evento aquele e-mail pertence. - Assunto e Corpo O que o cliente vê na caixa de entrada e ao abrir o e-mail. Use uma linguagem clara e direta no primeiro parágrafo. - Placeholders (Variáveis) Lista lateral com códigos como {{ '{{pedido.id}}' }}. Ao enviar o e-mail, o sistema troca esse código pelo número real do pedido. - Status Alguns templates permitem desativação. Se desativado, o sistema deixa de enviar esse e-mail específico. Dica: Use o botão de "copiar" ao lado de cada placeholder para evitar erros de digitação ao inserir variáveis no texto.

Personalização do layout

Com o Código Personalizado você deixa a loja com a cara da sua marca: mudar a cor dos botões, arredondar os cards de produto, aumentar um título, esconder um bloco. Para isso, cada peça visual da loja (cabeçalho, menu, banner, card de produto, carrinho, rodapé) tem um nome fixo que você usa no seu CSS. Este artigo mostra onde cadastrar o código e lista esses nomes. Esses ajustes são só de aparência: eles não alteram preços, frete, estoque, cadastro de clientes nem o funcionamento dos pedidos. Antes de começar - É preciso conhecer o básico de CSS (ou contar com alguém que conheça). Se você só quer trocar cores e logo, use Loja Online → Aparência da Loja e Logo e Identidade: é mais simples e não exige código. - Nada é irreversível. Todo código cadastrado pode ser desativado, e a loja volta ao visual original na hora. - Prefira testar em horário de menor movimento e sempre conferir a loja no celular depois. Onde cadastrar o código 1. No painel, acesse Loja Online → Código Personalizado. 2. Clique para criar um novo código. 3. Descrição do Código: dê um nome claro, como "Tema — cards arredondados" ou "Cor do botão comprar". É por esse nome que você vai encontrar o código depois. 4. Tipo de Código: use CSS (Estilos) para aparência, JavaScript (Scripts) para comportamento e HTML Padrão para inserir um bloco de conteúdo ou um widget. 5. Local da Injeção: Cabeçalho (Head) para CSS e Rodapé (Body Footer) para JavaScript. 6. Página de Exibição: Todas as Páginas para um tema geral, ou uma página específica (Home, Checkout, Finalização). 7. Em Situação, deixe o código ativo e salve. 8. Abra a loja e atualize a página forçando a recarga (Ctrl+F5 no Windows, Cmd+Shift+R no Mac) para não ver a versão antiga guardada pelo navegador. Cinco regras que evitam a maioria dos problemas - CSS: cole apenas as regras, sem a tag <style>. O sistema já adiciona essa tag para você. - JavaScript: cole apenas o código, sem a tag <script>. A tag também é adicionada automaticamente. - HTML Padrão: aqui sim, use as tags completas, como você faria em uma página comum. - Se o seu script usa $ (jQuery), cadastre-o no Rodapé e envolva tudo em jQuery(function ($) { ... });. No cabeçalho o jQuery ainda pode não ter carregado, e o código falha. - A opção Renderizar isolado (iframe), disponível no tipo HTML, serve para widgets de terceiros (chat, avaliações, formulários). Conteúdo isolado não enxerga o restante da loja, então não use essa opção para mudar o visual: para isso, use os tipos CSS e JavaScript. Como funcionam os nomes dos elementos Todos os nomes que você vai usar começam com store-. Eles são estáveis: continuam valendo mesmo quando a loja recebe atualizações, então um tema criado hoje não deixa de funcionar na próxima versão. Um nome só existe quando o elemento realmente aparece na sua loja. Se o seu card de produto não mostra botão de compra, não existe botão para estilizar. Se a loja está configurada para esconder preços, não há preço na tela. Não achou o nome do elemento que quer mudar? Na loja, clique com o botão direito sobre ele e escolha Inspecionar (ou tecle F12). Na janela que abre, procure a classe que começa com store- — é ela que você usa no CSS. Mudar apenas uma página Mesmo cadastrando o código em "Todas as Páginas", você pode restringir o efeito a uma página específica usando data-store-page: .store-page[data-store-page="product"] .store-product__title { letter-spacing: -0.025em; } Página da lojaUse este valor Homehome Categoriacategory (ou category-simple, no modelo alternativo) Lista de produtosproducts Página do produtoproduct Carrinhocart Checkoutcheckout Conta do clienteconta-perfil e conta-pedidos ## Mudar apenas uma vitrine de produtos As faixas de produtos da loja usam .store-section com data-store-section. Os valores disponíveis são destaques, mais-vendidos, novidades, promocoes, relacionados, compre-junto e compre-junto-carrinho. O título de cada faixa é .store-section__title. .store-section[data-store-section="destaques"] .store-section__title { color: #5b21b6; } Lista de nomes por área da loja ÁreaNomes disponíveis Estrutura da página.store-page, .store-main, .store-heading Cabeçalho.store-header, .store-header__logo, .store-header__search-input, .store-header__account, .store-header__favorites, .store-header__cart Menu.store-menu__link, .store-menu__item, .store-menu__toggle Rodapé.store-footer, .store-footer__institutional-link, .store-footer__institutional-item Banner.store-banner, .store-banner__image, .store-banner__link, .store-banner__control Carrossel.store-carousel, .store-carousel__track, .store-carousel__slide Card de produto.store-product-card, .store-product-card__image, .store-product-card__name, .store-product-card__category, .store-product-card__badge Preço e botões do card.store-product-card__price, .store-product-card__price-old, .store-product-card__price-label, .store-product-card__unit, .store-product-card__buy, .store-product-card__buy-label, .store-product-card__whatsapp, .store-product-card__reviews Página do produto.store-product__title, .store-product__image, .store-product__gallery-image, .store-product__quantity, .store-product__total Formulários.store-form, .store-field, .store-field__label, .store-field__control, .store-field__required, .store-field__error Opções de frete.store-shipping__option, .store-shipping__name, .store-shipping__price, .store-shipping__deadline Avisos e mensagens.store-notification, .store-notification__title, .store-notification__message, .store-notification__close Paginação.store-pagination, .store-pagination__link Outros blocos.store-breadcrumb (caminho de navegação), .store-empty (lista vazia), .store-modal (janelas) ## Exemplo de tema pronto para copiar Cadastre como CSS (Estilos), no Cabeçalho (Head), em Todas as Páginas. Troque a cor #5b21b6 pela cor da sua marca: .store-product-card { border-radius: 16px; box-shadow: 0 4px 18px rgb(0 0 0 / 8%); } .store-product-card__name { color: #5b21b6; } .store-product-card__buy { background-color: #5b21b6; border-radius: 999px; } .store-section[data-store-section="destaques"] .store-section__title { color: #5b21b6; } @media (max-width: 767px) { .store-product-card__name { font-size: 0.875rem; } } Exemplo com JavaScript Partes da loja são carregadas depois que a página abre (vitrines, opções de frete, menus). Por isso, escreva o JavaScript "escutando" o documento inteiro, como no exemplo abaixo — assim o efeito também alcança os produtos que aparecem depois. Cadastre como JavaScript (Scripts), no Rodapé (Body Footer), em Todas as Páginas: jQuery(function ($) { $(document) .off('mouseenter.meuTema mouseleave.meuTema', '.store-product-card') .on('mouseenter.meuTema', '.store-product-card', function () { $(this).addClass('meu-tema-card-ativo'); }) .on('mouseleave.meuTema', '.store-product-card', function () { $(this).removeClass('meu-tema-card-ativo'); }); }); Esse código apenas marca o card quando o mouse passa por cima; o botão de compra continua funcionando normalmente. Depois é só estilizar .store-product-card.meu-tema-card-ativo no seu CSS. Ajustar um bloco específico Além dos nomes gerais, alguns elementos têm nomes mais específicos, terminados em número, como .store-header__group-01, .store-cart__button-01 e .store-product__title-01. Use-os quando quiser mexer em um bloco isolado, sem afetar os demais. Duas observações: o número no fim não indica posição na tela, é apenas parte do nome; e o mesmo nome pode se repetir quando o bloco aparece várias vezes, como em uma lista de produtos. Para um tema completo, prefira os nomes gerais. Guarde os nomes com número para os retoques pontuais. O que o Código Personalizado não faz - Não transforma valores calculados em campos editáveis. O CSS muda a aparência do preço, mas não o preço. - Não substitui a configuração da loja: regras de exibição, formas de pagamento e frete continuam valendo como estão cadastradas. - Alguns estilos da loja têm prioridade sobre o seu CSS. Quando existir a opção correspondente em Aparência da Loja, use a opção — o resultado é mais previsível. - Evite reescrever o HTML de formulários e mover campos de lugar pelo JavaScript: isso pode quebrar o cadastro, o carrinho e o checkout. - O painel administrativo não é afetado por esses códigos — eles valem apenas para a loja. - Blocos vindos de terceiros dentro de um iframe (chat, avaliações) só permitem os ajustes que o próprio fornecedor libera. - Arquivos como PDF e relatórios não são páginas da loja e não recebem personalização. Confira antes de deixar no ar Depois de aplicar um tema, dê uma volta pela loja no computador e no celular: - Home, categoria, página do produto, carrinho, checkout e área do cliente. - Navegando deslogado e logado como cliente. - Uma categoria sem produtos e uma busca sem resultado (para ver as listas vazias). - Cálculo de frete, abertura do menu e janelas de aviso, que aparecem só depois de alguma ação. - Faça um pedido de teste do início ao fim. Se algo sair errado Volte em Loja Online → Código Personalizado, encontre o código pela descrição e mude a Situação para inativo. A loja volta ao visual anterior imediatamente — basta atualizar a página com Ctrl+F5. Se você tem vários códigos ativos, desative um de cada vez para descobrir qual causou o problema.