Personalize a sua loja com o Editor Visual de Temas

Nesta página

O Editor Visual de Temas da Jumpseller é uma ferramenta intuitiva e poderosa projetada para ajudá-lo a personalizar o tema da sua loja online com facilidade. Este documento irá guiá-lo pelas diversas funcionalidades do nosso editor de código visual, permitindo-lhe criar o tema perfeito para a sua loja.

Estrutura dos temas

O layout de um tema é composto por templates e estes são compostos por componentes. Os componentes podem ser divididos em subcomponentes. Esta estrutura permite uma fácil personalização e organização do design e das funcionalidades de um tema.

Por exemplo, considere uma Página de Produto como na seguinte imagem, que apresenta um cabeçalho com um logo, um menu de navegação e um ícone de carrinho. Abaixo deste cabeçalho existe uma secção que contém uma galeria de imagens do produto, o nome do produto, avaliações de clientes, um botão “Adicionar ao Carrinho” e uma descrição. Mais abaixo, existe um componente de produtos em destaque, seguido por um rodapé que inclui informações adicionais, um menu secundário e um logo que representa um método de pagamento suportado pela loja. Esta estrutura hierárquica garante um design intuitivo e facilmente adaptável.

O Layout da Loja é composto por elementos que aparecem na maioria das páginas da loja, como o cabeçalho e o rodapé.

O Template de Produto inclui itens essenciais como o botão “Adicionar ao Carrinho”, título do produto, imagens e descrição.

No exemplo a seguir, incorporamos um componente que exibe produtos relacionados. No entanto, outros componentes podem ser adicionados, como um vídeo do YouTube ou produtos de uma categoria específica que estão atualmente em promoção. Essa flexibilidade permite conteúdo diversificado em todas as páginas da loja.

Ao personalizar os componentes, todos os diferentes templates da sua loja terão um design único.

Encontrar o editor visual de temas

Pode editar o seu tema atual ou um tema secundário com o qual deseja trabalhar sem colocá-lo online. Para o tema atual, aceda ao seu Painel de Administração > Temas > Editor Visual ou clique no botão “Customizar” no seu tema atual dentro da Galeria de Temas.

Para temas secundários, clique no botão Ações e depois em “Customizar”.

Familiarize-se com a interface do editor visual

A interface do Editor Visual consiste nas seguintes seções:

Barra lateral

Contém os componentes e configurações que pode adicionar, modificar ou excluir dentro do seu tema.

De cima para baixo, estes são os elementos:

Logo da Jumpseller: Este é um ícone clicável que o leva de volta ao seu Painel de Administração.
Mobile/Desktop: Esta opção permite-lhe alternar entre a versão móvel e a versão de desktop da área de pré-visualização.
Atualizar: Este botão atualiza a área de pré-visualização para exibir quaisquer alterações que tenham sido feitas.
Ajuda: Esta opção fornece acesso à documentação que descreve todas as opções do tema selecionado.
Loja: Ao clicar neste botão, uma nova janela de navegação é aberta com a sua loja.
Editor: Esta opção redireciona-o para o editor de código.
Auto/Claro/Escuro: Esta opção permite-lhe alterar o esquema de cores da interface. A configuração Auto usará o padrão do seu sistema.

Contém os elementos e configurações que pode adicionar, modificar ou apagar dentro do seu tema.

Esta seção é onde pode adicionar, editar e apagar componentes do template. As opções no Menu de Componentes são as seguintes:

Definições Gerais: Estes parâmetros permitem-lhe configurar itens que são gerais para o tema e os templates, como cores, estilos de tags de promoções e outros itens que não estão diretamente relacionados a um componente específico.
Componentes: Aqui pode editar os componentes do template selecionado e quaisquer subcomponentes. Também pode adicionar novos componentes da Galeria ou apagá-los. Alguns temas incluem dois componentes especiais chamados Cabeçalho e Rodapé que lhe permitem personalizar especificamente essas partes do seu tema.

Barra superior

A Barra Superior na interface do Editor Visual fornece ferramentas para selecionar qual modelo modificar, desfazer e refazer alterações e guardar o seu trabalho. Também inclui um Botão Collapse que permite ocultar ou exibir o Menu de Componentes.

Aqui estão os elementos da Barra Superior:

Seletor de Template: Este menu suspenso permite selecionar o template que deseja personalizar.
Botão Collapse: Este botão quadrado permite ocultar ou exibir o Menu de Componentes.
Desfazer/Refazer/Gravar: Estes botões controlam as alterações efetuadas nos seus templates. Para pré-visualizar as Configurações Gerais, precisará de clicar no botão Gravar.

Editar o design da sua loja

Personalizar o design da sua loja online é uma parte essencial da criação de uma identidade de marca única e memorável. Com o Editor Visual da Jumpseller, pode facilmente modificar o design da sua loja sem necessitar de conhecimentos de programação. Desde a modificação de cores e fontes até à reorganização de elementos nas suas páginas, o Editor Visual oferece um controlo completo sobre o look da sua loja.

Nesta secção, tem acesso a uma visão geral dos elementos do Editor Visual que permitem personalizar o design da sua loja.

Layout da loja

O layout da loja é a espinha dorsal de um website, uma vez que seus elementos e regras estão presentes em todos os templates do tema. O layout da loja geralmente inclui o cabeçalho e o rodapé do website, bem como outros elementos que são consistentes em todas as páginas, como o logo do website e o menu de navegação. Edite o layout do seu tema nas seções de Configurações Gerais, Cabeçalho e Rodapé do Menu de Componentes.

Templates

Templates definem a estrutura básica de um site e determinam quais componentes são usados. Podem ser personalizados para diferentes páginas num site para manter a consistência e simplificar o processo de design. Escolha o seu template na Barra Superior. Esta é uma lista de todos os templates de uma loja:

Template	Descrição
Página Inicial	A sua página inicial.
Resultados de Pesquisa	Resultados da pesquisa de produtos.
Erro	Página de erro. Esta página é exibida quando o cliente tenta aceder a uma página que não existe ou para erros semelhantes.
Redefinir Palavra-passe	Permite aos clientes redefinir a sua palavra-passe.
Login de Cliente	Permite que os seus clientes iniciem sessão com a sua conta.
Criação de Cliente	Permite que os clientes criem uma nova conta.
Edição de Cliente	Permite que os clientes editem o seu endereço.
Conta de Cliente	Exibe informações sobre a conta do cliente.
Contacto	Fornece um formulário para os clientes entrarem em contacto com a loja.
Sucesso	Pagamento com sucesso para Checkout v1.
Avaliação de Encomendas	Permite que os clientes avaliem as suas encomendas no Checkout v1.
Formulário de Checkout	Exibe um formulário para os clientes finalizarem a compra no Checkout v1.
Carrinho	Exibe o carrinho do cliente.
Páginas	Usado para páginas personalizadas no site.
Produto	Exibe detalhes sobre um produto específico.
Categoria	Exibe uma lista de produtos de uma categoria.

Componentes

Os componentes são os blocos fundamentais de construção da estrutura de um tema. Eles podem incluir cabeçalhos, rodapés, vídeos, banners, sliders e outros elementos que são utilizados para construir páginas de um site. Os componentes podem ser adicionados, editados e eliminados no Menu de Componentes do Editor Visual, e podem ser reutilizados em diferentes templates para manter a consistência tanto em termos design como de funcionalidade.

Ao utilizar componentes, os designers de sites podem criar layouts complexos de forma eficiente, com pouco ou nenhum conhecimento de código, já que os componentes individuais podem ser facilmente manipulados e reorganizados. Isso também permite uma manutenção mais fácil do site, já que as alterações num componente serão refletidas em todos os templates que utilizam esse componente.

Pode facilmente ajustar os componentes com a ajuda do Assistente de Edição de Tema, que lhe permite editar definições, bem como duplicar, ocultar, eliminar e também reordenar componentes diretamente na pré-visualização em tempo real. Também pode clicar no botão “Adicionar componente” na posição desejada e definir o tipo de componente que pretende adicionar.

Subcomponentes

No contexto do Editor Visual, os subcomponentes são os elementos que compõem um componente. Por exemplo, um componente de Banners pode incluir um subcomponente para cada imagem na área do banner, enquanto um componente de Slider teria um subcomponente separado para cada slide.

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 www.jumpseller.com/support/liquid.
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.

Para obter informações atualizadas sobre o estado do nosso sistema e de todos os seus serviços, por favor visite status.jumpseller.com. Também pode subscrever para receber notificações sobre quaisquer atualizações ou trabalhos de manutenção no site.

Personalize a sua loja com o Editor Visual de Temas

Estrutura dos temas

Encontrar o editor visual de temas