Configurações principais do tema

Recomendamos que você visite também o artigo sobre como funcionam os componentes nos nossos temas.

Esta seção, à qual você pode acessar através do painel lateral superior esquerdo do Editor Visual, contém várias opções para personalizar o seu tema, com subseções como Design, Cores, Tipos de letra, entre outras.

Muitas das opções dentro dela aplicam-se de forma geral aos componentes e subcomponentes do tema, e em alguns casos podem ser substituídas por opções adicionais dentro deles.

A seguir, detalhamos todas estas seções, o que fazem e o que você pode alcançar com elas.

Cores

Esta seção contém o que chamamos de Pacotes de cores, que são grupos de cores relacionadas e aplicadas a múltiplos elementos dentro do tema.

A seguir, detalhamos alguns aspectos sobre eles para que você saiba como tirar o máximo proveito desta funcionalidade.

Pacotes

O tema vem com 3 pacotes pré-instalados, que são aplicados nos múltiplos componentes disponíveis para usar.

Conteúdo

O primeiro chama-se Conteúdo e é usado -quase- em todos os componentes do tema por padrão.

Portanto, se por exemplo você quiser alterar o design da sua loja para ter um aspecto muito “escuro”, este é o pacote que precisará modificar e adaptar as cores, para que seja aplicado em todas as seções.

Escuro

Este pacote é usado principalmente em subcomponentes do tema como os seguintes:

• Diapositivo → subcomponente de Barra superior
• Diapositivo → subcomponente de Slider
• Banner → subcomponente de Banners
• Banner grande

Seu principal objetivo dentro do tema é proporcionar um estilo “escuro”, com as respectivas cores de contraste de conteúdo, que é o caso de subcomponentes como Diapositivo, onde existe uma imagem que funciona como fundo com conteúdo sobre ela.

Claro

Este pacote é usado, por exemplo, no componente Rodapé de alguns temas e também é aplicado por padrão nos seguintes componentes e/ou seções:

• Newsletter
• Avaliações de produtos
• Breadcrumbs

Opções dos pacotes

Dentro de cada Pacote de cores você encontrará as seguintes opções:

• Fundo: Define a cor de fundo da seção onde é aplicado.
• Texto principal: Define a cor para os elementos de maior relevância dentro do tema, como os títulos.
• Texto secundário: Define a cor para os elementos de relevância secundária dentro do tema, como descrições, textos, entre outros.
• Links: Define a cor para os elementos de tipo link, como por exemplo um dentro do corpo de texto de uma página.
• Fundo do botão principal: Define a cor de fundo para os botões com maior prioridade dentro do tema, como o de Adicionar ao carrinho.
• Texto do botão principal: Define a cor do texto para os botões com maior prioridade dentro do tema.
• Fundo do botão secundário: Define a cor de fundo para os botões de relevância secundária dentro do tema, como por exemplo o que é visível num produto com estado Esgotado, que mostra o texto “Ver detalhes”.
• Texto do botão secundário: Define a cor do texto para os botões de relevância secundária dentro do tema.

Cores sugeridas

Também dentro de cada Pacote de cores, após todas as suas opções, você encontrará uma seção com múltiplos conjuntos de cores predefinidos que pode usar, criados manualmente por nós com base numa boa utilização do contraste de cores e práticas padrão conhecidas dentro do ecossistema de comércio eletrônico.

Lista de desejos

Dentro deste grupo você encontrará outras cores que são aplicadas a diferentes elementos da lista de desejos:

• Ícone: Esta cor é aplicada ao passar o cursor sobre o ícone para adicionar produtos à Lista de desejos.
• Ícone (ativo): Esta cor é aplicada quando um produto já está na Lista de desejos.
• Fundo: Esta cor é aplicada ao fundo do ícone para adicionar produtos à Lista de desejos.

Outras cores

Dentro deste grupo você encontrará outras cores que são aplicadas a diferentes elementos do tema:

• Desconto: Esta cor é aplicada a todas as instâncias relacionadas com um desconto (promoção) dentro do tema, como por exemplo as seguintes:
  • Preço do produto com desconto aplicado em blocos de produtos e páginas de produtos.
  • Etiqueta de promoção que é apresentada sobre a imagem de um bloco de produto quando tem um desconto aplicado.
• Texto da etiqueta de desconto: Esta cor é aplicada ao texto da etiqueta de promoção mencionada anteriormente.
• Avaliações: Esta cor é aplicada às estrelas de avaliação dos produtos que têm avaliações de clientes na loja.

Nota: A funcionalidade de Avaliações de produtos no Jumpseller está apenas disponível para planos Pro e superiores. Para mais informações sobre esta funcionalidade, você pode visitar o seguinte artigo.

Tipos de letra

Esta seção permite que você personalize os tipos de letra do tema, que está ligada à biblioteca Google Fonts e lhe dará acesso a mais de 1.700 tipos de letra.

A seguir, explicamos em detalhe como cada opção é aplicada dentro do tema.

Seleção de tipo de letra

Dentro deste grupo você poderá definir os tipos de letra para vários elementos gerais do tema:

Principal

Este tipo de letra é aplicado a todos os Títulos dentro do tema. Exemplos disto são:

• Títulos de componentes como Diapositivo, Banner, Produtos em destaque, Cabeçalho de modelo, Testemunhos, Conteúdo multimédia com texto, etc.
• O nome do produto que está dentro do subcomponente Título do produto.

Secundário

Este tipo de letra é aplicado a todos os textos restantes do tema. Exemplos disto são:

• Textos e links dentro do Cabeçalho, Menu de desktop e Menu móvel.
• Descrição num subcomponente Diapositivo e/ou Banner.
• Texto num componente Conteúdo multimédia com texto.
• Descrição do produto no subcomponente com o mesmo nome.
• Texto ou descrição disponíveis em componentes como Produtos em destaque, Últimos produtos, entre outros.

Nome da loja

Este tipo de letra é aplicado a todos os locais onde o Nome da loja é apresentado, que será visível se você não tiver carregado um Logotipo através das opções disponíveis nos componentes Cabeçalho e Rodapé ou no painel de administração da sua loja em Definições > Geral > Marca.

As seções onde o nome da loja aparecerá são as seguintes:

• Cabeçalho e Menu móvel.
• Rodapé.
• Cabeçalho das páginas do processo de compra (ex. Carrinho, Caixa), quando não foi carregado nenhum logotipo na seção Marca ou dentro da seção do Processo de compra.

Tipo de letra dos botões

Este tipo de letra é aplicado a todos os botões do tema.

Tamanhos

Tamanho base do tipo de letra

Esta opção permite que você defina e modifique o tamanho de letra “geral” do tema.

Os temas são desenhados usando unidades escaláveis, o que significa que ao aumentar ou diminuir a quantidade de pixels nesta opção, vários elementos serão imediatamente afetados por isso.

Design

Esta seção permite que você modifique e ajuste várias definições de design do tema.

Nome da loja

Nome personalizado

Esta opção permite que você defina e apresente um nome diferente do definido no painel de administração da loja em Definições > Geral > Preferências > Nome da loja.

Portanto, se por exemplo você não tiver carregado um logotipo em nenhuma das instâncias descritas anteriormente, o que adicionar neste campo será apresentado em todas essas seções.

Tamanho

Esta opção permite que você defina o tamanho para o Nome da loja, que será aplicado em todas as seções onde é apresentado.

Nota: o tamanho será aplicado ao nome adicionado dentro deste campo ou ao definido em Definições > Geral > Preferências > Nome da loja.

Peso

Esta opção permite que você modifique e ajuste o peso do Nome da loja.

Nota: O peso dependerá das variáveis disponíveis do tipo de letra que você definiu para a opção Nome da loja, dentro de Definições do tema > Tipos de letra.

Estilos do tema

Largura máxima do contêiner

Esta opção permite que você defina a largura máxima que o contêiner do tema terá.

O contêiner é uma seção que envolve todo o conteúdo de uma página e/ou componente, e determina como os elementos que estão dentro serão apresentados e organizados.

Ao alterar a sua largura, as dimensões de elementos como por exemplo as imagens variarão, o que terá um efeito nos tamanhos -ideais- que você precisará carregar.

Os tamanhos disponíveis para esta opção são os seguintes:

• Pequeno: o contêiner terá uma largura máxima de 1320px.
• Médio: o contêiner terá uma largura máxima de 1620px.
• Grande: o contêiner terá uma largura máxima de 1920px.
• Extra grande: o contêiner terá uma largura máxima de 2220px.
• Largura do browser: o contêiner se estenderá até à largura máxima disponível do browser em que a loja está sendo visualizada.

Todos os componentes do tema serão afetados pelo que você escolher aqui, mas você encontrará alguns com a sua própria configuração de Largura, que ao instalar o tema vêm com a opção Predefinido selecionada, caso em que respeitará inicialmente o valor selecionado aqui. Você pode alterar a opção Largura neles para que se comportem de forma diferente.

Espaçamento

Esta opção permite definir se os componentes e o seu conteúdo apresentarão um espaço ou separação entre eles, ou se você não quer que tenham nenhum.

Isto afetará, por exemplo, o espaço direito e esquerdo entre o conteúdo do componente e os lados do browser.

Além disso, alguns blocos também se comportarão de forma diferente com base no que você escolher aqui. Por exemplo, se definir Nenhum, os Banners, Produtos, etc., ficarão muito próximos uns dos outros, permitindo que você gere um tipo de design diferente.

Cantos arredondados

Esta opção permite que você defina se as seções e elementos terão cantos arredondados ou não.

Exemplos de como isto é aplicado podem ser notados em:

• Um componente Slider.
• Uma imagem de bloco de produto e página de produto.
• Uma imagem de um componente Conteúdo multimédia com texto.
• Banners e Banner grande.

Botões

Tamanho do tipo de letra

Você encontrará duas opções para definir o tamanho do texto para a maioria dos botões do tema, tanto para dispositivos desktop como móveis.

Estilo

Esta opção permite que você modifique o estilo da maioria dos botões do tema.

Formato do texto

Esta opção permite que você defina como o texto de todos os botões do tema será apresentado, com base no seguinte:

• Original: os textos serão apresentados tal como foram escritos originalmente.
• TUDO EM MAIÚSCULAS: os textos serão forçados a ser apresentados em maiúsculas, ex. TEXTO DO BOTÃO.
• Texto Com Maiúsculas Iniciais: os textos serão forçados a ser apresentados com a primeira letra de cada palavra em maiúscula, ex. Este É O Texto Do Botão.
• minúsculas: os textos serão forçados a ser apresentados sempre em minúsculas, ex. este é o texto do botão.

Transição

Esta opção permite ativar uma transição para todos os botões do tema, o que tornará visíveis novas opções para a personalizar:

• Estilo: permite que você defina qual transição aplicar:
  • Borda: o botão aumentará a borda à sua volta para o fazer parecer maior.
  • Largura: o botão aumentará os lados esquerdo e direito.
  • Sombra: será apresentada uma sombra na parte posterior do botão.
  • Ripple: a cor de fundo para o estado “hover” aparecerá a partir do lado esquerdo do botão.
• Tamanho: permite que você defina o tamanho da transição, que dependerá do Estilo que você escolher primeiro.

Bordas

Este grupo de opções permite que você personalize o design e aparência das linhas dentro do tema. Estas podem ser encontradas, por exemplo, nas seguintes seções e/ou componentes:

• Borda que pode ser ativada dentro dos componentes Cabeçalho e Menu de desktop.
• Componente Divisor de linha que pode ser adicionado em qualquer layout do tema, bem como no Rodapé.
• Estilos de borda que podem ser ativados em subcomponentes como um Banner ou Bloco de confiança.

As opções para personalizar estes elementos são as seguintes:

Estilo

Permite definir o estilo para todas as linhas, bordas e separadores dentro do tema.

Espessura

Permite determinar a espessura para todas as linhas e bordas dentro do tema:

• Fino: terá uma espessura de 1px.
• Grosso: terá uma espessura de 2px.

Carrosséis da loja

Este grupo de opções permite que você defina o estilo dos elementos de navegação de um Carrossel em todo o tema.

Estilo dos pontos do tema

Permite definir o estilo dos “pontos de navegação” (ou marcadores) com os quais os usuários podem navegar e controlar um Carrossel dentro do tema.

Tamanho das setas e pontos

Permite definir o tamanho das setas e dos pontos de navegação (ou marcadores) para todos os carrosséis do tema.

Ícones da loja

Os ícones usados nos temas Jumpseller a partir da versão 4.0.0 pertencem à biblioteca Phosphor Icons, que tem mais de 9.000 ícones para escolher.

Este grupo de opções permitirá que você controle e defina como se apresentam e como são aplicados dentro do tema.

Estilo

Esta opção permitirá que você defina o estilo para a maioria dos ícones usados no tema. Os estilos disponíveis são os seguintes:

• Negrito
• Preenchido
• Leve
• Regular
• Fino

Ícone do carrinho

Esta opção permite que você defina o ícone de “Carrinho” que será usado em todo o tema. As seções onde este ícone pode ser visível são as seguintes:

• No lado direito do Cabeçalho, juntamente com o número de produtos.
• No subcomponente Menu do carrinho que faz parte do Cabeçalho, apenas se nas suas definições tiver ativado a apresentação do ícone.
• Nos botões Adicionar ao carrinho nos blocos de produtos e na página do produto, se tiver ativado a apresentação do ícone na opção detalhada abaixo.

Mostrar ícone do carrinho nos botões

Como foi mencionado anteriormente, esta opção permite que você apresente o ícone do carrinho nos botões Adicionar ao carrinho dentro dos blocos de produtos e das páginas de produtos.

Animações

Este grupo de opções permite que você ative uma animação para a maioria -se não todas- as seções e componentes do tema, de forma a proporcionar movimento ao design da sua loja e torná-la mais atrativa para os seus clientes.

Ativar animações

Ao ativar isto, as seguintes opções ficarão disponíveis para que você as personalize:

• Tipo de animação: permite definir a posição a partir da qual o componente será animado e aparecerá.
• Fazer a animação apenas uma vez: quando ativado, a animação apenas ocorrerá quando você fizer scroll para baixo na página e o componente aparecer. Pelo contrário, quando desativado, a animação ocorrerá cada vez que você fizer scroll para baixo e para cima na página.
• Atraso da animação: permite definir o tempo (em milissegundos) que demorará a ocorrer a animação, assim que o componente entra na área visível (janela do browser).

Você também encontrará uma opção dentro dos componentes chamada Personalizar opções, muito provavelmente dentro do grupo Aparência, com a qual você poderá personalizar as transições especificamente para eles e estas substituirão as desta seção.

Nota: Se você desativar a opção Ativar animações do tema, afetará todos os componentes do tema. Portanto, mesmo quando num ou mais componentes tiver ativado a opção Personalizar opções de animação, as animações não terão qualquer efeito, pois a opção aqui nas Definições do tema controla todas elas.

Lista de desejos

Nota: Esta funcionalidade está apenas disponível para lojas cadastradas no plano Pro e superiores. Para mais informações você pode visitar o seguinte artigo.

Ao marcar a opção Ativar Lista de desejos, a funcionalidade Lista de desejos será ativada em todo o tema.

Ao fazê-lo, o grupo de opções Mostrar em ficará disponível para usar, para que você possa definir em que seções será apresentado:

Cabeçalho

Apresenta os links da Lista de desejos no Cabeçalho do tema, para que os usuários possam navegar diretamente para a seção correspondente na sua página de Conta de cliente.

Blocos de produtos

Apresenta o ícone da Lista de desejos nos blocos de produtos. Isto dará aos usuários a possibilidade de adicionar rapidamente produtos à sua Lista de desejos, sem necessidade de acessar à página de nenhum deles.

Página do produto

Apresenta o botão da Lista de desejos (ícone e texto) na página do produto.

Isto faz parte do subcomponente Lista de desejos, que é filho do componente Modelo de produto, localizado no layout Produto do tema.

Nota: Os usuários poderão adicionar um produto à Lista de desejos apenas quando tiverem sessão iniciada.

Você pode ler mais sobre isto em este artigo.

Breadcrumbs

Os Breadcrumbs são a seção que pode ser apresentada no início de layouts como por exemplo Categorias, Produtos, Páginas e Página de contacto.

Permite aos usuários conhecer o caminho que seguiram para chegar a uma determinada página. As opções para os personalizar são as seguintes:

Mostrar em

Esta opção permite que você defina em que instâncias esta seção será apresentada:

• Todos os dispositivos: em todo o tipo de dispositivos.
• Apenas desktop: em dispositivos com uma largura igual ou superior a 768px.
• Apenas móvel: em dispositivos com uma largura igual ou inferior a 767px.
• Não apresentar: não mostrará a seção em nenhum tipo de dispositivo.

Alinhamento

Você encontrará duas opções para definir o alinhamento da lista para dispositivos desktop e móveis.

Margens

Você encontrará duas opções para definir a margem interna superior e inferior (espaço) da seção.

Cores do conteúdo

Permite escolher o Pacote de cores para os Breadcrumbs.

Cabeçalhos

O Cabeçalho é uma seção apresentada em quase todos os componentes do tema, e é geralmente composta pelos seguintes elementos:

• Um subtítulo
• Um título
• Uma descrição
• Em alguns casos um botão ou link.

As opções dentro desta seção das Definições do tema afetarão todos os locais onde um Cabeçalho está presente ou disponível para ser apresentado:

Alinhamento

Você encontrará duas opções para definir o alinhamento da lista para dispositivos desktop e móveis.

Títulos

Este grupo de opções permite que você defina o design e aparência dos títulos para todas as seções de Cabeçalho do tema:

Tamanho

Define o tamanho para todos os títulos dentro dos Cabeçalhos do tema, com base em cálculos predefinidos diretamente afetados pela opção Tamanho base do tipo de letra localizada em Definições do tema > Tipos de letra > Tamanhos.

Ao escolher Personalizado, você poderá ajustar manualmente o tamanho para dispositivos desktop e móveis de forma independente.

Peso

Define o peso para todos os títulos dentro dos Cabeçalhos do tema.

Nota: O peso dependerá das variáveis disponíveis do tipo de letra que você definiu para a opção Tipo de letra principal dentro de Definições do tema > Tipos de letra > Seleção de tipo de letra.

Espaçamento entre letras

Permite ajustar o espaço entre letras.

Tudo em maiúsculas

Permite forçar que todos os títulos dos Cabeçalhos sejam apresentados em letras maiúsculas, mesmo que não tenham sido escritos dessa forma: ex. TÍTULO.

Mostrar linha abaixo

Apresenta uma linha ou borda abaixo dos títulos, de forma a gerar uma divisão mais clara com o conteúdo que vem abaixo.

Subtítulos

Este grupo de opções fornece as mesmas opções de design que os Títulos.

A diferença aqui é que as opções para definir o tamanho destes apenas serão apresentadas se você escolher Personalizado na opção de tamanho para Títulos.

Ao fazê-lo, serão apresentadas duas opções para definir o tamanho para dispositivos desktop e móveis. Para qualquer outra opção diferente de Personalizado, os subtítulos serão calculados com base em percentagens relacionadas com o tamanho dos títulos, da seguinte forma:

• 40% do tamanho do título em dispositivos desktop.
• 30% do tamanho do título em dispositivos móveis.

Descrições

Aqui você encontrará apenas a opção para controlar o Tamanho das descrições, que também apresenta opções para o controlar em dispositivos desktop e móveis ao escolher Personalizado.

Aspectos como o peso e as maiúsculas podem ser adicionados e ajustados através dos respectivos campos nos quais você pode adicionar uma descrição numa seção de Cabeçalho.

Nota: O tamanho das descrições também será diretamente afetado pelo Tamanho base do tipo de letra definido em Definições do tema > Tipos de letra > Tamanhos.

Filtros

Esta seção fornece várias opções para que você personalize e defina como os Filtros funcionam dentro do tema.

Para saber mais sobre como os filtros funcionam no Jumpseller, visite este link.

Nota: A funcionalidade de Filtros está apenas disponível para planos Premium ou superiores.

Apresentação

Mostrar em desktop

Define se a lista de filtros deve ser apresentada no lado esquerdo do subcomponente Feed de produtos, que está disponível para usar nos layouts de Categoria e Resultados de pesquisa, como pode ser visto na imagem no início desta seção.

Isto apenas se refletirá em dispositivos Desktop com uma largura igual ou superior a 768px.

Para dispositivos com uma largura igual ou inferior a 767px, os filtros estarão disponíveis dentro de um painel lateral, que pode ser aberto através de um botão que será apresentado dentro da seção Cabeçalho.

Nota: Se esta opção estiver desativada, o comportamento seria o mesmo que em dispositivos Móveis.

Exemplo do painel lateral de Filtros aberto num dispositivo Desktop, quando foi desativada a sua apresentação junto ao Feed de produtos.

Aplicar filtros ao clicar

Esta opção será apresentada quando a anterior estiver ativada e permite aplicar os filtros instantaneamente quando os usuários clicam neles. Portanto, a página será recarregada automaticamente.

Ao ativá-lo, haverá certos aspectos que mudarão dentro da página que você precisa conhecer:

• Ao clicar num filtro, a página será recarregada automaticamente.
• Os botões Aplicar filtros ficarão ocultos.
• Será apresentado um novo botão na seção onde aparece a subseção Filtrar por preço, que apenas funcionará para estes.

Nota: o que foi mencionado na lista acima apenas ocorrerá em dispositivos Desktop. Para dispositivos Móveis, a funcionalidade dos filtros permanecerá a mesma, tendo de clicar no botão Aplicar filtros dentro do painel lateral.

Tipos

Dentro deste grupo você encontrará opções para mostrar ou ocultar diferentes tipos de filtros.

Mostrar filtro ‘Ordenar por’

Esta opção permite que você mostre ou oculte o seletor com o qual os clientes podem reordenar a lista de produtos, com base no seguinte:

• Posição: A ordem é determinada pela posição em que os produtos estão listados dentro de uma Categoria. No caso da página de Resultados de pesquisa, será determinada com base na ordem em que os produtos correspondem à palavra-chave de pesquisa usada.
• Nome: A a Z: A ordem dos produtos será determinada de forma descendente.
• Nome: Z a A: A ordem dos produtos será determinada de forma ascendente.
• Preço: Do mais baixo para o mais alto: Apresentará primeiro os produtos com preços mais baixos. Isto apenas considerará os preços originais e não os descontos.
• Preço: Do mais alto para o mais baixo: Apresentará primeiro os produtos com preços mais altos. Isto apenas considerará os preços originais e não os descontos.
• Data: Mais recentes primeiro: Reordenará os produtos mostrando os mais recentes adicionados a uma categoria. No caso dos Resultados de pesquisa, mostrará primeiro os produtos mais recentes adicionados à loja.

Nota: para as categorias, você pode escolher a opção predefinida deste seletor acessando a seção Propriedades, dentro das respectivas definições em Produtos > Categorias.

Mostrar subcategorias

Define se as subcategorias (níveis internos) de uma categoria serão apresentadas juntamente com o resto dos filtros.

Nota: Isto apenas se refletirá nos layouts de Categoria.

Mostrar filtro por preço

Permite mostrar ou não os campos com os quais os clientes podem filtrar produtos com base num intervalo de preço mínimo e máximo.

Os intervalos de preços possíveis serão determinados com base na coleção de produtos listados dentro de um layout de Categoria e/ou Resultados de pesquisa.

Outras opções

Mostrar contador de filtros

Permite apresentar a quantidade de produtos de cada filtro entre parênteses, ex. Vermelho (2).

Limitar quantidade de itens nos filtros

Esta opção permite que você limite a quantidade de itens dentro de todos os grupos de filtros.

Isto é útil se a lista dentro dos seus filtros for demasiado longa e você quiser mostrar apenas alguns dos seus itens primeiro.

Ao ativar esta opção, será apresentado um link + Mostrar mais no final de cada grupo de filtros.

Ao clicar, o grupo se expandirá mostrando todos os itens restantes, e o texto do link mudará para - Mostrar menos. Num segundo clique, o grupo voltará a colapsar e ocultará os itens.

Nota: isto não afetará o filtro Ordenar por.

Quantidade de itens visíveis

Ao ativar a opção anterior, esta aparecerá.

Permite definir a quantidade inicial de itens de filtros a mostrar dentro dos grupos.

Por exemplo, se um dos seus filtros tiver um total de 12 itens e dentro desta opção definir 5, os 7 itens restantes ficarão ocultos até que o usuário clique no link + Mostrar mais.

Ativar filtros recolhíveis

Esta opção faz com que toda a lista de filtros funcione como um Acordeão, tornando-os recolhíveis e permitindo que sejam abertos ao clicar.

Ao ativá-la, será apresentada uma nova opção chamada Apresentação recolhível predefinida, que terá as seguintes duas opções:

1. Todos abertos: ao carregar a página, todos os filtros aparecerão abertos e os usuários poderão fechá-los um a um.
2. Todos fechados: ao carregar a página, todos os filtros aparecerão fechados e os usuários terão de clicar nos seus títulos para os abrir.

Bloco de produto

Um Bloco de produto é o “bloco” de pré-visualização de um produto que pode ser apresentado em múltiplos layouts do seu tema. Contém várias informações sobre cada produto, para que os clientes conheçam os detalhes sobre eles.

A seguir, explicamos todas as opções possíveis para os personalizar.

Aparência

Dentro deste grupo você encontrará opções para personalizar o design geral e aspecto de todos os blocos de produtos do tema e nas diferentes seções e componentes que os apresentam.

Ordem do conteúdo

Define a ordem dos elementos que são apresentados dentro da área de conteúdo, que é a que fica imediatamente abaixo ou após a imagem do produto.

Aqui você pode reordenar as opções arrastando-as para cima e para baixo, para definir a posição que lhe parecer melhor.

Algumas coisas a considerar são:

• Os Atributos serão apresentados se um produto tiver um SKU e/ou Marca definidos, e se ambos estiverem ativados dentro do grupo Informação que pode ser encontrado mais abaixo.
• O Preço será apresentado sempre que Desativar preços de produtos estiver desmarcado.
• As Cores serão apresentadas se um produto tiver opções ou variantes de tipo cor.
• A Avaliação será apresentada se a sua loja tiver o plano que permite Avaliações e se um produto tiver mais de uma avaliação publicada.

Produtos por linha em desktop

Define a quantidade de produtos por linha horizontal que serão apresentados para dispositivos Desktop.

A forma como isto afeta os produtos baseia-se nos detalhes da seguinte tabela:

Valor da opção	Largura do dispositivo	Produtos por linha
5	≥ 1200px	5
5	≥ 991px	4
5	≥ 768px	3
5	≥ 576px	2
4	≥ 1200px	4
4	≥ 991px	4
4	≥ 768px	3
4	≥ 576px	2
3	≥ 576px	3

Produtos por linha em móvel

Define a quantidade de produtos por linha horizontal que serão apresentados para dispositivos Móveis com uma largura igual ou inferior a 575px.

Nota: ao escolher 2 produtos, o tamanho dos elementos de conteúdo como nome, preço, etc., diminuirá ligeiramente para preservar o design da informação em dispositivos móveis mais pequenos.

Alinhamento do conteúdo

Exemplo de diferentes alinhamentos: Esquerda, Centro e Direita respectivamente

Define o alinhamento de todos os elementos dentro da área de conteúdo dos blocos.

Espaço entre

Permite definir se os blocos de produtos terão um espaço ou separação entre eles.

A quantidade de espaço será determinada com base no que você escolher dentro de Definições do tema > Design > Estilos do tema > Espaçamento.

Nota: Esta opção não será visível se Espaçamento for igual a Nenhum.

Cantos arredondados

Permite definir se os blocos de produtos terão cantos arredondados ou não. A forma como isto é aplicado variará com base em:

• Se o Estilo de cartão para blocos de produtos estiver ativado, os cantos serão aplicados a todo o bloco.
  • Se a opção Preenchimento de imagem estiver desativada, a imagem também apresentará cantos arredondados.
• Se o Estilo de cartão estiver desativado, os cantos apenas serão aplicados à imagem.

Ativar Vista rápida

Permite ativar a funcionalidade Vista rápida, que é explicada em esta seção.

Ao ativá-lo, será apresentado um ícone na área de imagem dos blocos de produtos, que será revelado quando os usuários “passarem o cursor” sobre ele em dispositivos desktop. Em dispositivos móveis, estará sempre visível.

Opções do nome

Este grupo fornece opções para personalizar como o nome dos produtos se apresenta dentro dos blocos.

Tamanho

Ao escolher Tamanho base, o tamanho do nome será determinado pelo que está definido na opção Tamanho base do tipo de letra.

Ao escolher Personalizado, você poderá ajustar manualmente o tamanho para dispositivos desktop e móveis, respectivamente.

Peso

Permite ajustar o peso do nome do produto dentro dos blocos.

Nota: O peso dependerá das variáveis disponíveis do tipo de letra que você definiu para a opção Tipo de letra principal dentro de Definições do tema > Tipos de letra > Seleção de tipo de letra.

Espaçamento entre letras

Permite ajustar o espaço entre letras para todos os nomes de blocos de produtos.

Tudo em maiúsculas

Permite forçar que todos os nomes de blocos de produtos sejam apresentados em letras maiúsculas, mesmo que não tenham sido escritos dessa forma: ex. NOME DO PRODUTO.

Opções de imagem

Dimensão

Define a dimensão para todas as imagens de blocos de produtos do tema. As opções disponíveis são definidas com base em proporções de aspecto, que são exemplificadas abaixo:

Opção	Proporção de aspecto	Exemplo de imagem em pixels
Horizontal	16:9	527 x 296
Vertical	3:4	527 x 702
Retangular	4:3	527 x 395
Quadrado	1:1	527 x 527

Apresentação

Define como as imagens do produto se adaptarão ao espaço disponível relacionado com a dimensão selecionada acima.

• Redimensionar: As imagens se adaptarão o máximo possível à dimensão do espaço disponível.
• Cortar: Preencherá todo o espaço disponível com a maior parte da imagem do produto.

Transição

Permite definir se será aplicada uma transição à imagem do bloco de produto, quando os usuários passam o cursor (mouseover) sobre elas:

• Escala de cinzentos ao passar o cursor: a imagem será apresentada com a sua cor original no início, e fará a transição para uma versão a preto e branco ao passar o cursor.
• Escala de cinzentos no início: a imagem será apresentada com um estilo a preto e branco no início, e fará a transição para as suas cores originais ao passar o cursor.
• Mostrar segunda imagem: A primeira imagem adicionada a cada produto será apresentada no estado inicial. Ao passar o cursor sobre o bloco de produto, será mostrada a segunda imagem da lista de imagens do produto.
• Zoom: a imagem aumentará 10% da sua dimensão original.
• Nenhuma: Os produtos não terão qualquer transição ao passar o cursor.

Nota: Mostrar segunda imagem apenas funcionará se o produto tiver pelo menos 2 imagens adicionadas. Caso contrário, quando um usuário passar o cursor sobre um produto, não haverá qualquer transição.

Informação

O seguinte grupo de opções permite que você defina que detalhes do produto serão apresentados na área de conteúdo dos blocos.

SKU

Apresenta o SKU dos produtos. Não será apresentado se o campo SKU estiver vazio na configuração de um produto.

Marca

Apresenta a Marca dos produtos. Não será apresentado se o campo Marca estiver vazio na configuração de um produto.

Nota: A ordem para estes dois atributos será primeiro SKU e depois Marca, e estarão separados por uma linha vertical. Esta linha não será apresentada se um produto não tiver um dos dois.

Avaliações

Apresenta as estrelas de avaliação e a pontuação média de avaliação para os produtos que têm avaliações de clientes.

Nota: A funcionalidade de Avaliações de produtos no Jumpseller está apenas disponível para planos Pro e superiores. Para mais informações sobre esta funcionalidade, você pode visitar o seguinte artigo.

Opções de cor

Apresenta a primeira opção de tipo Cor juntamente com as suas variantes.

Nota: Se um produto tiver 2 ou mais opções de tipo Cor, apenas a primeira da lista de opções será apresentada.

Ao ativá-lo, será apresentado um grupo secundário de opções chamado Estilos de cores com as seguintes opções dentro:

• Posição: define a posição em que as cores serão apresentadas.
• Cantos: define os estilos das caixas de cores.
• Mostrar imagem em vez da cor: permite decidir mostrar a imagem de cada cor (se atribuída), em vez da “caixa de cor”.

Ações e botões

Este grupo de opções inclui uma opção chamada Mostrar botão 'Adicionar ao carrinho', que quando ativada apresentará o botão para adicionar produtos ao carrinho a partir de qualquer página da loja, sem necessidade de acessar às suas páginas individuais (página do produto) para o fazer.

Os produtos poderão ser adicionados ao carrinho desde que:

• Não tenham estado de Não disponível ou Esgotado.
• Não tenham opções, ex. tamanho, cor, etc. Para os que têm, será apresentado um botão com o texto “Ver opções” que levará os usuários à página do produto.

Além disso, um conjunto de opções adicionais ficará disponível para personalizar ainda mais esta seção:

Mostrar seletor de quantidade

Apresenta o seletor (ou campo) com o qual os clientes podem escolher as unidades que pretendem adicionar ao carrinho para um determinado produto.

Mostrar botões de estado

Apresenta um botão para os produtos com estado de Não disponível ou Esgotado na parte inferior do bloco, que também leva à respectiva página do produto.

Mostrar link ‘Comprar agora’

Apresenta um link Comprar agora abaixo do botão Adicionar ao carrinho.

Esta opção é útil para agilizar o processo de compra, permitindo aos usuários completar rapidamente a sua compra com o mínimo de passos, melhorando a experiência e potencialmente aumentando as conversões.

Este link funciona de forma diferente do botão, pois tem a sua própria funcionalidade que é explicada a seguir:

• Levará os usuários diretamente à página do Carrinho ou Caixa, dependendo do que você tiver definido no painel de administração da sua loja em Definições > Caixa > Preferências > Após adicionar um produto ao carrinho.
• Se um usuário já tiver produtos adicionados ao carrinho, este link criará um novo ID do Processo de compra apenas com o produto em que foi clicado.
• Se o usuário retornar a qualquer outra página (ex. Página inicial) antes de terminar o processo de compra, os produtos anteriores que foram adicionados continuarão lá.

Mostrar botão ‘Adicionar ao carrinho’ ao passar o cursor

Esta opção permite apresentar o botão Adicionar ao carrinho, juntamente com os outros elementos que podem ser ativados, apenas quando os usuários “passam o cursor” sobre o bloco de produto.

Nota: Isto apenas será aplicado em dispositivos Desktop. Em dispositivos Móveis, o botão estará sempre visível.

Opções de preço

Este grupo de opções permite que você defina como os preços serão apresentados nos blocos de produtos.

Alinhamento

Define como os preços serão apresentados dentro dos blocos com base nas seguintes condições:

• quando há um desconto (promoção) disponível e visível aplicado e/ou;
• quando um produto tem variantes e foi definida uma opção de Intervalo.

As opções disponíveis são as seguintes:

• Horizontal: Os preços se alinharão um ao lado do outro, horizontalmente.
• Empilhado: Os preços serão empilhados um abaixo do outro, verticalmente.

Mostrar texto ‘a partir de/até’ para variantes

Apresenta um texto antes dos preços quando um produto tem variantes (ex. Cor, Tamanho), como por exemplo: a partir de €200.

Apresentação do preço de variantes

Define como os preços serão apresentados para os produtos que têm variantes e quando essas variantes têm preços diferentes.

• Mínimo: Apresentará o preço mais baixo entre todas as variantes.
• Máximo: Apresentará o preço mais alto entre todas as variantes.
• Intervalo: Apresentará simultaneamente o preço mais baixo e o mais alto. A forma como são apresentados será definida pela opção Alinhamento de preços mencionada acima.

Mostrar indicador de imposto

Apresenta um texto junto ao preço indicando que o preço final é “mais imposto”. Se as definições de imposto na caixa indicarem que os produtos já incluem imposto, este texto não será apresentado.

Ao ativá-lo, as seguintes opções também ficarão visíveis:

• Mostrar etiqueta em maiúsculas: força que o “texto de imposto” seja apresentado em letras maiúsculas, ex. + IVA.
• Mostrar etiqueta apenas no preço máximo: Se Apresentação do preço de variantes for igual a Intervalo, a etiqueta será apresentada apenas para o preço mais alto.

Aparência das etiquetas

As opções dentro deste grupo permitem que você defina como as etiquetas dentro dos blocos de produtos serão apresentadas. Isto apenas se aplicará às seguintes:

• Nova, se ativada.
• Estados Esgotado ou Não disponível.

As opções são as seguintes:

Tamanho

Ao escolher Tamanho base, o tamanho do texto das etiquetas será determinado pelo que está definido na opção Tamanho base do tipo de letra.

Ao escolher Personalizado, você poderá ajustar manualmente o tamanho para dispositivos desktop e móveis, respectivamente.

Posição

Permite que você defina onde as etiquetas do produto serão posicionadas sobre a imagem.

Forma

Define a forma com que as etiquetas serão apresentadas.

Etiqueta de desconto

Este grupo de opções permite definir como a Etiqueta de desconto será apresentada, que apenas será apresentada nos seguintes casos:

• Se um produto tiver uma promoção visível.
• Se a promoção não estiver condicionada por um Código. Caso esteja, a etiqueta será mostrada se o cliente tiver introduzido o código na página do carrinho.
• Se a etiqueta não estiver condicionada por grupos de clientes. Caso esteja, a etiqueta será mostrada quando o cliente tiver sessão iniciada.

Apresentação

Define a forma como a etiqueta será apresentada, da seguinte forma:

• Nenhuma: não será apresentada em nenhum caso.
• Ambas: apresentará tanto o texto como a percentagem de desconto, ex. -10% OFF.
• Percentagem: apresentará apenas a percentagem, ex. -10%.
• Texto: apresentará apenas o texto, sem considerar a percentagem, ex. OFF.

Se você quiser alterar o texto desta etiqueta, pode fazê-lo no grupo Traduções do tema, no campo Texto da etiqueta de desconto.

Nota: Este texto também será aplicado para a etiqueta que pode ser apresentada dentro das páginas de produtos, junto ao preço. Se você não quiser apresentar um texto, deixe simplesmente o campo vazio.

Forma

Define a forma que esta etiqueta terá nos blocos de produtos.

Etiqueta de estado

Ao marcar a opção Mostrar, estarão disponíveis duas opções para definir a cor de fundo e do texto.

Esta etiqueta será apresentada para os produtos com estado Não disponível ou Esgotado.

Etiqueta ‘Novo’

Este grupo de opções permite que você personalize uma etiqueta para os produtos considerados como “novos”.

Ao ativar a opção Mostrar, as seguintes ficarão disponíveis:

Limiar

Define a quantidade de dias durante os quais um produto será considerado como “novo”.

Cores

Você encontrará duas opções para definir a cor de fundo e a cor do texto da etiqueta.

Opções de cartão

Ao ativar Estilo de cartão, todos os blocos de produtos do tema serão apresentados com um estilo de “cartão” ou “caixa”. Além disso, as seguintes opções ficarão disponíveis:

Sombra ao passar o cursor

Aplica uma sombra na parte posterior dos blocos quando se passa o cursor sobre eles.

Preenchimento de imagem

Cria uma separação entre a borda do fundo do bloco e a imagem.

Borda

Apresenta uma borda em todos os lados do bloco, para criar uma diferença mais visível entre os produtos, bem como com o conteúdo à sua volta.

Opacidade da borda

Permite ajustar a opacidade (transparência) da borda, se estiver ativada.

Cores do conteúdo

Permite escolher o Pacote de cores para todos os blocos de produtos.

Estilo dos botões de ação

Este grupo de opções aplica-se aos botões de Vista rápida e Lista de desejos que podem ser ativados dentro dos blocos de produtos.

Tamanho do tipo de letra

Permite definir o tamanho dos botões, com as seguintes opções:

• Tamanho base: o tamanho se baseará em cálculos predefinidos diretamente afetados pela opção Tamanho base do tipo de letra localizada em Definições do tema > Tipos de letra > Tamanhos.
• Personalizado: permite ajustar manualmente o tamanho para dispositivos desktop e móveis.

Vista rápida do produto

Esta funcionalidade permite aos seus clientes pré-visualizar os detalhes do produto sem sair da página em que se encontram, tornando a experiência de navegação mais rápida e fácil.

Funcionará e será visível desde que:

• A opção Ativar Vista rápida esteja ativada nas definições do Bloco de produto.
• A opção Ativar Vista rápida esteja ativada nas definições do componente Mapeamento de produtos.

As opções para personalizar como isto se apresentará e se comportará são as seguintes.

Apresentação

Define como e onde os detalhes do produto serão apresentados, com base nas seguintes opções:

• Barra lateral: os detalhes serão apresentados num painel lateral que aparecerá a partir do lado direito do browser.
• Modal: os detalhes serão apresentados dentro de uma janela emergente/modal sobre o conteúdo da loja, centrada vertical e horizontalmente.

Mostrar SKU

Apresenta o SKU do produto. Não será apresentado se o campo SKU estiver vazio na configuração de um produto.

Mostrar Marca

Apresenta a Marca do produto. Não será apresentado se o campo Marca estiver vazio na configuração de um produto.

Nota: A ordem para estes dois atributos será primeiro SKU e depois Marca, e estarão separados por uma linha vertical. Esta linha não será apresentada se um produto não tiver um dos dois.

Mostrar avaliações

Apresenta as estrelas de avaliação e a pontuação média de avaliação para os produtos que têm avaliações de clientes.

Nota: A funcionalidade de Avaliações de produtos no Jumpseller está apenas disponível para planos Pro e superiores. Para mais informações sobre esta funcionalidade, você pode visitar o seguinte artigo.

Mostrar stock

Apresenta a disponibilidade ou estado de stock de um produto.

Mostrar botão de lista de desejos

Apresenta a funcionalidade Lista de desejos. Você pode ler mais sobre ela em esta seção.

Nota: Esta funcionalidade está apenas disponível para lojas cadastradas no plano Pro e superiores. Para mais informações você pode visitar o seguinte artigo.

Mostrar descrição

Apresenta a descrição do produto com todo o seu conteúdo.

Texto do botão

Texto que é apresentado no botão que abre a Lista de desejos. Este texto não será apresentado junto ao ícone, mas é útil para o browser e as tecnologias de assistência.

Cores do conteúdo

Permite escolher um Pacote de cores para a Vista rápida.

Formulário do produto

As opções nesta seção aplicam-se principalmente ao subcomponente Formulário do produto que está disponível dentro dos componentes Modelo de produto e Produto único do tema.

Também se aplica à funcionalidade de Vista rápida, para qualquer uma das suas opções de Apresentação.

Ações do formulário

Seletor de quantidade

Se ativado, o seletor de quantidade do produto ficará visível juntamente com os botões do formulário.

Botão ‘Comprar agora’

Apresenta um botão Comprar agora junto ao de Adicionar ao carrinho, dentro do formulário do produto.

Esta opção é muito útil para agilizar o processo de compra, permitindo aos usuários completar rapidamente a sua compra com o mínimo de passos, melhorando a experiência e potencialmente aumentando as conversões.

Funciona de forma diferente do de Adicionar ao carrinho, pois tem a sua própria funcionalidade que é explicada a seguir:

• Levará os usuários diretamente à página do Carrinho ou Caixa, dependendo do que você tiver definido no painel de administração da sua loja em Definições > Caixa > Preferências > Após adicionar um produto ao carrinho.
• Se um usuário já tiver produtos adicionados ao carrinho, este link criará um novo ID do Processo de compra apenas com o produto em que foi clicado.
• Se o usuário retornar a qualquer outra página (ex. Página inicial) antes de terminar o processo de compra, os produtos anteriores que foram adicionados continuarão lá.

Ao ativar esta opção, as seguintes ficarão disponíveis:

• Definir ‘Comprar agora’ como principal: torna este botão mais relevante do que o de Adicionar ao carrinho, pelo que os estilos serão trocados entre ambos.
• Ocultar ‘Comprar agora’ quando estiver desativado: oculta automaticamente o botão Comprar agora quando a ação não é possível de realizar, como por exemplo quando um produto tem variantes e uma delas está Esgotada.

Opções e variantes

Este grupo de opções permite controlar aspectos relacionados com as opções do produto e as suas variantes dentro do formulário.

Começar na primeira imagem da galeria

Se ativado, a galeria de produtos começará na primeira imagem em vez da imagem associada à primeira variante de produto selecionada.

Apresentação de opções

Define como as variantes de uma opção de produto de tipo opção serão apresentadas:

Botões: As variantes serão apresentadas com um estilo de “botão” ou “pílula”. O estilo variará dependendo do estado de cada variante:

• Não selecionada: terá uma borda à volta.
• Selecionada: terá uma cor de fundo preenchida.
• Esgotada: mostrará uma linha diagonal através e sobre o nome da variante, juntamente com uma opacidade reduzida.

Seletor

As variantes serão apresentadas dentro de um seletor de lista.

Nota: As opções de tipo Cor serão sempre apresentadas com estilo de “botão”.

Etiqueta de disponibilidade para stock do produto

Esta opção está relacionada com o subcomponente Stock disponível dentro dos componentes Modelo de produto e Produto único.

Permite que você mostre ou oculte a etiqueta que pode ser apresentada mencionando a “disponibilidade” de um produto. O texto será o seguinte:

• Disponível em stock para variantes que têm stock.
• Esgotado para produtos com stock igual a zero (0).

Quantidade exata de stock

Altera o comportamento da etiqueta Stock mencionada anteriormente e, em vez de um texto, será apresentada a quantidade de stock da variante, como por exemplo: 10 unidades em stock.

Nota: Para variantes onde o Stock ilimitado está ativado, mostrará sempre o texto “Disponível em stock”.

Ocultar variantes sem stock

Oculta todas as variantes que não têm stock da lista de opções do produto no tema, pelo que não poderão ser selecionadas pelos usuários.

Ocultar localizações sem stock

Oculta todas as Localizações que não têm stock, que são visíveis dentro do painel de Localizações de stock que é apresentado ao clicar no respectivo botão.

Nota: Para mais informações sobre a funcionalidade de Localizações de Stock, você pode ler o seguinte artigo.

Estados

Estilo da mensagem de stock baixo

Esta opção permite definir o estilo da mensagem relacionada com a opção de administração Limiar de stock baixo para produtos, sobre a qual você pode ler mais em este artigo.

Botão de contacto

Apresenta um botão que leva à Página de contacto da loja, dentro da mensagem que é apresentada para os produtos com estados Esgotado ou Não disponível.

Botão de WhatsApp

Apresenta um botão que leva à aplicação WhatsApp em dispositivos móveis e ao WhatsApp web em desktop.

Este botão também é apresentado dentro da mensagem para os produtos com estados Esgotado ou Não disponível.

Nota: O número de WhatsApp ligado a este botão será o adicionado no painel de administração da sua loja, dentro de Definições > Geral > Preferências > Redes sociais.

Preço e impostos

Mostrar indicador de imposto

Apresenta um texto junto ao preço indicando que o valor final considera o imposto.

Se as definições de imposto na caixa indicarem que os produtos já incluem imposto, este texto não será apresentado.

Ao ativá-lo, será apresentada a opção Indicador em maiúsculas que permite que você force que o texto seja apresentado em letras maiúsculas, ex. + IVA.

Mostrar preço sem imposto

Permite mostrar o preço do produto sem incluir impostos.

Marcações de consulta

As seguintes opções apenas funcionarão para produtos de tipo Marcação de consulta.

Mostrar duração

Apresenta os detalhes de Duração definidos nas definições da marcação de consulta, antes do calendário.

Mostrar localização

Apresenta os detalhes de Localização definidos nas definições da marcação de consulta, antes do calendário e após a Duração (se estiver ativada).

Botão de WhatsApp

Esta seção permite que você apresente um botão flutuante de WhatsApp em todos os layouts do tema.

Ao ativar a opção Ativar botão, serão apresentadas as seguintes definições para que você o personalize.

Nota: O botão será apresentado sempre que você o ative aqui e se tiver definido um número de WhatsApp no painel de administração da sua loja em Definições > Geral > Preferências > Redes sociais.

Aparência

Posição

Define a posição em que o botão será apresentado dentro da janela do browser.

Animação

Mostra uma animação de “inclinação” na parte posterior do botão, com base na cor de fundo definida para ele.

Cores

Você encontrará as seguintes opções de cor para personalizar o aspecto do botão:

• Cor do ícone: Cor para o ícone ou logotipo do WhatsApp.
• Cor de fundo: Cor para o fundo do botão.
• Cor de fundo (ao passar o cursor): Cor para o fundo do botão no estado “hover” (ao passar o cursor sobre ele).

Chamada para ação

Este grupo de opções permite que você apresente uma mensagem junto ao botão para encorajar os clientes a clicar nele ou para que tenha mais presença.

Ao preencher o campo de opção Mensagem, as seguintes ficarão disponíveis.

Nota: A posição deste texto dependerá do que você escolher na opção Posição do botão.

Dias para permanecer fechado

Define a quantidade de dias durante os quais esta mensagem não será visível depois de os usuários optarem por a fechar.

Cores

Você encontrará duas opções para definir a cor do fundo e do texto.

Mensagens

Este grupo de opções permite que você defina textos predefinidos que aparecerão na aplicação WhatsApp (móvel) e no WhatsApp web (desktop), dependendo da página em que os usuários se encontram quando clicam no botão.

Contacto

Este texto será apresentado quando os usuários clicarem no botão em qualquer página, exceto na página do produto.

Página do produto

Este texto será apresentado quando os usuários clicarem no botão enquanto se encontram na página do produto da loja.

Notificação de adicionar ao carrinho

Esta seção permite que você apresente uma mensagem notificando os clientes de que os produtos que adicionaram foram efetivamente adicionados ao carrinho.

Esta mensagem substituirá qualquer comportamento e/ou opções de redirecionamento definidas no painel de administração da loja em Definições > Caixa > Preferências.

Ao marcar a opção Ativar, serão apresentadas notificações quando um cliente adicionar um produto.

Se estiver desativado, serão consideradas as seguintes opções do painel de administração:

• Permanecer na mesma página: a página será recarregada e o produto será adicionado ao carrinho.
• Redirecionar para o Carrinho: a página será carregada e levará o cliente diretamente para a Página do carrinho da sua loja (primeiro passo do processo de compra).
• Redirecionar para a Caixa: a página será carregada e levará o cliente diretamente para a Página de caixa da sua loja (segundo passo do processo de compra).

Ao ativá-lo, será apresentada a opção Posição que permite que você escolha a localização onde as notificações serão apresentadas. Isto estará sempre no lado direito da janela do browser.

Janela emergente de verificação de idade

Esta seção permite que você apresente uma janela emergente que estará centrada vertical e horizontalmente dentro do browser.

Embora o seu nome esteja relacionado com as habituais mensagens de verificação de idade, você pode eventualmente usá-la para o que quiser.

Ao marcar a opção Ativar, as seguintes ficarão disponíveis para que você a personalize.

Opções de conteúdo

Dentro deste grupo você encontrará duas opções para adicionar um Título e um Texto, que serão apresentados no início da mensagem.

Botões

Este grupo fornece opções para que você personalize os botões da mensagem.

Botão Aceitar

Texto para o botão com o qual os clientes podem aceitar.

Botão Rejeitar

Texto para o botão com o qual os clientes podem rejeitar ou recusar.

Link de redirecionamento

Permite que você adicione um link para que os clientes sejam redirecionados depois de clicarem no botão Rejeitar.

Aparência

O seguinte grupo fornece opções de cor para que você personalize a mensagem.

• Cor do botão Aceitar: cor de fundo para o botão Aceitar.
• Cor do botão Rejeitar: cor de fundo para o botão Rejeitar.
• Cor de fundo da janela emergente: cor de fundo da mensagem.

Nota: A cor do texto dos botões será ajustada automaticamente com base no contraste.

Artigos

Esta seção permite que você personalize certas definições relacionadas com os Artigos (páginas) dentro do tema.

Os Artigos são os blocos de pré-visualização que apresentam a imagem e o conteúdo de uma página.

Nota: nos referiremos como Conteúdo à informação como Data, Título, Excerto e Link/Botão.

Aparência

Dentro deste grupo você encontrará opções para personalizar o design e aspecto deles dentro do tema.

Ordem do conteúdo

Define a ordem dos elementos que são apresentados dentro da área de conteúdo, que é a que fica imediatamente abaixo ou após a imagem do artigo.

Aqui você pode reordenar as opções arrastando-as para cima e para baixo, para definir a posição que lhe parecer melhor.

Algumas coisas a considerar são:

• A Data e o Excerto serão apresentados se você tiver ativado as respectivas opções dentro do grupo Informação que pode ser encontrado mais abaixo.
• As Categorias serão apresentadas se você tiver ativado a opção Mostrar categorias dentro do grupo Categorias que pode ser encontrado mais abaixo.
• O Link (ou botão) será apresentado se você tiver ativado a opção Mostrar dentro do grupo Link que pode ser encontrado mais abaixo.

Estilo

Define o estilo para todos os Artigos dentro do tema, com base nas seguintes opções:

Clássico: O conteúdo de todos os artigos será empilhado verticalmente, um abaixo do outro e após a imagem do artigo.

Minimalista: O conteúdo de todos os artigos será colocado sobre a imagem. Além disso, será apresentado um elemento de Sobreposição entre a imagem e o conteúdo para gerar um contraste entre ambos.

Mostrar imagem

Define se a imagem dos artigos deve ser apresentada ou não.

Para o caso do estilo Minimalista, a cor do fundo e dos elementos será determinada com base no Pacote de cores que você escolher dentro da opção Cores do conteúdo.

Espaço entre

Permite definir se os artigos terão um espaço ou separação entre eles.

A quantidade de espaço será determinada com base no que você escolher dentro de Definições do tema > Design > Estilos do tema > Espaçamento.

Nota: Esta opção não será visível se Espaçamento for igual a Nenhum.

Cantos arredondados

Permite definir se os artigos terão cantos arredondados ou não. A forma como isto é aplicado variará com base em:

• Para a versão Clássica, será aplicado apenas na imagem.
  • Se o Estilo de cartão estiver ativado, será aplicado tanto ao cartão como à imagem.
  • Se o Estilo de cartão estiver ativado e o Preenchimento de imagem estiver desativado, apenas será aplicado ao cartão.
• Para a versão Minimalista, será aplicado a todo o bloco, bem como ao elemento de Sobreposição.

Estilo de cartão

Ao ativar esta opção, todos os artigos do tema serão apresentados com um estilo de “cartão” ou “caixa”.

Além disso, as seguintes opções ficarão disponíveis:

• Sombra ao passar o cursor: Aplica uma sombra na parte posterior dos blocos quando se passa o cursor sobre eles.
• Preenchimento de imagem: Cria uma separação entre a borda do fundo do bloco e a imagem.
• Borda: Apresenta uma borda em todos os lados do bloco, para criar uma diferença mais visível entre os artigos, bem como com o conteúdo à sua volta.
• Opacidade da borda: Permite ajustar a opacidade (transparência) da borda, se estiver ativada.

Cores do conteúdo

Permite definir um Pacote de cores para todos os Artigos do tema.

Título

Este grupo de opções permite que você personalize o design de todos os títulos dos artigos.

Tamanho

Define o tamanho para todos os títulos com base em cálculos predefinidos diretamente afetados pela opção Tamanho base do tipo de letra localizada em Definições do tema > Tipos de letra > Tamanhos.

Ao escolher Personalizado, você poderá ajustar manualmente o tamanho para dispositivos desktop e móveis de forma independente.

Peso

Define o peso para todos os títulos.

Nota: O peso dependerá das variáveis disponíveis do tipo de letra que você definiu para a opção Tipo de letra principal dentro de Definições do tema > Tipos de letra > Seleção de tipo de letra.

Espaçamento entre letras

Permite ajustar o espaço entre letras.

Tudo em maiúsculas

Permite forçar que todos os títulos sejam apresentados em letras maiúsculas, mesmo que não tenham sido escritos dessa forma: ex. TÍTULO.

Informação

Data

Apresenta a data em que os artigos foram criados.

Também será apresentada a opção Formato de data, para que você possa definir o que for mais adequado:

• Abreviado: ex. 9 de mar. de 2025
• Básico: ex. 9/3/2025
• Data e hora: ex. 9 de março de 2025 às 4:05
• Em data: ex. a 9 de março de 2025
• Padrão: ex. 9 de março de 2025

Excerto

Apresenta uma versão mais curta do conteúdo do artigo.

Ao ativá-lo, a opção Comprimento em caracteres ficará disponível, com a qual você pode definir a quantidade de caracteres a que a descrição será limitada.

Categorias

Mostrar categorias

Ao ativar a opção Mostrar categorias, será apresentada a lista de categorias de páginas relacionadas com cada artigo.

As seguintes opções também ficarão disponíveis para usar:

• Tipo de ícone: permite definir o aspecto do texto para cada categoria.
• Aplicar estilo de distintivo: permite aplicar um estilo de “distintivo” ou “etiqueta” a todas elas.

Apresentar data nos artigos

Permite que você apresente a data de publicação de todos os artigos antes do título.

Ao ativar esta opção, a seguinte ficará disponível:

Link

Mostrar como botão

Apresenta o link de cada artigo como um botão dentro da área de conteúdo de cada artigo.

Se estiver desativado, a imagem e o título continuarão a ser clicáveis para que os clientes possam ir lê-lo.

As seguintes opções também ficarão disponíveis:

• Estilo de contorno: o botão será apresentado com uma borda à volta. Se estiver desativado, o botão terá uma cor de fundo preenchida.
• Ativar seta no botão: apresenta uma seta junto ao texto do botão.

Link externo

Ao clicar num artigo, o link para a sua página individual será aberto num novo separador do browser.

Processo de compra

Esta seção permite que você personalize o design e certas definições que são aplicadas às páginas do processo de compra: Carrinho, Caixa, Revisão e Sucesso.

As opções dentro desta seção terão efeito em todas as páginas do processo se você tiver selecionado Clássico dentro de Caixa > Formulário de caixa.

Para o caso da versão Padrão, as opções aqui apenas serão aplicadas à página do Carrinho.

Cores do conteúdo

Esta opção permite que você escolha um Pacote de cores para as páginas do processo de compra.

Logotipo

Este grupo permite que você adicione um logotipo especificamente para estas páginas através da opção Logotipo personalizado, que substituirá o adicionado em Definições > Geral > Marca, se tiver sido carregado um lá.

Se não for carregado nenhum logotipo, será apresentado o Nome da loja.

Alturas

Você encontrará duas opções para ajustar a altura de qualquer instância de um logotipo para dispositivos desktop e móveis.

Barra lateral do carrinho

A Barra lateral do carrinho é um painel lateral que apresenta o resumo do pedido de um cliente, que inclui o seguinte:

• Lista de produtos que os clientes adicionam ao carrinho, onde podem alterar a quantidade e/ou eliminá-los.
• O Resumo do pedido, como Subtotal, Envio, Descontos, etc.
• Botões de ação, como Ir para a caixa e Ir para o carrinho.

Ao ativar a opção Mostrar barra lateral, as seguintes ficarão disponíveis:

• Mostrar ícone: Permite apresentar um ícone junto ao título da barra lateral.
• Prioridade dos botões: Define qual dos botões disponíveis nesta seção terá maior prioridade. O que você escolher terá um estilo de fundo preenchido, enquanto o outro terá um estilo de contorno.

Página de sucesso

As opções dentro deste grupo permitem que você defina aspectos da página final do processo de compra.

Nota: Apenas terá efeito para a versão do formulário de caixa Clássico.

Mostrar mensagem

Adiciona uma mensagem adicional abaixo da principal que já é apresentada por padrão.

Ao ativar esta opção, as seguintes ficarão disponíveis:

• Texto: Define um texto para a mensagem.
• Link: Apresenta uma ação após o texto para que os clientes interajam, com base nas seguintes opções:
  • Email da localização predefinida: Apresentará o e-mail da Localização definida como Principal/Predefinida dentro de ***Definições > Geral > Localizações***.
  • Email geral: Apresentará o e-mail definido no painel de administração da loja dentro de ***Definições > Geral > Emails***, no final dessa seção.
  • Link para a página de contacto: Apresentará um link com estilo de botão que levará os clientes à página de contacto da sua loja ao clicar.
  • Não mostrar nada: Não apresentará nada após o texto da mensagem.

Tabela de produtos na página de sucesso

Apresenta a lista de produtos que um cliente comprou, no final da página.

Nota: em alguns países isto é obrigatório por leis e regulamentos.

Códigos personalizados

Esta seção e as suas opções permitem que você adicione códigos personalizados e/ou externos ao tema, para que não tenha necessariamente de editar o seu código.

Isto é útil e é usado principalmente para scripts ou ferramentas como:

• Google Analytics
• Google Tag Manager
• Integração manual do Mailchimp
• Facebook Pixel
• TikTok Pixel
• Outras ferramentas de desempenho e/ou métricas como Hotjar, CrazyEgg, etc.

Nota: Para instalar, adicionar e/ou usar ferramentas como Google Analytics, Google Customer Reviews, Facebook pixel e TikTok pixel, o Jumpseller já tem os campos necessários dentro do painel de administração da loja em Definições > Geral > Preferências > Definições de Analytics.

As opções disponíveis são as seguintes:

Código superior de head

Permite que você adicione um código externo no início da etiqueta de abertura <head> do código do tema.

Código inferior de head

Permite que você adicione um código externo no final/fecho da etiqueta <head> do código do tema.

Código superior de body

Permite que você adicione um código externo no início da etiqueta de abertura <body> do código do tema.

Código inferior de body

Permite que você adicione um código externo no final/fecho da etiqueta <body> do código do tema.

Nota: estes campos não suportam o uso de etiquetas liquid. Portanto, se você precisar usar algo assim, terá necessariamente de ser feito diretamente dentro do código do tema através do Editor de código.

Desativar funcionalidades de compra

Esta seção permite que você controle o comportamento de algumas funcionalidades do tema, relacionadas com as opções de compra para os seus clientes.

Desativar preços de produtos

Oculta os preços de todos os produtos do tema.

Nota: Se você não desativar a opção seguinte, os comerciantes ainda poderiam comprar produtos mesmo que os preços não sejam visíveis.

Desativar todas as funcionalidades de compra

Esta opção permite que você desative todas as funcionalidades de compra do tema, como as seguintes:

• Item do carrinho no Cabeçalho: o que está disponível no lado direito do Cabeçalho do tema.
• Botões de adicionar ao carrinho: na página do produto, bem como os botões dos blocos de produtos, mesmo quando estão ativados para ser apresentados dentro das respectivas definições.

Mensagem

Ao ativar a opção anterior, será apresentada uma mensagem em todas as Páginas de produto da loja, que você poderá personalizar com as opções encontradas abaixo.

• Título: define o título da mensagem.
• Texto: define o texto da mensagem.
• Mostrar botão de contacto: Apresenta um botão que levará os clientes à página de contacto da loja ao clicar.
• Mostrar botão de WhatsApp: Apresenta um botão que abrirá a aplicação WhatsApp num dispositivo Móvel ou WhatsApp web num dispositivo desktop.

Nota: O número de WhatsApp ligado a este botão será o adicionado no painel de administração da sua loja, dentro de Definições > Geral > Preferências > Redes sociais. Se não for adicionado nenhum número lá, este botão não será apresentado.

Traduções do tema

Dentro desta seção você encontrará vários grupos e campos que permitirão que você traduza textos dentro do tema.

Isto pode ir desde textos em mensagens até textos dentro de botões e links.

Estes estão divididos em grupos, como por exemplo os seguintes:

• Ações de compra: contém campos relacionados com contextos de compra, como por exemplo o botão Adicionar ao carrinho e o link Comprar agora.
• Mensagens de informação e estado: contém campos relacionados com preços, informação e estados de produtos.
• Relacionados com a conta: contém campos relacionados com os clientes.
• Carrinho e pedido: contém campos relacionados com o processo de compra do carrinho.
• Estados de erro ou vazios: contém campos relacionados com mensagens quando por exemplo não há correspondência num resultado de pesquisa, uma categoria ou a lista de desejos está vazia.