# Editar tema

Descubra como transformar a aparência da sua loja virtual instalando um de nossos temas exclusivos. 

Seja para modernizar sua loja com o Tema [Cyber](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/cyber), adicionar um toque futurista com o Tema [Matrix](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/matrix), ou celebrar eventos especiais com o Tema [Black Friday](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/black-friday), temos uma variedade de estilos prontos para atender às suas necessidades. 

Outras opções incluem o elegante Tema [Sense](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/sense), o inovador Tema [Griff](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/griff), o natural Tema [Duna](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/instalando-temas/duna) e o inspirador Tema [Zion](/inicio/minha-loja/monetizze.md).

Acompanhe nosso guia detalhado para aprender a selecionar, editar e salvar o tema perfeito para a sua loja virtual:

### **Editando seus temas**

Nossa plataforma oferece opções interessantes capazes de facilitar o seu trabalho de personalização e edição do tema. 

Veja a seguir algumas das alternativas disponíveis:

* **Personalizar:** essa opção foi criada utilizando variáveis globais, ou seja, editando esses campos eles serão alterados automaticamente em sua loja, sem a necessidade de manipulação de código;
* **Editar código (CMS):** essa opção está disponível para todos os planos exceto para o Starter, ela permite maior liberdade na manipulação de toda estrutura da loja, código HTML e CSS da loja;
* **Duplicar:** esse recurso permite que você duplique o tema atual da loja e realize os ajustes necessários, sem interferir na sua loja caso ela já tenha sido publicada;
* **Download do código**: com essa opção você poderá realizar o download de todo o seu código;
* **Importar código:** com essa opção possível subir um arquivo de tema utilizando o seu código.

### **Acessando os temas**

Para iniciar a edição de um tema, o primeiro passo consiste em acessá-lo. 

Siga as instruções a seguir:

1- Com o Painel administrativo aberto, clique na opção **Personalização** >> **Meus temas.**

<figure><img src="/files/vOTucdjAU2TxOgfNZowl" alt=""><figcaption></figcaption></figure>

2- Na tela **Meus temas** você terá as opções informadas no início do tutorial:

* **Personalizar;**
* **Editar código (CMS);**
* **Duplicar;**
* **Download do código.**

<figure><img src="/files/CMtfGee0ZZCe6TH8ljFZ" alt=""><figcaption></figcaption></figure>

### **Personalizar**

1- Nessa parte você irá conseguir realizar a personalização de toda a sua loja, dentre elas alteração das cores dos botões, cor do cabeçalho, tamanho da logo, tipo de cabeçalho, grade de produtos, redes sociais, cor do rodapé, título das colunas de páginas informativas.

**Aviso:** essas opções podem variar conforme o tema utilizado. Caso você acesse a página de personalização e não apareça nenhuma opção, significa que seu tema está antigo e desatualizado.

<figure><img src="/files/Tf8PmP8dxEQ53NDAk87u" alt=""><figcaption></figcaption></figure>

&#x20;2- Para personalizar seu tema, clique no botão **Personalizar.**

Na opção **Personalizar**, você poderá editar os seguintes campos:&#x20;

* **Botões;**
* **Cabeçalho;**
* **Configurações de tema;**
* **Grade de produtos;**
* **Redes sociais;**
* **Rodapé.**

\
&#x20;Todos esses campos serão melhores detalhados abaixo.

<figure><img src="/files/kv48Hut8odWJQeI1Gusc" alt=""><figcaption></figcaption></figure>

**Aviso**: **essas opções podem variar conforme o tema utilizado.** Caso você acesse a página de personalização e não apareça nenhuma opção, significa que seu tema está antigo e desatualizado.

### **Botões**&#x20;

**Botões**: esse campo irá alterar as cores dos botões, cada opção terá o título e a descrição na lateral direita para facilitar a sua compreensão:

1- Para personalizar a cor dos botões, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar. Ou utilizar o seletor de cor disponível.

![](/files/bBLCaIdRGt6MK11bs0uA)

### **Cabeçalho**

**Cabeçalho:** além da alteração de cores, essa opção irá lhe permitir a alteração da altura da logo em pixel, permitir cabeçalho suspenso, se ele poderá ser exibido em suas landing pages e se deseja que a logo seja apresentada na lateral esquerda ou centralizada.

\
1- **Para personalizar os campos de cores**, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar, ou utilizar o seletor de cor disponível.&#x20;

<figure><img src="/files/CiqEJxMTJynpmEYLSlst" alt=""><figcaption></figcaption></figure>

2- **Tamanho da Logo:** você irá definir a altura da imagem em pixel.

3- **Limite de categorias:** limita a quantidade de categorias exibida no menu.&#x20;

<figure><img src="/files/UrqLtO72RXeTzw0e2Ofu" alt=""><figcaption></figcaption></figure>

**4- Exibição em Landing Pages:** ppção para mostrar ou esconder o cabeçalho nas landing pages.

**5- Cabeçalho Flutuante:** mantém o cabeçalho visível e flutuante ao rolar a página.

**6- Posicionamento Central da Logo:** coloca a logomarca no centro do cabeçalho.

<figure><img src="/files/jWWbpCF7lpoprx54g8pV" alt=""><figcaption></figcaption></figure>

**7- Animação do Menu:** introduz animações ao revelar os itens do menu.

**8- Menu Expandido:** mostra o menu em sua forma expandida por padrão.

**9- Cabeçalho Transparente:** faz com que o cabeçalho tenha fundo transparente, permitindo que o banner abaixo seja visível.

<figure><img src="/files/86VhXOTZULWAVTNKSLIY" alt=""><figcaption></figcaption></figure>

### **Configurações do tema**

**Configurações do tema:** aqui você poderá definir a cor de fundo da loja, cor do texto, contador regressivo, estoque baixo, intervalo entre alerta e pop-up, fonte do texto e a URL da fonte.

<figure><img src="/files/mkAss4ilVNaMKFJ1GsUA" alt=""><figcaption></figcaption></figure>

1- **Para personalizar os campos de cores**, basta colar o hexadecimal no campo correspondente a opção que você deseja alterar, ou utilizar o seletor de cor disponível.

<figure><img src="/files/PlS8bnvM01gHZpNSpeKA" alt=""><figcaption></figcaption></figure>

2- **Contador Regressivo no Carrinho:** defina um tempo em minutos para ativar o contador regressivo na página do carrinho, incentivando a conclusão rápida da compra.

3- **Aviso de Estoque Baixo:** configure um valor para quando o estoque estiver baixo, que será destacado no contador regressivo, alertando sobre a limitação do produto disponível.

4- **Intervalo de Alertas:** especifique um período em dias para a rotação de banners de alerta na sua loja virtual, como notificações de conformidade com a LGPD ou outras promoções.

<figure><img src="/files/kzHbOaqyu3TTvVvIaaIL" alt=""><figcaption></figcaption></figure>

5- **Intervalo dos pop-ups:** defina um intervalo, em dias, para a aparição de banners pop-up na sua loja, como o convite para inscrição em newsletter.

6- **Oferta especial - valor:** ative ofertas especiais que se tornam disponíveis quando o valor total no carrinho atinge um montante pré-determinado.

7- **Texto do contador regressivo da página do carrinho:** personalize o texto que acompanha o contador regressivo na página do carrinho, orientando os clientes sobre o tempo restante para finalizar a compra.

<figure><img src="/files/5AcjTQB6UbKb640rZoDl" alt=""><figcaption></figcaption></figure>

8- **Fonte do Texto:** selecione a família de fontes para os textos da sua loja virtual a partir das opções disponíveis em [Google Fonts](https://fonts.google.com/).

9- **URL da fonte:** insira a URL correspondente à fonte escolhida, também disponível em [Google Fonts](https://fonts.google.com/), para integrá-la aos textos da loja.

10- **Oferta especial - Texto: d**efina o texto que detalha os benefícios da oferta especial, ativada ao se alcançar o valor de compra especificado, incentivando os clientes a aumentarem seus pedidos.

<figure><img src="/files/cXvta7qqJcJVJ8L7RXSS" alt=""><figcaption></figcaption></figure>

11- **Carrinho lateral:** escolha entre ter o carrinho de compras exibido lateralmente (ativo) ou de forma suspensa (inativo), ajustando assim a navegação dos usuários em sua loja.

12- **Campo de consulta de CEP do carrinho lateral:** decida se um campo para consulta de CEP deve ser mostrado no carrinho lateral, facilitando para os clientes a estimativa de frete sem avançar no processo de checkout.

13- **Comentários de clientes abertos:** ative para mostrar os comentários dos clientes de maneira aberta nas páginas de produtos, enriquecendo a experiência de compra com feedbacks reais.

<figure><img src="/files/2nGaFDsYqcmdYccXTmqF" alt=""><figcaption></figcaption></figure>

14- **Descrição da página:** ative para mostrar descrições detalhadas nas páginas, landing pages e artigos da loja, enriquecendo o conteúdo para os visitantes.

15- **Títulos de Vitrines:** permite a exibição dos nomes das vitrines como título, facilitando a identificação das diferentes seções da loja pelos clientes.

16- **Exibir automaticamente carrinho lateral:** configura o carrinho lateral para aparecer automaticamente sempre que um produto é adicionado ao carrinho, melhorando a experiência de compra e incentivando o fechamento do pedido.

<figure><img src="/files/DnA6imEO3xpwKclNk7GX" alt=""><figcaption></figcaption></figure>

#### **Grade de produtos**

**Grade de produtos:** nesta seção, você tem a liberdade de ajustar as cores da grade de produtos, escolher entre exibir o botão Comprar ou Veja Mais, além de definir a quantidade de colunas visíveis no modo mobile.

<figure><img src="/files/LV4BgqVAbGn5uzMXJCSG" alt=""><figcaption></figcaption></figure>

1- **Cores:** Para modificar as cores, insira o código hexadecimal desejado no campo correspondente ou selecione a cor através do seletor disponível.

<figure><img src="/files/2yNOc0cUSpQLvPjluR0t" alt=""><figcaption></figcaption></figure>

2- **Texto tag Entrega imediata:** defina o texto que será exibido na tag de produtos com entrega imediata.

3- **Texto tag exclusividade:** especifique o texto para produtos exclusivos na tag correspondente.

4- **Texto tag frete grátis:** personalize o texto da tag para produtos que oferecem frete grátis.

<figure><img src="/files/pxn4OMntsYkyuBQq33VZ" alt=""><figcaption></figcaption></figure>

5- **Texto tag lançamento:** escolha o texto para destacar novos produtos com a tag de lançamento.

6- **Texto tag oferta:** defina o texto para produtos em promoção na tag de oferta.

7- **Atributos card: o**pção para mostrar atributos dos produtos, como cores e tamanhos, de forma visual nos cards.

<figure><img src="/files/zrvSEAOJ78NTBxvFU0ci" alt=""><figcaption></figcaption></figure>

8- **Botão Comprar:** decida se o botão **Comprar** aparecerá diretamente na grade de produtos, facilitando a ação imediata de compra.

9- **Botão veja mais:** alterne a funcionalidade deste botão para exibir mais detalhes do produto.

10- **Duas Colunas (Mobile):** ajuste a grade para mostrar dois produtos por linha em visualização móvel, melhorando a experiência de navegação.

11- **Exibe informações de pagamento nos cards de produtos:** ative a exibição de informações de pagamento diretamente nos cards de produtos, fornecendo detalhes úteis aos clientes.

<figure><img src="/files/bstzNM8WemSOGNLuDCW0" alt=""><figcaption></figcaption></figure>

#### **Redes sociais**

**Redes sociais:** neste espaço, insira as URLs das suas Redes Sociais para vinculá-las à sua loja virtual.&#x20;

Se não utilizar alguma rede específica, simplesmente deixe o respectivo campo em branco.

<figure><img src="/files/nxKreBXl2kB9aW7FYpGt" alt=""><figcaption></figcaption></figure>

#### **Rodapé**

**Rodapé:** nesta seção, você tem a liberdade de personalizar as cores do rodapé, ajustar os textos exibidos e decidir se o rodapé aparecerá em suas Landing Pages.

<figure><img src="/files/cPAAczdeqPlqFU3bjlC4" alt=""><figcaption></figcaption></figure>

1- **Cores:** altere as cores inserindo o código hexadecimal no campo apropriado ou escolhendo através do seletor de cor.

<figure><img src="/files/0Y4IL5OhJkR5lIxBeDP0" alt=""><figcaption></figcaption></figure>

2- **Texto - Coluna A, B, C:** defina os títulos para cada uma das colunas do rodapé.

<figure><img src="/files/JQYVFbkq7q8BU22Mm5JX" alt=""><figcaption></figcaption></figure>

3- **Texto - Botão Newsletter:** especifique a chamada para ação do botão de inscrição na newsletter.

4- **Texto Informativo - Newsletter:** redija o texto que acompanhará o campo de inscrição da newsletter.

5- **Título - Newsletter:** determine o título do bloco de newsletter.

<figure><img src="/files/xMuFPvWPkrgn30Bt58gl" alt=""><figcaption></figcaption></figure>

6- **Exibir em Landing Pages:** você tem a opção de configurar a exibição do rodapé em suas landing pages, tornando-o visível ou mantendo-o oculto conforme sua preferência.

**Importante:** Lembre-se de clicar em "Salvar alterações" após realizar todas as modificações desejadas para garantir que suas atualizações sejam aplicadas corretamente.

<figure><img src="/files/mlVTLA5SIk9aLkW8CEDM" alt=""><figcaption></figcaption></figure>

7- Por fim, após realizar todas suas configurações, basta clicar no botão **Salvar Alterações.**

<figure><img src="/files/mvM7sMOOkrCsM3w8MGi3" alt=""><figcaption></figcaption></figure>

### **Editar código (CMS)**

O CMS (Sistema de Gerenciamento de Conteúdo) é uma poderosa ferramenta disponível na Plataforma iSET, projetada para oferecer total controle sobre a edição, personalização e gerenciamento do catálogo da sua loja virtual. Com ele, você ganha a liberdade de moldar a estrutura visual da sua loja de acordo com as suas preferências.

Utilizando o CMS, você terá acesso aos arquivos da sua loja virtual, permitindo a edição de códigos utilizando HTML, CSS e Javascript. Além disso, dispõe de uma extensa sintaxe lógica com centenas de funções programáveis para uma customização avançada, possibilitando alterações profundas nos elementos e páginas do seu catálogo.

**Importante:** Antes de começar a explorar todas as possibilidades que o CMS oferece, recomendamos a leitura atenta dos nossos [Termos de Uso](https://www.iset.com.br/contrato/cms.html) para entender as diretrizes que orientam o uso dessa ferramenta e sua relação com a plataforma e sua loja.

1- Para ter acesso aos códigos estruturais de sua loja, com a página de **Meus Temas** aberta, clique no botão **Editar Código (CMS)**.

<figure><img src="/files/WGfN4I6z9ejx5DyBgKlw" alt=""><figcaption></figcaption></figure>

2- Na opção **Editar código (CMS),** você terá acesso a todos os códigos de cada parte da sua loja virtual.

![](/files/404BJN2oNsVI0l3lBlQZ)

&#x20;3- Nessa página você irá encontrar o código de cada parte da sua loja separado por pastas.&#x20;

Após realizar suas alterações, é só clicar no botão **Salvar.**

![](/files/A7N6Q3qPAd507Vu0qF35)

&#x20;4- Caso você queira voltar à página para o código padrão, basta clicar no botão **Recarregar padrão.**&#x20;

![](/files/2wtz7tCiX9yBgE1tj6A0)

### **Duplicar**

Este recurso permite duplicar o tema atual da sua loja para fazer ajustes sem impactar a operação normal da mesma.&#x20;

Dessa forma, é possível realizar manutenções e melhorias sem necessidade de colocar todo o site em modo de manutenção, evitando a perda de vendas.&#x20;

Os ajustes podem ser feitos no tema duplicado enquanto a loja permanece ativa.

1- Para duplicar um tema, clique no botão **Duplicar.**

![](/files/EFJDpFopticyxsSjE9W1)

&#x20;2- Após clicar no botão **Duplicar**, será carregada uma janela solicitando o preenchimento do nome do seu tema duplicado.&#x20;

Escolha o nome da sua cópia e clique no botão **Duplicar.**

![](/files/DRzmPhLbhE6TbZSAc64X)

&#x20;3- Após duplicar seu tema, ele será exibido em **Outros Temas Disponíveis**, na parte inferior do menu conforme imagem abaixo:

![](/files/zoC40xMxyhCLrD6JATVt)

&#x20;4- Após ter realizado todos os ajustes e o tema se encontrar da forma como deseja, você poderá publicar o Tema, para publicar seu tema duplicado basta clicar no botão **Publicar**.

![](/files/x0VxjefxwjfFwRbiSosm)

&#x20;5- Será aberta uma janela de confirmação da publicação, basta clicar no botão **Publicar**.

![](/files/Ns4N2akrYk4y3GNxWvTq)

6- Ao implementar um novo tema na sua loja virtual, todas as informações previamente cadastradas — como produtos, banners, formas de pagamento e opções de frete — são mantidas.&#x20;

O que muda é apenas a estrutura visual do seu catálogo, proporcionando uma nova aparência sem alterar o conteúdo essencial.

### **Excluir Tema**

1- Caso você queira excluir um tema, basta clicar no botão **Remover**.

<figure><img src="/files/Ql4UYn3uaGXUpuWBi0pW" alt=""><figcaption></figcaption></figure>

2- Na tela **Remover o tema**, insira o código fornecido no campo indicado e selecione **Remover** **tema** para concluir a ação.

<figure><img src="/files/OU9n8xPpuOB6AxyhTngc" alt=""><figcaption></figcaption></figure>

### **Download do código**

Esta funcionalidade permite que você faça o download completo do código do seu tema atual.

1-**Download do Código:** Clicando em **Download do Código**, o download começará imediatamente, permitindo que você tenha uma cópia local do tema para backup ou modificações offline.

<figure><img src="/files/wVIvUI7SHTILkl2IbxPg" alt=""><figcaption></figcaption></figure>

### **Importar Código**

Esta funcionalidade permite que você faça upload de um arquivo contendo todo o código do seu tema.&#x20;

1- Upload de um Tema: se você já tem um tema baixado e deseja usá-lo na sua loja, simplesmente clique em **Importar Código** para iniciar o processo de upload.

<figure><img src="/files/PVYdJLM7OrZdQUBlOb5W" alt=""><figcaption></figcaption></figure>

&#x20;2- Na página dedicada à busca, localize o tema de sua preferência. Após escolher o tema ideal, clique em **Abrir** para prosseguir com a seleção.

<figure><img src="/files/ZL2ThJZ038CDFHrIE0m4" alt=""><figcaption></figcaption></figure>

&#x20;3- Após a importação, você encontrará o tema recém-importado na seção **Outros Temas Disponíveis**, localizada na parte inferior da página, conforme ilustrado na imagem abaixo.

<figure><img src="/files/PCRgkXTdg5xEeQbKmkSj" alt=""><figcaption></figcaption></figure>

#### Como personalizar o CMS para Designers

Se deseja customizar seu template de maneira mais detalhada através de linguagens de programação, confira nosso tutorial completo de [CMS para designers](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/personalizacao-avancada-cms/cms-para-designers). Essa ferramenta é recomendada para uso exclusivo de desenvolvedores e designers experientes.

Para entender melhor o que é o CMS e como ele pode auxiliar no desenvolvimento do seu site, clique [aqui](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/personalizacao-avancada-cms/cms).

#### Configurações adicionais

Para tornar sua loja virtual ainda mais atraente, explore uma variedade de configurações adicionais disponíveis em nossos tutoriais, desenhados para auxiliá-lo na personalização da sua loja:

* [**Gerenciamento de Banners:** ](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/banners/banners#como-gerenciar-os-banners)essenciais para promoções e para captar a atenção dos visitantes, os banners direcionam o usuário para áreas específicas da loja virtual por meio de links. Aprenda a criar e gerenciar seus banners eficazmente.
* [**Criação de Vitrines:**](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/vitrines/utilizando-vitrines-na-loja-virtual) a funcionalidade de Vitrines simplifica a personalização do catálogo da sua loja, permitindo a você destacar produtos ou categorias específicas sem a necessidade de editar o HTML.
* [**Implementação de um Blog:**](https://ajuda.iset.com.br/inicio/minha-loja/cadastros/paginas/blog-na-loja-virtual) uma das estratégias mais eficazes para enriquecer o conteúdo da sua loja e melhorar sua visibilidade nos mecanismos de busca, como o Google, é através da criação de um blog.

&#x20;Ficou com alguma dúvida? Entre em contato conosco via chat online!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/meus-temas/editar-tema.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.