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.