Como editar o CSS na Loja Integrada?

Como editar o CSS loja integrada?
Como editar o CSS loja integrada?

Personalizar o visual da sua loja virtual é um passo importante para reforçar a identidade da sua marca e melhorar a experiência do cliente. Quando falamos de plataformas como a Loja Integrada, um dos recursos mais buscados por lojistas é a possibilidade de alterar cores, fontes, espaçamentos e outros detalhes visuais diretamente no código. Neste guia, você vai aprender como editar o CSS dos temas Loja Integrada de forma prática, utilizando as ferramentas disponíveis no painel da plataforma. Ao final, sua loja poderá refletir exatamente o estilo e a proposta da sua marca — tudo isso dentro da estrutura oferecida pela Loja Integrada.

Índice:

1. Pré-requisitos – planos e níveis de acesso

  • Edição de CSS está disponível apenas em planos pagos da plataforma.
  • A Loja Integrada não oferece suporte direto a códigos CSS.
  • Recomenda-se contratar um profissional ou agência parceira se você não tem conhecimento técnico.

2. Como acessar o editor de CSS

  1. No painel da loja, vá em: Aparência → Editar CSS.
  2. Será exibida uma caixa para inserir seus códigos CSS personalizados.
  3. Use a seção Documentação para consultar as classes e IDs do tema atual.

3. Tempo de atualização

As alterações feitas no CSS podem levar entre 15 a 30 minutos para serem refletidas na loja, por causa do cache.

4. O que você pode alterar

Você pode customizar diversos elementos da loja, como:

  • Cores de textos, títulos e botões
  • Planos de fundo (background)
  • Espaçamento, tamanhos de fonte e bordas
  • Estilos responsivos com media queries

@media screen and (max-width: 767px) {
  .promotitle {
    line-height: 20px;
    font-size: 14px;
  }
}

5. Boas práticas e dicas importantes

  • Use a Documentação para encontrar os seletores corretos.
  • Evite o uso excessivo de !important.
  • Insira somente o CSS que será sobreposto ao tema, sem editar arquivos originais.

6. Exemplo de fluxo de edição

  1. Acesse Aparência → Editar CSS.
  2. Consulte a documentação e identifique classes como .produto-titulo ou #rodape.
  3. Adicione seu código CSS:

/* Deixa o fundo do rodapé branco */
#rodape {
  background-color: #fff;
}

/* Reduz espaço entre categoria e botões no mobile */
@media (max-width: 767px) {
  .categoria-lista { margin-bottom: 10px; }
}
  1. Clique em Salvar alterações.
  2. Aguarde cerca de 20 minutos e recarregue a loja.

7. Resumo das etapas

Etapa O que fazer
1. Plano pago Certifique-se que seu plano permite acesso ao CSS
2. Acessar Vá em Aparência → Editar CSS
3. Documentação Consulte IDs e classes específicas do tema
4. Escrever código Insira apenas o CSS que irá sobrepor o tema
5. Salvar e aguardar Alterações aparecem após ~15–30 min

Dica extra da comunidade

Para incluir scripts HTML ou JS (como WhatsApp flutuante, banners ou contadores), use a área: Configurações → Incluir código HTML.

Conclusão

A personalização via CSS na Loja Integrada oferece grande flexibilidade para adaptar o visual ao seu branding. Lembre-se:

  • O recurso está disponível apenas em planos pagos.
  • Você está sobrepondo o CSS, não editando diretamente o tema.
  • Use a documentação da plataforma para identificar os seletores corretos.
  • Considere contratar ajuda especializada, se necessário.