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, adicionar um toque futurista com o Tema Matrix, ou celebrar eventos especiais com o Tema Black Friday, temos uma variedade de estilos prontos para atender às suas necessidades.

Outras opções incluem o elegante Tema Sense, o inovador Tema Griff, o natural Tema Duna e o inspirador Tema Zion.

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.

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.

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.

2- Para personalizar seu tema, clique no botão Personalizar.

Na opção Personalizar, você poderá editar os seguintes campos:

• Botões;

• Cabeçalho;

• Configurações de tema;

• Grade de produtos;

• Redes sociais;

• Rodapé.

Todos esses campos serão melhores detalhados abaixo.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

9- URL da fonte: insira a URL correspondente à fonte escolhida, também disponível em Google Fonts, para integrá-la aos textos da loja.

10- Oferta especial - Texto: defina 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.

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.

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.

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.

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.

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.

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: opção para mostrar atributos dos produtos, como cores e tamanhos, de forma visual nos cards.

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.

Redes sociais

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

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

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.

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

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

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.

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.

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

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 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).

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

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

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

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

Duplicar

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

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.

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

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

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

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

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

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.

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

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.

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.

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

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.

Importar Código

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

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.

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.

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.

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. 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.

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: 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: 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: 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.

Ficou com alguma dúvida? Entre em contato conosco via chat online!