Personalize a 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 online com facilidade. Este guia completo irá orientá-lo através das várias funcionalidades e caraterísticas do nosso editor visual de temas, permitindo-lhe criar o tema perfeito para a sua loja.

Pode aceder ao Editor Visual de Temas através da secção “Temas” no seu menu lateral de administração ou através das ações de cada tema individual na sua galeria de temas no seu painel de administração.

Encontre o editor visual de Temas

Pode editar o seu tema atual ou um tema secundário com o qual queira trabalhar sem colocá-lo online. Para o tema atual aceda ao seu Painel de Administração > Temas > Editor Visual ou 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 secçõ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, pode renomeá-lo dentro da galeria de temas no botão “Ações”. Junto ao nome do tema há um indicador com o estado deste, 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 numa nova separador do seu navegador para pré-visualizar o tema. 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 aceder à edição de código apenas se tiver conhecimentos de programação liquid, html, css ou javascript.
  • Documentação do tema: Link para ver a documentação do tema.

Gestor de templates

Neste seletor 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 destina-se a mostrar as coleções de produtos que categorizou no seu gestor 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 por defeito 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.
• Contacto: Este template exibe as suas informações de contacto, redes sociais, endereços, mapa e formulário de contacto.
• 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, deve seguir 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, pode ocultar a barra lateral.
• Vista móvel ou de 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 através da pré-visualização.
• Tema do editor visual: 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 tenha aplicado ao seu tema.
• Guardar: O botão guardar salva todas as alterações realizadas no seu tema no editor visual.

Barra lateral

Na barra lateral do seu editor visual 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 encontrará um acesso direto a esta sub-secçã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 pode ver uma lista da documentação para temas específicos.

Configuração da cabeçalho e rodapé

No seu tema existem duas secçõ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 contacto, métodos de pagamento.

Configuração dos componentes de cada template

Neste link 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, utilizaremos 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 destes pode modificar a configuração individual, como imagens, cores, links, entre outros.
3. Adicionar sub-componente: 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 secção pode adicionar um novo componente sob alguns critérios que detalhamos a seguir:
   
   • Novo: Pode criar um componente completamente novo e configurá-lo do zero.
   • Duplicar: Cria rapidamente cópias de componentes que já tenha criado 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 a ser 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.
• Caixote do lixo: Botão para eliminar 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 guardadas.
• 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 guardar.

Pré-visualização

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

Ao passar o mouse sobre a pré-visualização do tema, 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 a editar o componente sem eliminá-lo.
   • Eliminar: Ação de eliminar o componente do seu tema. Esta opção não pode ser desfeita depois de guardar.
   • 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, pode editar o código do seu tema usando o Editor de Código. No entanto, é importante salientar que quaisquer alterações que 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 equipa de suporte antes de fazer quaisquer modificações. Basta dizer-nos os seus objetivos e partilhar o seu código, e teremos todo o gosto em ajudá-lo a obter o resultado desejado. A nossa equipa de especialistas irá orientá-lo no processo e garantir que a sua loja continua 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, 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 de 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-lhe a opção de copiar o conteúdo da sua versão atual para a nova versão.
  • O tema atualizado será guardado como um tema secundário na secção “Outros temas instalados”.

  Se tiver feito personalizações extensivas no código do seu tema, recomendamos que contacte a nossa equipa 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, 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 predefinido e poderá adicionar o seu próprio código. Dependendo do tipo de modelo, pode selecionar qual utilizar 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, por isso, se tiver alguma dúvida, pode contactar-nos a qualquer momento.