Personalize sua loja com o Editor Visual de Temas

O Editor Visual de Temas da Jumpseller é uma ferramenta intuitiva e poderosa projetada para ajudar a personalizar o tema da sua loja virtual com facilidade. Este guia completo vai orientá-lo pelas várias funcionalidades e características do nosso editor visual de temas, permitindo que você crie o tema perfeito para a sua loja.

Você pode acessar o Editor Visual de Temas pela seção “Temas” no menu lateral de administração ou pelas ações de cada tema individual na galeria de temas do seu painel de administração.

Encontre o Editor Visual de Temas

Você pode editar o seu tema atual ou um tema secundário com o qual queira trabalhar sem colocá-lo online. Para o tema atual, acesse o seu Painel de Administração > Temas > Editor Visual ou clique no botão Editar do seu tema atual dentro da Galeria de Temas.

Para os temas secundários, clique no botão de ações e depois em Editar.

Estrutura do Editor Visual

Estruturalmente, o editor visual é composto por 3 áreas ou seções:

1. Barra superior
2. Barra lateral
3. Pré-visualização do tema

Barra superior

Identificação do tema

• Voltar à galeria de temas: Link direto para voltar à galeria de temas no administrador da sua loja.
• Nome e estado do tema: O nome atual do tema; você pode renomeá-lo dentro da galeria de temas pelo botão “Ações”. Junto ao nome do tema há um indicador com o estado dele, se é o tema Atual ou se é um Rascunho não publicado. O estado do seu tema pode ser modificado na galeria de temas no seu painel de administração.
• Ações do tema: Junto com o nome e estado do tema, há um botão com três pontos que abre os seguintes itens:
  • Versão do tema: Número que indica qual é a versão atual do seu tema.
  • Link para ver tema ao vivo: Este link abre o seu tema em uma nova aba do navegador para pré-visualizar o tema. Você pode pré-visualizar um tema principal ou um tema em estado de rascunho.
  • Link para o editor de código: Link direto para o editor de código do seu tema. Recomendamos acessar a edição de código apenas se você tiver conhecimentos de programação liquid, html, css ou javascript.
  • Documentação do tema: Link para ver a documentação do tema.

Gerenciador de templates

Neste seletor você pode realizar as ações necessárias sobre os templates do seu tema.

Mudar de template

Escolha qual template precisa pré-visualizar, entre estes encontram-se:

• Página inicial: A capa do seu tema, é a página inicial que é exibida ao entrar no domínio principal da sua loja.
• Produto: Este template mostra como será apresentado cada elemento dentro da página de produto.
• Categoria: O template de categoria é destinado a mostrar as coleções de produtos que você categorizou no seu gerenciador de produtos.
• Página
  • Blog: Template que exibe as publicações categorizadas como Post.
  • Post: Template dedicado às publicações que serão mostradas no template Blog.
  • Default: Este é o template padrão para as suas páginas de conteúdo de tipo genérico. As páginas legais, Termos e condições, Políticas de privacidade e políticas de envio usam automaticamente este template.
• Pesquisa: Este template é onde são apresentados os resultados de pesquisa do seu tema.
• Contato: Este template exibe as suas informações de contato, redes sociais, endereços, mapa e formulário de contato.
• Erro: Quando os seus visitantes chegam a uma página que não existe, por exemplo, ao inserir uma URL incorreta, esta página é a que será exibida.

Criar um novo template

Para os templates de Produto, Categoria ou Página, existe a opção de criar um novo template personalizado. Para isso, siga os seguintes passos:

1. Clique em algum dos templates mencionados anteriormente.
2. Clique no botão “Criar novo template”.
3. Escolha o nome do novo template.
4. Selecione o template base a partir do qual este novo template será criado.
5. Associe um produto, uma categoria ou uma página — conforme aplicável — a este novo template para que possa ser pré-visualizado.
6. Clique em confirmar e o novo template estará criado, pronto para ser desenhado. O template estará disponível para edição dentro da lista.

Ações sobre a pré-visualização

• Ocultar a barra lateral: Se precisar de mais espaço de visualização, você pode ocultar a barra lateral.
• Vista mobile ou desktop: Estes botões permitem pré-visualizar o seu tema em ambas as versões.
• Atualizar: Para recarregar a pré-visualização do seu tema.
• Ativar edição: Permite ativar ou desativar a edição dos componentes pela pré-visualização.
• Tema do editor visual: Você pode escolher entre a visualização Clara ou Escura.
• Zoom: Para aumentar e diminuir o tamanho da pré-visualização do seu tema.
• Desfazer ou refazer: Estes botões permitem reverter alterações ou refazer alterações que você aplicou ao seu tema.
• Salvar: O botão salvar guarda todas as alterações realizadas no seu tema no editor visual.

Barra lateral

Na barra lateral do seu editor visual você encontrará todas as ferramentas gráficas que permitem desenhar os temas da sua loja ao seu gosto. A seguir descrevemos os elementos base que formam o design do seu tema.

Configuração do tema

No início da barra lateral você encontrará um acesso direto a esta subseção onde poderá encontrar as configurações gerais que se aplicam ao seu tema e seus templates, tais como cores, tipografia, blocos de produto, códigos personalizados, blog, notificação de adicionar ao carrinho, personalização de checkout, entre outros. Neste link você pode ver uma lista da documentação para temas específicos.

Configuração do cabeçalho e rodapé

No seu tema existem duas seções que estão presentes automaticamente em todos os templates que compõem a sua loja:

• Cabeçalho: No cabeçalho, são exibidos elementos como barra de pesquisa, logotipo da loja, seletores de moeda e idioma, acesso à conta de usuário, carrinho de compras, menu principal, entre outros elementos que dependem de cada tema.
  
• Rodapé: No rodapé, colocamos menus personalizados, links para redes sociais, informações de contato, métodos de pagamento.

Configuração dos componentes de cada template

Neste link você pode encontrar a documentação dos componentes disponíveis dentro de um tema.

Os componentes de um tema são os blocos de conteúdo que compõem a sua loja: por exemplo sliders, banners, galerias de produtos, cabeçalhos, entre muitos outros. Cada componente tem a sua própria configuração geral e, por sua vez, alguns possuem sub-componentes que constroem um segundo nível de conteúdo que também pode ser configurado individualmente.

Para explicar a estrutura dos componentes e sub-componentes, usaremos como exemplo o componente Slider destacado na imagem acima.

1. Slider: O Slider é um componente que tem as suas próprias configurações individuais, como mudança de cores, ações sobre os sliders individuais, espaçamento, alinhamento, entre outros.
2. Slide: O Slide é um sub-componente do componente principal Slider; em cada um deles você pode modificar a configuração individual, como imagens, cores, links, entre outros.
3. Adicionar sub-componente: Você pode adicionar múltiplos sub-componentes ao seu componente principal; no exemplo da imagem acima são Slides. Este mesmo exemplo pode ser aplicado a muitos componentes do seu tema, como Banners, Galeria de logotipos, Barra de confiança, entre outros.
4. Adicionar componente: Nesta seção você pode adicionar um novo componente seguindo alguns critérios que detalhamos a seguir:
   
   • Novo: Você pode criar um componente completamente novo e configurá-lo do zero.
   • Duplicar: Cria rapidamente cópias de componentes que você já criou neste Tema. Reutilize designs e funcionalidades e modifique a cópia sem afetar o original.
   • Reutilizar: Reutilize o conteúdo de forma eficiente, incorporando componentes existentes de outro template dentro deste Tema. Incorpore designs e funcionalidades sem começar do zero. Tenha em mente que as modificações afetarão ambos os templates.

Figura 1:

• Início: Indica o nome do template atual onde os componentes estão sendo editados.
• Slider: Nome do componente.
• Bem-vindo: Nome do sub-componente.
• Adicionar novo Slide: Botão para adicionar um novo sub-componente. Neste caso, um Slide ao Slider.

Figura 2:

• Seta: Botão para mostrar ou ocultar os sub-componentes.
• Lixeira: Botão para excluir o componente e os seus sub-componentes.
• Olho: Botão para ocultar o componente e os seus sub-componentes.

Figura 3:

• Círculo cinza escuro: Indica que há alterações não salvas.
• Círculo cinza claro e olho riscado: Indica que o componente ou sub-componente estão ocultos.
• Círculo verde: Indica que há um componente ou sub-componente novo sem salvar.

Pré-visualização

Nesta área do seu editor visual você poderá pré-visualizar as alterações que vai fazendo no seu tema. As modificações feitas na barra lateral serão mostradas nesta janela.

Ao passar o mouse sobre a pré-visualização do tema, você poderá ver alguns elementos de acesso rápido para a edição do seu conteúdo.

1. Nome do componente: Este elemento identifica o nome do componente.
2. Adicionar componente: Este botão permite adicionar um componente acima ou abaixo do componente pré-visualizado. Após clicar neste botão, o editor visual mostrará uma janela pop-up com as opções de componentes disponíveis para criar.
3. Ações sobre o componente:
   
   • Editar: O lápis abre o componente para editar na barra lateral.
   • Duplicar: Permite fazer uma cópia idêntica do componente.
   • Visibilidade: Permite mostrar ou ocultar o componente no seu tema. Esta opção permite continuar editando o componente sem excluí-lo.
   • Excluir: Ação de excluir o componente do seu tema. Esta opção não pode ser desfeita depois de salvar.
   • Reordenar: Os botões com setas para cima e para baixo permitem reordenar os componentes do seu tema.

Perguntas frequentes

• Posso personalizar o código do meu tema?

  Sim, você pode editar o código do seu tema usando o Editor de Código. No entanto, é importante destacar que quaisquer alterações que você fizer podem ter um impacto significativo no funcionamento da sua loja e podem exigir conhecimentos técnicos avançados. Recomendamos vivamente que consulte a nossa equipe de suporte antes de fazer quaisquer modificações. Basta nos dizer os seus objetivos e compartilhar o seu código, e teremos todo o prazer em ajudá-lo a obter o resultado desejado. Nossa equipe de especialistas vai orientá-lo no processo e garantir que a sua loja continue totalmente funcional e otimizada.

• Posso importar temas de uma plataforma diferente?

  Embora seja tecnicamente possível copiar/colar o código de todos os templates de um tema externo, você terá que modificar os elementos necessários para que funcionem na Jumpseller. Isso inclui botões como “adicionar ao carrinho” e “avançar para o checkout”, que precisarão ser modificados de acordo com o nosso guia técnico.

• Como posso atualizar o meu tema para uma versão mais recente?

  Para atualizar o seu tema para uma versão mais recente, siga estes passos:

  • Vá para Temas > Galeria.
  • Procure o nome do seu tema atual na Galeria.
  • Instale a versão mais recente do tema. Aparecerá um pop-up, oferecendo a opção de copiar o conteúdo da sua versão atual para a nova versão.
  • O tema atualizado será salvo como um tema secundário na seção “Outros temas instalados”.

  Se você fez personalizações extensivas no código do seu tema, recomendamos que entre em contato com a nossa equipe de suporte antes de atualizar, para garantir que as suas personalizações são compatíveis com a nova versão.

• Posso criar o meu próprio template?

  Sim, você pode criar o seu próprio template usando o editor de código. Basta ir para: Temas > Editor de código > Seção de modelos > Selecionar o tipo de modelo e clicar em “Adicionar template”. Será criada uma cópia do modelo padrão e você poderá adicionar o seu próprio código. Dependendo do tipo de modelo, você pode selecionar qual usar nas configurações de cada elemento. Por exemplo, os Modelos de Produtos serão mostrados como uma opção nas Configurações de Produtos, os Modelos de Categoria serão mostrados como uma opção nas Configurações de Categoria, e assim por diante.

Estamos aqui para ajudá-lo, portanto, se tiver alguma dúvida, pode entrar em contato conosco a qualquer momento.