Centro de Apoio

Componentes do Tema Jumpseller

Nesta página

Definições Gerais

O que é um Componente?

Os Componentes são os blocos de construção fundamentais dentro da estrutura de um tema. Eles podem incluir cabeçalho, rodapés, vídeos, banners, sliders, entre outros elementos e seções que são usados para construir e exibir páginas num site. Os Componentes podem ser adicionados, editados e excluídos no painel de Componentes do Editor Visual, e podem ser reutilizados em diferentes templates e layouts para manter a consistência tanto no design quanto na funcionalidade.

Ao usar Componentes, os designers de sites podem criar layouts e funcionalidades complexas de maneira eficiente com pouco ou nenhum conhecimento de programação, já que os componentes individuais podem ser facilmente manipulados e reorganizados. Isto também permite uma manutenção mais fácil do site, pois alterações em um componente serão refletidas em todos os templates onde um componente específico está a ser usado.

Pode facilmente ajustar os componentes com a ajuda do Ajudante do editor de temas, que permite editar configurações, bem como duplicar, ocultar, excluir e também reordenar componentes diretamente na visualização ao vivo.

Também pode clicar no botão “Adicionar componente” para adicionar um componente no local e posição que desejar.

Cada componente tem as suas próprias configurações gerais e alguns deles têm o que chamamos de Subcomponentes, que permitem criar um segundo nível de conteúdo que também pode ser configurado e personalizado individualmente.

Todos os layouts contêm 2 componentes obrigatórios que não podem ser removidos nem ocultados, que são o Cabeçalho e o Rodapé. Estes são exibidos no início e no final de cada layout, respectivamente, os quais cobrimos em detalhe mais adiante nesta página.

O que é um Subcomponente?

Um Subcomponente é um item que pode ser adicionado dentro de um Componente. Por exemplo, o Subcomponente de um Slider é um Slide, enquanto o subcomponente de uma Galeria de logos é um Logo, e assim por diante com outros dentro de um tema Jumpseller.

Todos eles têm opções individuais para personalizar, também pode adicionar quantos quiser, reordená-los, ocultá-los ou excluí-los. Quando duplica ou reutiliza um componente, seus Subcomponentes também serão duplicados.

Para que entenda como organizá-los, confira a lista a seguir:

  • Haverá alguns Componentes nos quais verá um ícone de seta no lado esquerdo do nome. Isto significa que ele tem ou pode ter subcomponentes dentro.
  • Quando passar o rato, a seta irá girar e, ao clicar nela, a lista de subcomponentes será aberta, permitindo que veja todos eles.
  • Pode clicar novamente na seta para fechá-la.
  • Também verá um botão que permitirá adicionar subcomponentes, como por exemplo “Adicionar novo Slide”.

Dentro de cada subcomponente, ao passar o rato sobre o seu nome, 3 opções aparecerão no lado direito, que permitirão que realize as seguintes ações:

Duplicar

Permite que duplique o subcomponente e crie um novo, que conterá exatamente o mesmo conteúdo e informações.

Excluir

Permite que remova o subcomponente da lista.

Nota: As alterações não serão aplicadas na loja até que salve as mudanças. Portanto, por exemplo, se excluiu o subcomponente por engano, pode clicar no botão Desfazer que está disponível no canto superior direito do Editor Visual para adicioná-lo novamente.

Ocultar

Permite que oculte o subcomponente na loja, sem a necessidade de excluí-lo.

Templates de Tema

Um Template é o contêiner no qual todo o design de uma secção é colocado. Os templates disponíveis na Jumpseller são os seguintes:

Início

Esta é a página principal e inicial que é exibida quando um visitante entra no domínio da sua loja, como por exemplo meu-dominio.jumpseller.pt ou meu-dominio.pt.

Produto

Mostra todas as informações dos produtos da sua loja. pode criar quantos templates desejar para exibir as informações de várias maneiras para diferentes tipos de produtos.

Categoria

Destina-se a exibir as coleções de produtos das categorias que pode criar no painel de administração da sua loja, indo a Produtos > Categorias. Aqui também pode criar novos templates e aplicá-los às categorias para diferenciá-las.

Página

Os temas da Jumpseller vêm com 3 templates de página pré-instalados que pode usar e, assim como para Produtos e Categorias, também pode criar muitos outros templates e aplicá-los às suas páginas.

Os templates de página pré-instalados dentro de um tema são os seguintes:

Blog

Exibe todas as páginas categorizadas como Post.

Nota: pode criar quantas categorias de página quiser e relacionar diferentes páginas a elas, como por exemplo Notícias, Dicas e assim por diante.

Post

Exibe as informações de um Post.

Padrão

Este é o template padrão para as suas páginas de conteúdo genérico. Páginas legais como Termos e Condições, Políticas de Privacidade e Políticas de Envio usarão automaticamente este.

Pesquisa

Exibe todos os produtos que correspondem quando os clientes realizam uma pesquisa na sua loja.

Contato

Pode exibir vários detalhes sobre sua loja, como informações de contato, links de redes sociais, locais, um mapa e formulário de contato.

Erro

Usado quando os seus visitantes chegam a uma página que não está disponível, como por exemplo ao inserir uma URL incorreta ou uma que já não existe. Também é usado, por exemplo, quando há um problema no processo de compra da sua loja.

Conceitos básicos

A seguir, explicamos alguns tópicos, palavras e conceitos que serão usados ao longo deste artigo.

Slider/Carrossel

Um Slider ou Carrossel é um tipo de elemento amplamente utilizado dentro dos Componentes, e basicamente exibe Itens ou Subcomponentes numa secção onde estes mostram menos ou mais dependendo do tipo de dispositivo onde a loja está a ser visualizada. Elementos que se tornam ocultos — ou não visíveis — dentro da janela do navegador, poderão ser visualizados através de objetos de navegação como setas e/ou pontos, ou arrastando o conteúdo horizontalmente.

Pacotes de Cores

A maioria dos componentes possui sua própria configuração individual para personalização de cores. Com os Pacotes de Cores, poderá mudar o visual de um componente inteiro com apenas um clique. Essas mudanças aplicam-se a elementos como fundo, textos, links e botões. pode editar, reutilizar, clonar ou criar quantos pacotes quiser. Quando altera uma cor de um pacote, ela será aplicada em todos os lugares onde esse pacote está a ser usado.

Nota: Nem todos os componentes estão disponíveis em todos os temas Jumpseller, assim como nem todas as opções para cada componente ou subcomponente são as mesmas em todos os temas. Ainda assim, o comportamento principal deles é bastante similar e esta documentação ajudará a configurá-los com sucesso.

Dispositivos

Ao longo deste artigo, encontrará comumente o uso dos conceitos de Desktop e Mobile. Mesmo quando nos referimos principalmente a apenas esses dois, é importante também considerar a existência de dispositivos Tablet.

Na tabela a seguir, pode encontrar detalhes das dimensões nas quais consideramos cada dispositivo:

Dispositivo Equivalência de Largura
Mobile Pequeno Igual ou menor que 414 px
Mobile Igual ou menor que 575 px
Tablet Entre 575 px e 991 px
Desktop Igual ou maior que 992 px
Desktop Grande Igual ou maior que 1200 px

Nota: Isto considera principalmente a visualização vertical para dispositivos Mobile e Tablet. Portanto, pode ocorrer que ao girar ou virar um dispositivo horizontalmente, a largura mude e a equivalência em pixels de tamanho diferirá das mencionadas na tabela acima.

Largura

Dentro do artigo, verá a palavra Largura mencionada bastante, e isto porque para vários componentes terá a capacidade de definir e alterar a largura das seções, para que possa criar layouts muito dinâmicos. As convenções de nomenclatura mais comuns que encontrará são, por exemplo, as seguintes:

Largura da Grade

Os temas são construídos e codificados com um layout que restringe e ajusta o conteúdo de várias seções a uma largura específica, para que todos possam parecer e se comportar de forma semelhante e ter um aspecto de design sólido. Para isto, usamos um layout onde todas as seções podem ser divididas dentro de 12 colunas.

Neste caso, Grade significa que o conteúdo se estenderá ao espaço máximo disponível, ou seja, todas as 12 colunas, que são aproximadamente cerca de 1320px.

Largura do Navegador ou Completa

Isto significa que o conteúdo se estenderá, adaptará e redimensionará para a largura máxima disponível do navegador onde a sua loja está a ser vista ou visitada.

Outros tamanhos de largura

Dentro de vários componentes, pode encontrar opções de largura que permitem escolher entre:

  • Pequeno: o conteúdo fica restrito a apenas 6 das 12 colunas disponíveis da grade para dispositivos Desktop, e 7 colunas para dispositivos menores como um Tablet.
  • Médio: o conteúdo fica restrito a apenas 8 das 12 colunas disponíveis da grade para dispositivos Desktop, e 9 colunas para dispositivos menores como um Tablet.
  • Grande: o conteúdo fica restrito a apenas 10 das 12 colunas disponíveis da grade para dispositivos Desktop, e 11 colunas para dispositivos menores como um Tablet.

Nota: Para alguns componentes, também encontrará a opção Extra Grande, que variará e mudará as dimensões mencionadas acima dependendo do caso de uso, opções e contexto do componente onde está disponível. Para dispositivos Mobile, o conteúdo irá expandir-se para toda a largura disponível.

Hover

Neste artigo, usaremos muito a terminologia hover, que basicamente significa a ação de um utilizador ao posicionar o rato/cursor sobre um elemento, objeto ou secção.

Overlay

Em vários componentes, encontrará uma opção que faz referência ao Overlay. Este elemento é basicamente uma camada que está posicionada entre o conteúdo e a imagem de uma secção e permite gerar um maior contraste entre ambos. pode encontrar esta opção em componentes (ou subcomponentes) como Slides, Banners, Big Banner.

Lista de componentes e subcomponentes

Cabeçalho

O componente Cabeçalho está presente na maioria dos layouts de temas, enquanto alguns temas não o exibem nas páginas do processo de compra (Carrinho, Checkout, Revisão do pedido e Sucesso).

Este componente é colocado no início do design do template. O Cabeçalho inclui, em todos os casos, uma barra de pesquisa e o principal menu de navegação.

Alguns temas têm configurações e opções avançadas, como as seguintes:

  • Menus secundários
  • A capacidade de exibir links de redes sociais
  • Detalhes de informações de contato
  • Barras laterais
  • entre outros.

Para ver as personalizações individuais de cada tema, visite a documentação deles.

Rodapé

O componente Rodapé está presente na maioria dos layouts de temas e, assim como o Cabeçalho, alguns temas não o exibem nas páginas do processo de compra.

Este componente é posicionado no final do design do template e é geralmente usado para exibir alguns dos seguintes elementos:

  • o Logotipo (ou nome) da sua loja
  • a descrição da loja
  • menus de navegação
  • links de redes sociais
  • um formulário de newsletter
  • logótipos de métodos de pagamento
  • entre outras opções que variarão dentro dos temas.

Para ver as personalizações individuais de cada tema, visite a documentação deles.

Acordeão

Este componente é usado para exibir informações detalhadas e muito diversas que podem ir desde assuntos ou tópicos como descrições de algumas das funcionalidades da sua loja, perguntas frequentes, detalhes de produtos, etc.

Configurações do componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Largura

Permite-lhe definir a largura do conteúdo para o componente, com base nas seguintes opções:

  • Pequeno: o acordeão será limitado a apenas 6 das 12 colunas da grade do tema.
  • Médio: o acordeão será limitado a apenas 8 das 12 colunas da grade do tema.
  • Grande: o acordeão será limitado a apenas 10 das 12 colunas da grade do tema.
  • Largura da grade: o acordeão cobrirá toda a largura da grade do tema.

Alinhamento do conteúdo

Permite-lhe definir a posição horizontal em que o acordeão será colocado.

Nota: Não haverá qualquer efeito visível se a Largura da grade tiver sido definida na opção anterior.

Ativar itens colapsáveis

Ao ativar esta opção, quando um utilizador clicar num item do acordeão, os restantes fecharão. Pelo contrário, quando desativado, todos os itens permanecerão abertos ao serem clicados.

Primeiro item aberto

Permite definir que o primeiro item do acordeão esteja aberto por defeito ao carregar a página. Como ou quando este primeiro item fecha ou não dependerá do comportamento da opção anterior.

Ativar Título

Permite exibir uma secção de Título antes do acordeão, na qual pode adicionar os seguintes elementos através das suas respetivas opções:

  • Subtítulo: Exibido no início do Título e antes do Título principal.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do link: Texto que será exibido dentro do link.

Margem superior

Permite controlar a margem superior da secção.

Margem inferior

Permite controlar a margem inferior da secção.

Cores do conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do subcomponente

O subcomponente de um Acordeão é chamado Item do acordeão e pode adicionar quantos quiser para fornecer as informações necessárias aos seus clientes. As opções para este subcomponente são as seguintes:

Título

Título ou nome para o item do acordeão.

Nota: Este campo é obrigatório.

Conteúdo

Aqui pode adicionar um texto ou descrição para o item do acordeão.

Nota: Este campo é obrigatório.

Imagem

Permite adicionar uma imagem junto com o conteúdo do item do acordeão.

Tamanho da imagem

Permite definir a largura que a imagem terá de 10% a 100%. Estas percentagens dependerão da largura do item, que é definida pela largura total do acordeão.

Posição da imagem

Permite definir se a imagem será colocada antes ou depois do conteúdo do item.

Banners

O objetivo deste componente é destacar características ou informações sobre a sua loja, com conteúdo que pode ir desde promoções, categorias ou produtos em destaque, entre outros que possa imaginar.

Configurações do componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar, assim como seus subcomponentes (Banners). As opções disponíveis para este componente são as seguintes:

Tipo de exibição

Permite definir como os Banners serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: Os banners serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: Os banners serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens por linha que definir. Em dispositivos móveis, eles serão sempre empilhados verticalmente.

Tipo de conteúdo

Permite definir a maneira como cada Banner irá parecer e quais opções serão consideradas dentro das configurações dos seus respectivos subcomponentes. As opções disponíveis são as seguintes:

  • Imagem + Conteúdo: A(s) imagem(ns) para cada Banner funcionarão como um fundo e o conteúdo (por exemplo, Título) será colocado por cima.
  • Apenas Imagem: Nenhum conteúdo será necessário para adicionar, portanto, elementos como o Título não serão exibidos. Com base nisto, qualquer gráfico que queira adicionar, como textos, formas, etc., terá que ser adicionado dentro da imagem através de softwares como Photoshop, Illustrator, Canva, etc.

Proporção da imagem

Permite escolher o formato das imagens dos seus banners. Isto funciona com base no que é conhecido como Proporção de aspeto, que visa fazer com que todas as imagens pareçam proporcionalmente iguais para que possa mostrar um estilo consistente entre elas. As opções disponíveis são as seguintes:

  • Paisagem: Um formato muito largo e não tão alto, ótimo para fornecer um estilo panorâmico. Utiliza uma proporção de aspecto de 16:9.
  • Retrato: Um formato alto e estreito, ideal para fornecer uma exibição vertical, como pôsteres. Utiliza uma proporção de aspecto de 3:4.
  • Retangular: Um formato equilibrado e ligeiramente mais longo, adequado para a maioria das imagens. Utiliza uma proporção de aspecto de 4:3.
  • Quadrado: Um formato com altura e largura iguais, perfeito para imagens onde ambas as dimensões são iguais. Utiliza uma proporção de aspecto de 1:1.

Nota: As imagens que carregar irão adaptar-se ao formato definido e preencher o espaço disponível posicionando as imagens no centro horizontal e verticalmente. Esta opção só será considerada se tiver escolhido Imagem + Conteúdo na opção Tipo de conteúdo.

Número de colunas em desktop

Permite definir a quantidade de Banners que serão exibidos dentro de uma única linha horizontal, para dispositivos Desktop que tenham largura igual ou superior a 768px.

Nota: Ao escolher a opção 4 colunas, a quantidade de Banners em dispositivos desktop menores será automaticamente alterada para 2 colunas, para preservar uma boa visibilidade do conteúdo dentro deles.

Número de colunas em móvel

Permite definir a quantidade de Banners que serão exibidos dentro de uma única linha horizontal, para dispositivos móveis que tenham largura igual ou inferior a 767px.

Nota: pode encontrar as dimensões ideais nas quais precisa carregar imagens para os Banners nesta secção da página.

Ativar Título

Permite exibir uma secção de Título antes dos banners, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibido no início do Título e antes do Título principal.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem superior

Permite controlar a margem superior da secção.

Margem inferior

Permite controlar a margem inferior da secção.

Cores do conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do subcomponente

O subcomponente de um componente Banners é chamado Banner, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Cores do conteúdo

Permite escolher o Pacote de Cores para cada Banner.

Imagem (desktop)

Permite carregar uma imagem para dispositivos Desktop que tenham largura igual ou superior a 576px.

Imagem (móvel)

Permite carregar uma imagem para dispositivos móveis que tenham largura igual ou inferior a 575px.

Nota: Se carregar apenas uma das duas imagens, ela será exibida em todos os dispositivos.

Overlay da imagem

Permite definir a opacidade (transparência) para o elemento Overlay.

Posição horizontal da imagem

Permite definir a posição horizontal para qualquer uma das imagens acima, apenas quando o Tipo de conteúdo for igual a Imagem + Conteúdo dentro das configurações do componente principal.

Posição vertical da imagem

Permite definir a posição vertical para qualquer uma das imagens acima, apenas quando o Tipo de conteúdo for igual a Imagem + Conteúdo dentro das configurações do componente principal.

Nota: O posicionamento vertical e horizontal é mais visivelmente perceptível quando as imagens são maiores do que a Proporção da imagem definida, como por exemplo se optar por um formato de proporção Retrato e a imagem que carregar tiver uma dimensão retangular.

Posição horizontal do conteúdo

Permite definir como o conteúdo dos banners será posicionado no eixo x (horizontal).

Posição vertical do conteúdo

Permite definir como o conteúdo dos banners será posicionado no eixo y (vertical).

Opções de conteúdo

A seguir, encontrará várias opções para adicionar conteúdo a um banner:

  • Subtítulo: Opcional. Permite exibir um pequeno texto antes do Título do banner.
  • Título: Permite exibir um título para o banner. Tente mantê-lo breve para não sobrecarregar o espaço disponível.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, etc.
  • Texto do link: Texto que será exibido dentro do botão.
  • Mostrar link como botão: Se ativado, o botão será exibido. Se desativado, ele será ocultado, mas o Banner ainda será clicável como um todo.
  • Usar estilo de botão com contorno: Permite exibir o botão de link com uma borda ao redor.
  • Mostrar seta no botão: Permite exibir uma seta ao lado direito do texto do botão.
  • Ativar como link externo: Se ativado, o link será aberto em uma nova aba do navegador.

Nota: Subtítulo, Título e Link como Botão só serão exibidos e visíveis se o Tipo de conteúdo for igual a Imagem + Conteúdo. No caso de Apenas Imagem, só precisará considerar as opções Imagem (desktop e móvel), Link e Texto do link.

Banner Grande

Este componente permite que exiba uma secção cujo propósito é destacar algo sobre a sua loja, como por exemplo:

  • Mostrar uma característica da sua loja.
  • Destacar uma categoria da sua loja que tenha grande relevância.
  • Destacar um produto que deseja que os clientes vejam ou que talvez tenha um desconto muito bom.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Cores do conteúdo

Permite escolher o Pacote de Cores para o componente. Isto basicamente determinará as cores dos textos dentro dele, como o Título.

Largura

Permite definir a largura para todo o componente, com base nas seguintes opções:

  • Grade: restringe a secção com base na mesma largura que todo o tema tem no restante de suas seções, que é 1296px.
  • Médio: expande a secção para uma largura máxima de 1440px.
  • Grande: expande a secção para uma largura máxima de 1600px.
  • Extra grande: expande a secção para uma largura máxima de 2400px.
  • Largura total: expande a secção para a largura máxima do navegador onde a loja está a ser visualizada.

Altura

Permite definir a altura para todo o componente, com base nas seguintes opções:

  • Ajustar ao conteúdo: a altura da secção será determinada com base no conteúdo que adicionar dentro do componente, como Título, Descrição, etc.
  • Pequeno: a altura da secção será um mínimo de 420px.
  • Médio: a altura da secção será um mínimo de 560px.
  • Grande: a altura da secção será um mínimo de 720px.
  • Navegador: a altura da secção ocupará, no mínimo, a altura da janela do navegador onde a sua loja está a ser visualizada, portanto pode variar de dispositivo para dispositivo.

Nota: Referimo-nos a um mínimo, porque a altura da secção variará dependendo da quantidade e/ou extensão do conteúdo que adicionar dentro do componente.

Imagem (desktop)

Permite carregar uma imagem para dispositivos Desktop com largura igual ou superior a 576px.

Imagem (móvel)

Permite carregar uma imagem para dispositivos móveis com largura igual ou inferior a 575px.

Nota: Se carregar apenas uma das duas imagens, ela será exibida em todos os dispositivos.

Overlay da imagem

Permite definir a opacidade (transparência) para o elemento Overlay.

Posição horizontal da imagem

Permite definir a posição horizontal dentro do espaço disponível para qualquer uma das imagens acima.

Posição vertical da imagem

Permite definir a posição vertical dentro do espaço disponível para qualquer uma das imagens acima.

Nota: O posicionamento vertical e horizontal é mais perceptível quando as imagens são maiores que a dimensão da secção.

Alinhamento do conteúdo

Permite definir o alinhamento para o conteúdo do componente.

Posição horizontal do conteúdo

Permite definir a posição para o conteúdo do componente no eixo x.

Opções de conteúdo

A seguir, encontrará várias opções para adicionar conteúdo ao componente:

  • Subtítulo: Opcional. Permite exibir um pequeno texto antes do Título da secção.
  • Título: Permite exibir um título dentro da secção. Tente mantê-lo breve para não sobrecarregar o espaço disponível.
  • Descrição: Opcional. Permite exibir um texto após o Título para fornecer mais contexto sobre o que é a secção.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, etc.
  • Texto do link: Texto que será exibido dentro do botão.
  • Mostrar link como botão: Se ativado, o botão será exibido. Se desativado, ele será ocultado, mas a secção ainda será clicável como um todo.
  • Usar estilo de botão com contorno: Permite mostrar o botão de link com uma borda ao redor.
  • Mostrar seta no botão: Permite exibir uma seta ao lado direito do texto do botão.
  • Ativar como link externo: Se ativado, o link será aberto em uma nova aba do navegador.

Margem superior

Permite controlar a margem superior da secção.

Margem inferior

Permite controlar a margem inferior da secção.

Nota: As dimensões ideais sugeridas para a(s) imagem(ns) que pode carregar podem ser encontradas nesta secção da página.

Formulário de Contato

Este componente permite que exiba o Formulário de Contato da loja em diferentes layouts e templates do tema. Há algumas considerações que precisa estar ciente ao usá-lo:

  • É possível ter apenas 1 por página. Por exemplo, não pode adicioná-lo duas vezes na página inicial da sua loja.
  • Quando os utilizadores clicam no botão Enviar do formulário e a mensagem é enviada com sucesso, eles serão redirecionados para a Página de Contato da sua loja, então certifique-se de que este componente também esteja adicionado e visível nesse layout.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Ativar Título

Permite exibir uma secção de Título antes do formulário de contato, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título principal.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do link: Texto que será exibido dentro do link.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Informações de Contato

Este componente permite que exiba uma secção com os detalhes de contato da localização definida como Principal/Padrão no painel de administração da sua loja, que pode configurar acedendo a Definições > Checkout > Locations.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Ativar Título

Permite exibir uma secção de Título antes dos detalhes de contato, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título principal.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do link: Texto que será exibido dentro do link.

Alinhamento do Conteúdo

Permite definir o alinhamento para os detalhes de contato do componente. O alinhamento para a secção de Título do componente é definido no painel de administração da sua loja, acedendo a Temas > Editor Visual > Theme Definições > Headings.

Mostrar email de contacto

Permite exibir o email da localização.

Mostrar telefone de contacto

Permite exibir o número de telefone da localização.

Mostrar número do WhatsApp

Permite exibir o número do WhatsApp definido no painel de administração da sua loja, acedendo a Definições > Geral > Preferências > Redes Sociais.

Mostrar endereço principal da loja

Permite exibir o endereço da localização. Este será um link para o Google Maps, que abrirá em uma nova aba do navegador para dispositivos Desktop ou no aplicativo do Google Maps em dispositivos móveis.

Mostrar links de redes sociais

Permite exibir os links de redes sociais que podem ser adicionados no painel de administração da sua loja, acedendo a Definições > Geral > Preferências > Redes Sociais.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Mapa de Contacto

Este componente permite que exiba um Mapa estilizado do Google Maps, que mostrará o endereço da localização definida como Principal/Padrão no painel de administração da sua loja, que pode configurar acedendo a Definições > Checkout > Localizações.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Ativar Título

Permite exibir uma secção de Título antes do mapa, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título principal.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do link: Texto que será exibido dentro do link.

Tamanho do Mapa

Permite definir a largura do Mapa, com base nas seguintes opções:

  • Largura da Grade: O mapa cobrirá toda a largura da grade do tema.
  • Pequena: o mapa será limitado a apenas 6 das 12 colunas da grade do tema.
  • Média: o mapa será limitado a apenas 8 das 12 colunas da grade do tema.
  • Grande: o mapa será limitado a apenas 10 das 12 colunas da grade do tema.

Posição do Mapa

Permite definir a posição horizontal em que o Mapa será colocado.

Nota: Isto não terá efeito se a Largura da Grade tiver sido definida na opção anterior.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Categorias

Este componente permite que adicione vários itens ou blocos, que podem ser categorias da sua loja, e pode personalizar atributos e opções para cada um deles.

Configurações do componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Subtítulo

Opcional. Permite exibir um subtítulo no início da secção, antes do Título.

Título

Permite exibir um Título dentro da secção.

Descrição

Permite exibir um texto após o Título para fornecer mais contexto sobre o que a secção trata.

Link

Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.

Texto do link

Texto que será exibido dentro do link.

Tipo de secção

Permite definir como os itens serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: Os itens serão exibidos dentro de um Carrossel, com elementos de navegação para controlá-lo.
  • Grade: Os itens serão exibidos em colunas dentro de linhas horizontais.

Blocos a Exibir

Permite definir quantos itens serão exibidos para dispositivos Desktop, o que variará com base no que selecionou na opção Tipo de secção. Em ambos os casos e para dispositivos Tablet e Mobile, a exibição mudará automaticamente para preservar uma boa e adequada visualização do conteúdo dentro deles.

Se optar por escolher Carrossel, os itens serão exibidos com base nas definições da tabela a seguir:

Largura do Dispositivo Quantidade de Itens
Igual ou maior que 1201px Quantidade definida
Igual ou menor que 1200px 6 itens
Igual ou menor que 991px 5 itens
Igual ou menor que 767px 4 itens
Igual ou menor que 575px 3 itens
Igual ou menor que 414px 2 itens
Igual ou menor que 320px 1 item

Se optar por escolher Grade, os itens serão exibidos com base nas definições da tabela a seguir:

Valor da Opção Mobile
(Igual ou menor que 575px) 		Tablet
(Entre 576px e 767px) 		Desktop Pequeno
(Entre 768px e 991px) 		Desktop Grande
(Igual ou maior que 992px)
Igual ou maior que 5 1 coluna 2 colunas 3 colunas 6 colunas
4 1 coluna 2 colunas 4 colunas 4 colunas
3 1 coluna 2 colunas 3 colunas 3 colunas
2 1 coluna 2 colunas 2 colunas 2 colunas

Nota: Ao escolher Grade nas configurações do componente, valores nesta opção superiores a 7 não terão efeito.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de secção:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade dos blocos: Permite definir o tempo que levará para a opção anterior funcionar.
  • Ativar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Ativar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.

Configurações do subcomponente

O subcomponente de um componente Categorias é chamado Bloco de Categoria, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Categoria

Aqui deve selecionar a categoria para o item, o que adicionará automaticamente atributos como o nome e o link.

Título

Permite substituir o nome original da categoria selecionada.

Imagem do Ícone

Permite carregar uma imagem de ícone, que será posicionada dentro da caixa quadrada que exibe antes do título.

Nota: Sugerimos que carregue uma imagem em formatos como SVG, WebP ou PNG.

Imagem de Fundo

Permite carregar uma imagem que funcionará como fundo dentro da caixa quadrada do bloco.

Nota: Esta imagem de fundo será posicionada atrás do ícone.

Ativar Overlay

Permite exibir um elemento Overlay entre o ícone e a imagem de fundo para gerar contraste entre ambos.

Opções de Cor

A seguir, pode encontrar várias opções para personalizar a aparência do item, com base no seguinte:

  • Personalizar cores: Quando ativado, as opções a seguir terão efeito.
  • Cor do Título: Permite definir a cor para o título do item.
  • Cor do Título (hover): Permite definir a cor para o título no estado de hover.
  • Cor de Fundo: Permite definir a cor para o fundo da caixa quadrada do bloco. não verá nenhuma mudança visível se uma imagem de fundo tiver sido carregada.
  • Cor do Overlay: Permite definir a cor para o elemento Overlay, se ativado.

Contador

Este componente permite que adicione uma secção que exibirá um Relógio de Contagem Regressiva ou Timer, o que pode ser muito útil para, por exemplo:

  • Aumentar a Urgência e Impulsionar Conversões: Ao exibir um timer de contagem regressiva, os clientes sentem uma sensação de urgência para agir antes que a oferta expire. Isto frequentemente leva a decisões mais rápidas e a um aumento nas taxas de conversão.
  • Aumentar a Visibilidade de Ofertas Especiais: Destacar um título claro, subtítulo e descrição permite que destaque promoções especiais, fazendo com que elas se destaquem na página e garantindo que os clientes não percam.
  • Melhorar o Marketing Sensível ao Tempo: Perfeito para vendas relâmpago, descontos por tempo limitado ou promoções de eventos, o timer ajuda a alinhar seus esforços de marketing com prazos específicos.
  • Aumentar as Taxas de Clique: A inclusão de um link garante que os utilizadores interessados possam navegar facilmente para a página relevante, direcionando tráfego para o destino desejado.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e comportar-se. As opções disponíveis para este componente são as seguintes:

Data do Contador

Obrigatório. Aqui precisa de definir a Data na qual o timer irá parar, por exemplo: 2023/06/30 (ano / mês / dia). Quando o contador atingir zero (0), a secção será automaticamente ocultada e não ficará visível.

Nota: As barras (/) NÃO devem ter espaços antes ou depois.

Hora do Contador

Opcional. Aqui pode adicionar, além da Data acima, uma hora na qual o timer irá parar. Exemplo: 23:59:59 (hora : minutos : segundos).

Nota: Os dois-pontos (:) NÃO devem ter espaços antes ou depois.

Título do Contador

Título que é exibido acima do Relógio de Contagem Regressiva. Por padrão, exibirá o texto "Ofertas terminam em".

Subtítulo

Opcional. Texto que pode ser exibido antes do Título da secção (não do Título do Contador).

Título

Opcional, mas ideal. Texto que pode ser exibido no lado esquerdo da secção, junto e abaixo do Subtítulo.

Link

Permite adicionar um link (botão) para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.

Nota: Considere adicionar um link para uma página, idealmente uma categoria, onde as ofertas estão efetivamente disponíveis.

Texto do Link

Texto que será exibido dentro do link (botão).

Nota: Considere adicionar um texto que convide os utilizadores a clicarem nele.

Cor de Fundo

Permite definir a cor de fundo para a secção.

Link - Cor de Fundo

Permite definir a cor para o fundo do link (botão).

Nota: Ambas as opções de cor adaptarão automaticamente as cores dos textos dentro do componente, aplicando um contraste adequado.

Código Personalizado

Este componente permite que utilize aplicações externas ou seu design personalizado. Aqui pode incluir códigos, ferramentas, plugins, aplicativos, etc., que precisa exibir no componente.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Código Personalizado

Dentro deste campo, pode adicionar o código que deseja exibir em sua loja.

Nota: Este campo não suporta o uso de tags liquid.

Código Personalizado (next-gen)

Nota: Este componente está disponível apenas em temas Next-Gen, como o Simple.

Use este componente para quaisquer aplicações externas ou o seu design personalizado. Aqui pode incluir códigos, ferramentas, plugins, aplicativos, etc., que precisa exibir no componente.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Código

Dentro deste campo, pode adicionar o código que deseja exibir na loja.

Nota: Este campo não suporta o uso de etiquetas liquid.

Largura

Permite definir a largura do conteúdo da secção, com base nas seguintes opções:

  • Largura da Grade: O conteúdo irá estender-se até a largura máxima da grade do tema, que é de 1296px.
  • Largura Total: O conteúdo expande-se até a largura máxima do navegador onde a loja está a ser visualizada.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Conteúdo Dinâmico

Este componente permite que crie layouts dinâmicos em sua loja por meio do uso de imagens ou vídeos e conteúdo, nos quais pode definir como esses elementos serão exibidos dentro da secção.

Para melhor entender como funciona, referiremo-nos a Conteúdo para as opções Subtítulo, Título, Texto e Link; e nos referiremos a Mídia para as Imagens ou o Vídeo que pode adicionar nas configurações do componente.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Ordem das Colunas

Permite definir a ordem para o Conteúdo e a Mídia, e como eles serão apresentados dentro do componente para dispositivos Desktop, com base nas seguintes opções:

  • Conteúdo / Mídia: O Conteúdo será posicionado à esquerda, enquanto a Mídia à direita.
  • Mídia / Conteúdo: A Mídia será posicionado à esquerda, enquanto o Conteúdo à direita.

Nota: ambas as seções usarão 6 colunas do total de 12 colunas dentro da grade do tema.

Respeitar Ordem das Colunas no Mobile

Como a opção anterior define a ordem para dispositivos Desktop, esta permite respeitar essa ordem também para dispositivos Mobile.

Imagem (desktop)

Permite carregar uma imagem para dispositivos Desktop com largura igual ou superior a 576px.

Imagem (móvel)

Permite carregar uma imagem para dispositivos Mobile com largura igual ou inferior a 575px.

Nota: Se carregar apenas uma das duas imagens, ela será exibida em todos os dispositivos.

Vídeo

Permite adicionar um vídeo do YouTube ou Vimeo copiando e colando o Código de Incorporação nas opções de compartilhamento de cada plataforma.

Nota: Uma vez que adiciona um Vídeo, ele terá predominância, então mesmo se carregar qualquer uma das imagens disponíveis acima, elas não serão exibidas.

Proporção do Vídeo

Permite definir o formato em que o vídeo será exibido, baseado nas seguintes opções:

  • 4 / 3: Basicamente um formato retangular.
  • 16 / 9: Basicamente um formato paisagem.

Alinhamento do Conteúdo

Permite definir o alinhamento para o Conteúdo do componente.

Posição Vertical

Permite definir como o Conteúdo e a Mídia serão alinhados com base no eixo y, onde o elemento mais alto determinará a posição do outro.

Opções de Conteúdo

A seguir, encontrará várias opções para o Conteúdo do componente:

  • Subtítulo: Opcional. Permite exibir um pequeno texto antes do Título.
  • Título: Permite exibir um título, que tem mais relevância do que o restante em termos de tamanho.
  • Texto: Permite adicionar um texto ou descrição para fornecer mais contexto sobre o que a secção trata.
  • Botão de Link: Permite adicionar um link estilizado como botão para qualquer conteúdo da loja, como categorias, produtos, páginas, etc.
  • Texto do Link: Texto que será exibido dentro do botão.
  • Usar Estilo de Botão com Contorno: Permite exibir o botão com uma borda ao redor.
  • Mostrar Seta no Botão: Permite exibir uma seta ao lado direito do texto do botão.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

O subcomponente de um componente Conteúdo Dinâmico é chamado Bloco de Conteúdo, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Conteúdo

Aqui deve adicionar o conteúdo que deseja exibir, como Subtítulo, Título, Texto e Link.

Mídia

Aqui pode adicionar a mídia que deseja exibir, como Imagens ou Vídeo.

Alinhamento do Conteúdo

Permite definir o alinhamento específico para o conteúdo dentro do subcomponente.

Opções de Cor

A seguir, pode encontrar várias opções para personalizar a aparência do subcomponente, com base no seguinte:

  • Personalizar Cores: Quando ativado, as opções a seguir terão efeito.
  • Cor do Título: Permite definir a cor para o título do subcomponente.
  • Cor do Texto: Permite definir a cor para o texto do subcomponente.
  • Cor do Link: Permite definir a cor para os links dentro do subcomponente.

Categoria em Destaque

Este componente permite exibir produtos de qualquer categoria da sua loja.

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Categoria em Destaque

Obrigatório. Aqui deve selecionar uma categoria para que o componente exiba os produtos.

Quantidade de Itens para Exibir

Permite definir a quantidade de produtos que serão exibidos dentro do componente. A ordem em que os produtos serão exibidos será baseada na ordem que eles possuem na configuração da categoria, então precisará editar a lista de produtos da categoria, considerando o limite que definiu nesta opção.

Você pode ver os produtos que pertencem a uma categoria específica seguindo uma das maneiras detalhadas a seguir:

Opção 1

  1. Vá para Produtos > Todos os produtos para ver a lista de produtos da sua loja.
  2. No topo da lista, encontrará três opções. Clique na do meio e use o filtro disponível ali.
  3. Pesquise pela categoria que deseja para exibir seus produtos.
  4. Então pode reordená-los clicando e segurando o rato para arrastá-los para cima ou para baixo.

Opção 2

  1. Vá para Produtos > Categorias e escolha a que deseja clicando em seu nome.
  2. Dentro da página da categoria, no lado direito da barra de ferramentas superior, clique nos três pontos.
  3. Um menu suspenso será aberto e verá o link Ver produtos, que o levará para a mesma página da Opção 1, mas já filtrada pela categoria que escolheu.

Tipo de Exibição

Permite definir como os produtos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os produtos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: os produtos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens a exibir que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Nota: A quantidade de produtos por linha horizontal para dispositivos Desktop e Mobile pode ser modificada no painel de administração da loja, acedendo a Temas > Editor Visual > Configurações do Tema > Bloco de Produto. Para mais detalhes sobre isto, pode ler este artigo onde está totalmente explicado.

Ativar Título

Permite exibir uma secção de Título antes dos produtos, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Por padrão, exibe o nome da Categoria selecionada, que pode substituir preenchendo este campo.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite mostrar ou esconder um link que levará para a Categoria selecionada ao ser clicado.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade dos Blocos: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

O subcomponente de um componente Categorias é chamado Bloco de Categoria, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Categoria

Aqui deve selecionar a categoria para o item, o que adicionará automaticamente atributos como o nome e o link.

Título

Permite substituir o nome original da categoria selecionada.

Imagem do Ícone

Permite carregar uma imagem de ícone, que será posicionada dentro da caixa quadrada que exibe antes do título.

Nota: Sugerimos que carregue uma imagem em formatos como SVG, WebP ou PNG.

Imagem de Fundo

Permite carregar uma imagem que funcionará como fundo dentro da caixa quadrada do bloco.

Nota: Esta imagem de fundo será posicionada atrás do ícone.

Ativar Overlay

Permite exibir um elemento Overlay entre o ícone e a imagem de fundo para gerar contraste entre ambos.

Opções de Cor

A seguir, pode encontrar várias opções para personalizar a aparência do item, com base no seguinte:

  • Personalizar Cores: Quando ativado, as opções a seguir terão efeito.
  • Cor do Título: Permite definir a cor para o título do subcomponente.
  • Cor do Texto: Permite definir a cor para o texto do subcomponente.
  • Cor do Link: Permite definir a cor para os links dentro do subcomponente.

Produtos em Destaque

Este componente permite que exiba produtos que foram marcados como Destaque na loja. A seguir, explicamos como pode destacar e reordená-los:

Destacar seus produtos

  1. Vá para Produtos > Todos os produtos e escolha um produto da sua loja clicando em seu nome e/ou imagem.
  2. Uma vez dentro da página de configuração do produto, no painel lateral direito encontrará a opção chamada Produto em Destaque.
  3. Marque a caixa de seleção disponível e salve a alteração.

Lista de produtos em destaque

  1. Vá para Produtos > Todos os produtos e antes da lista de produtos encontrará três opções. Clique na que está mais à direita.
  2. Um menu suspenso será exibido e selecione a opção chamada Destaque.
  3. A página irá carregar e filtrar apenas os produtos que estão marcados.
  4. Aqui pode reordená-los clicando e segurando o rato para arrastá-los para cima ou para baixo.
  5. Para remover um produto dessa lista, basta acessar suas configurações e desmarcar a caixa de seleção que foi explicada acima.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Quantidade de Itens para Exibir

Permite definir a quantidade de produtos que serão exibidos dentro do componente. A ordem em que os produtos serão exibidos será baseada na ordem que eles possuem na lista de produtos em destaque explicada acima, então precisará editar essa lista, considerando o limite que definiu nesta opção.

Tipo de Exibição

Permite definir como os produtos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os produtos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: os produtos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens a exibir que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Nota: A quantidade de produtos por linha horizontal para dispositivos Desktop e Mobile pode ser modificada no painel de administração da loja, acedendo a Temas > Editor Visual > Configurações do Tema > Bloco de Produto. Para mais detalhes sobre isto, pode ler este artigo onde está totalmente explicado.

Ativar Título

Permite exibir uma secção de Título antes dos produtos, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

O subcomponente de um componente Produtos em Destaque é chamado Bloco de Produto, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Produto

Aqui deve selecionar o produto para o item, o que adicionará automaticamente atributos como o nome e o link.

Título

Permite substituir o nome original do produto selecionado.

Imagem do Ícone

Permite carregar uma imagem de ícone, que será posicionada dentro da caixa quadrada que exibe antes do título.

Nota: Sugerimos que carregue uma imagem em formatos como SVG, WebP ou PNG.

Imagem de Fundo

Permite carregar uma imagem que funcionará como fundo dentro da caixa quadrada do bloco.

Nota: Esta imagem de fundo será posicionada atrás do ícone.

Ativar Overlay

Permite exibir um elemento Overlay entre o ícone e a imagem de fundo para gerar contraste entre ambos.

Opções de Cor

A seguir, pode encontrar várias opções para personalizar a aparência do item, com base no seguinte:

  • Personalizar Cores: Quando ativado, as opções a seguir terão efeito.
  • Cor do Título: Permite definir a cor para o título do subcomponente.
  • Cor do Texto: Permite definir a cor para o texto do subcomponente.
  • Cor do Link: Permite definir a cor para os links dentro do subcomponente.

Avaliações em Destaque

Nota: Este componente funciona em conjunto com o recurso Solicitar Avaliações de Produtos, que está disponível apenas para planos PRO e superiores. Se não possui um desses planos, ele não funcionará mesmo quando o componente for adicionado ao seu tema. pode ler mais sobre isto neste artigo.

Este componente permite que exiba avaliações que seus clientes adicionaram aos seus produtos e que foram marcadas como Destaque. Para que isto funcione corretamente, siga os próximos passos:

  1. Primeiro, precisa ter ativado o email de Avaliações de Produtos, o que pode ser feito no painel de administração da sua loja acedendo a Configurações > Geral > Emails.
  2. Depois disto, e uma vez que já tenha recebido avaliações, vá para Produtos > Avaliações para ver a lista completa.
  3. Clique em qualquer uma delas para acessar as configurações e, uma vez dentro, no lado direito, encontrará a caixa de seleção que permitirá destacar a avaliação.

Nota: Considere que, para que uma avaliação destacada seja exibida dentro do componente, o status dela precisa ser Publicado.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Quantidade de Itens para Exibir

Permite definir a quantidade de avaliações que serão exibidas dentro do componente. A ordem em que elas serão exibidas será pelas mais recentes que foram marcadas como Publicado e Destaque.

Tipo de Exibição

Permite definir como as avaliações serão exibidas dentro do componente, com base nas seguintes opções:

  • Carrossel: as avaliações serão exibidas dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: as avaliações serão exibidas em colunas, uma ao lado da outra horizontal e verticalmente com base na quantidade de itens a exibir que definir. Em dispositivos móveis, elas sempre serão empilhadas verticalmente.

Nota: A quantidade de avaliações por linha horizontal para dispositivos Desktop e Mobile pode ser modificada no painel de administração da loja, acedendo a Temas > Editor Visual > Configurações do Tema > Bloco de Produto. Para mais detalhes sobre isto, pode ler este artigo onde está totalmente explicado.

Ativar Título

Permite exibir uma secção de Título antes das avaliações, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Nota: Isto não afetará as avaliações se a opção Aplicar estilo de cartão às avaliações estiver ativada.

Configurações do Subcomponente

O subcomponente de um componente Avaliações em Destaque é chamado Bloco de Avaliação, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Avaliação

Aqui deve selecionar a avaliação para o item, o que adicionará automaticamente atributos como o nome e o link.

Título

Permite substituir o nome original da avaliação selecionada.

Imagem do Ícone

Permite carregar uma imagem de ícone, que será posicionada dentro da caixa quadrada que exibe antes do título.

Nota: Sugerimos que carregue uma imagem em formatos como SVG, WebP ou PNG.

Imagem de Fundo

Permite carregar uma imagem que funcionará como fundo dentro da caixa quadrada do bloco.

Nota: Esta imagem de fundo será posicionada atrás do ícone.

Ativar Overlay

Permite exibir um elemento Overlay entre o ícone e a imagem de fundo para gerar contraste entre ambos.

Opções de Cor

A seguir, pode encontrar várias opções para personalizar a aparência do item, com base no seguinte:

  • Personalizar Cores: Quando ativado, as opções a seguir terão efeito.
  • Cor do Título: Permite definir a cor para o título do subcomponente.
  • Cor do Texto: Permite definir a cor para o texto do subcomponente.
  • Cor do Link: Permite definir a cor para os links dentro do subcomponente.

Imagem

Este componente permite que exiba uma imagem, uma para Desktop e outra para dispositivos Móveis, com algumas opções para definir como ela se parece:

Imagem (desktop)

Permite carregar uma imagem para dispositivos Desktop com largura igual ou superior a 576px.

Imagem (móvel)

Permite carregar uma imagem para dispositivos Móveis com largura igual ou inferior a 575px.

Nota: Se carregar apenas uma das duas imagens, ela será exibida em todos os dispositivos.

Largura

Permite definir a largura na qual a imagem do componente será restrita.

Nota: pode ler sobre como cada opção dentro desta se comporta nesta secção, na parte Outras tamanhos de largura.

Posição horizontal do conteúdo

Permite definir a posição em que a imagem será colocada no eixo “x” (horizontal).

Nota: Isto não será visível se tiver selecionado Largura da Grade ou Largura Total na opção Largura.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente, que basicamente aplicará uma cor no fundo.

Instagram

Este componente permite que exiba as últimas publicações da conta Instagram que pode ser conectada à sua loja.

Se ainda não a conectou, siga os próximos passos para realizá-lo:

  1. Primeiro, certifique-se de que está com o login efetuado no Instagram que deseja conectar no mesmo navegador onde tem o painel de administração da sua loja aberto.
  2. No painel de administração da sua loja, vá para Configurações > Geral > Preferências > Redes Sociais e clique no botão “Editar informações” que está dentro desta secção.
  3. Na nova página para a qual será direcionado, clique no botão Login no Instagram que está mais abaixo, no final.
  4. será redirecionado para uma nova página onde precisará aceitar e autorizar a conexão.
  5. Uma vez aprovada a conexão, suas publicações serão exibidas automaticamente no componente.

Nota: Pode acontecer que, às vezes, sua conta do Instagram seja desconectada, o que ocorre principalmente por motivos de segurança. Sempre que isto acontecer, pode simplesmente seguir os passos acima e conectá-la novamente.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Número de publicações no Instagram

Permite definir a quantidade máxima de publicações a serem exibidas dentro do componente.

Tipo de Exibição

Permite definir como as publicações serão exibidas dentro do componente, com base nas seguintes opções:

Carrossel

As publicações serão exibidas dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele. A quantidade de publicações visíveis para esta opção mudará dependendo da largura do navegador, com base nas definições da tabela a seguir:

Largura do Dispositivo Quantidade de Publicações Visíveis
Igual ou maior que 1201px 6 publicações
Igual ou menor que 1200px 5 publicações
Igual ou menor que 991px 4 publicações
Igual ou menor que 767px 3 publicações
Igual ou menor que 414px 2 publicações

Grade

As publicações serão exibidas em colunas, uma ao lado da outra horizontal e verticalmente. A maneira como as colunas se organizam para esta opção mudará dependendo do que escolher na opção Número de Publicações no Instagram e da largura do navegador, com base nas definições da tabela a seguir:

Nº de Publicações no Instagram >= 992px
(Desktop) 		>= 768px
(Tablet) 		>= 576px
(Tablet Pequeno) 		<= 575px
(Mobile) 		<= 414px
(Mobile Pequeno)
6 publicações 6 colunas / 1 linha 3 colunas / 2 linhas 3 colunas / 2 linhas 3 colunas / 2 linhas 2 colunas / 3 linhas
8 publicações 8 colunas / 1 linha 4 colunas / 2 linhas 4 colunas / 2 linhas 2 colunas / 4 linhas 2 colunas / 4 linhas
12 publicações 6 colunas / 2 linhas 4 colunas / 3 linhas 3 colunas / 4 linhas 3 colunas / 4 linhas 2 colunas / 6 linhas

Remover Espaço entre Publicações

Permite definir se as publicações terão um espaço entre elas, o que pode proporcionar uma maneira de fazê-las parecerem diferentes dependendo do estilo que está à procura para aplicar ao tema.

Título

Texto que aparece antes do nome da conta do Instagram que é exibido automaticamente dentro do componente (antes das publicações) uma vez que a conecta.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Produtos Selecionados

Este componente permite que exiba qualquer produto da sua loja, independentemente de atributos como seu status (por exemplo, Destaque) ou relação com qualquer categoria. Ele funciona por meio de um subcomponente chamado Produto da Loja, que explicamos a seguir.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Quantidade de Itens para Exibir

Permite definir a quantidade de produtos que serão exibidos dentro do componente. A ordem em que os produtos serão exibidos será determinada pela ordem em que os adiciona.

Nota: Se adicionar mais produtos do que a quantidade definida, eles não serão visíveis dentro do componente.

Tipo de Exibição

Permite definir como os produtos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os produtos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: os produtos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens a exibir que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Nota: A quantidade de produtos por linha horizontal para dispositivos Desktop e Mobile pode ser modificada no painel de administração da loja, acedendo a Temas > Editor Visual > Configurações do Tema > Bloco de Produto. Para mais detalhes sobre isto, pode ler este artigo onde está totalmente explicado.

Ativar Título

Permite exibir uma secção de Título antes dos produtos, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

Como mencionado anteriormente, o subcomponente de um componente Produtos Selecionados é chamado Produto da Loja. pode adicionar quantos quiser, mas apenas os que estiverem dentro do limite definido na opção Quantidade de Itens para Exibir do componente serão visíveis.

Dentro da lista de componentes, verá o botão “Adicionar novo Produto da Loja”, que adicionará um subcomponente. Ao clicar no nome dele, verá apenas uma opção dentro de suas configurações chamada Produto, na qual precisará escolher o produto que deseja exibir.

Nota: pode ler mais sobre Subcomponentes na esta secção da página.

Últimas Publicações do Blog

Este componente permite que exiba uma coleção ou páginas agrupadas da sua loja. Mesmo quando nos referimos principalmente a um “Blog”, na realidade pode estender e usar isto para mostrar basicamente qualquer coisa que desejar.

Para entender como este componente está conectado às páginas dentro da loja, deve estar ciente do seguinte:

  • Ao acessar o painel de administração da loja em Personalização > Páginas > Todas as Páginas, notará no lado esquerdo uma secção chamada Categorias.
  • Aqui pode criar quantas categorias quiser, mas ao criar, as lojas Jumpseller já vêm com duas: Blog e Post.
    • Blog para os propósitos do componente não é relevante.
    • Post é a categoria que permite vincular várias páginas, para que todas sejam exibidas dentro do mesmo layout (página do Blog).
  • No lado direito encontrará a lista de páginas, que também já vem com duas criadas: Blog e Postagem do Blog.
    • Blog é a página que agrupará e exibirá todas as Publicações.
    • Posts do Blog é a usada para exibir o conteúdo da publicação ou artigo.

A seguir, explicamos como pode vincular uma página a uma categoria, neste caso, para o Blog:

  • Vá para a lista de páginas e crie uma nova página ou entre em uma que já possui.
  • Dentro das configurações da página, adicione seu respectivo conteúdo, como Título e corpo.
  • Em seguida, role a página até encontrar a secção Propriedades, na qual precisará se concentrar em duas opções:
    1. Categorias: Aqui deve escolher a categoria chamada Post.
    2. Template: Aqui selecione o template que tem o mesmo nome da categoria, para que herde os componentes de estilo e layout necessários.
  • Em seguida, salve suas alterações e pode clicar no link “Ver” no canto superior direito para ver como ficou.
  • Além disto, se não alterou o permalink da página Blog, pode visualizá-la acedendo a suas configurações e clicando no link “Ver” ou abrindo uma nova aba do navegador e digitando a URL da página, como por exemplo dominio-da-loja.jumpseller.com/blog.
  • Uma vez lá, poderá ver todas as Publicações que estão vinculadas ao seu Blog.

Nota: pode realizar essas ações e seguir os mesmos passos para conseguir algo semelhante em qualquer outra página que deseje criar, como por exemplo uma página de “Notícias”.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Categoria da Página

Permite definir a categoria com base na qual as páginas (publicações) serão exibidas dentro do componente. Este menu suspenso mostrará todas as categorias que criou no painel de administração da sua loja.

Quantidade de Itens para Exibir

Permite definir a quantidade de publicações que serão exibidas dentro do componente. A ordem em que as publicações serão exibidas será determinada pela ordem definida nas configurações da página Blog. Para saber como controlar isto, siga estes passos:

  1. Vá para Páginas > Todas as Páginas no painel de administração da sua loja.
  2. No painel de Categorias no lado esquerdo, passe o rato sobre o nome da categoria Post.
  3. Dois ícones serão exibidos no lado direito do nome da categoria. Clique no primeiro e uma janela pop-up será aberta.
  4. Lá encontrará duas opções. A que se chama Ordem da Categoria permitirá definir como as publicações serão exibidas dentro do componente, o que também afetará a página Blog.
  5. Escolha a opção que desejar e clique no botão Atualizar para salvar a alteração ou no botão Cancelar para descartá-la.

Tipo de Exibição

Permite definir como as publicações serão exibidas dentro do componente, o que será afetado pelas opções Número de colunas no desktop e Número de colunas no mobile, com base nas seguintes opções:

Carrossel

As publicações serão exibidas dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, reprodução automática ou se deseja mostrar elementos de navegação nele. A quantidade de publicações visíveis para esta opção mudará dependendo da largura do navegador, com base nas definições da tabela a seguir:

Largura do Dispositivo Quantidade de publicações Visíveis
Igual ou maior que 992px Número de colunas no desktop
Igual ou menor que 991px 2 publicações
Igual ou menor que 575px Número de colunas no mobile
Igual ou menor que 414px 1 postagem

Grade

As publicações serão exibidas em colunas, uma ao lado da outra horizontal e verticalmente. A maneira como as colunas se organizam para esta opção será de acordo com as definições da tabela a seguir:

Desktop
(Igual ou maior que 992px) 		Tablets
(Igual ou maior que 576px) 		Mobile
(Igual ou menor que 575px) 		Mobile Pequeno
(Igual ou menor que 414px)
Número de colunas no desktop 2 colunas Número de colunas no mobile 1 coluna

Ativar Título

Permite exibir uma secção de Título antes das publicações, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc. Por padrão, será para a página Blog.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Últimos Produtos

Este componente permite que exiba os produtos mais recentes que foram criados e/ou adicionados. A ordem em que eles são exibidos é automática e será baseada na ordem em que os criou dentro do painel de administração da sua loja.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Quantidade de Itens para Exibir

Permite definir a quantidade de produtos que serão exibidos dentro do componente.

Tipo de Exibição

Permite definir como os produtos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os produtos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: os produtos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens a exibir que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Nota: A quantidade de produtos por linha horizontal para dispositivos Desktop e Mobile pode ser modificada no painel de administração da loja, acedendo a Temas > Editor Visual > Configurações do Tema > Bloco de Produto. Para mais detalhes sobre isto, pode ler este artigo onde está totalmente explicado.

Ativar Título

Permite exibir uma secção de Título antes dos produtos, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Divisor de Linha

Este componente permite que adicione uma linha para criar uma divisão mais notória entre componentes e seções dentro do tema. As opções para este componente são as seguintes:

Largura

Permite definir a largura que a linha terá, com base nas seguintes opções:

  • Largura da Grade: A linha se estenderá até a largura máxima da grade do tema, que é de 1296px.
  • Largura Total: A linha se expandirá até a largura máxima do navegador onde a loja está a ser visualizada.

Espessura da Linha

Permite ajustar a espessura da linha, para que possa torná-la mais notória, se necessário.

Opacidade da Linha

Permite controlar a opacidade (transparência) da linha. A cor será baseada na opção Texto Principal do Pacote de Cores do componente.

Margem Superior

Permite controlar a margem interna superior da secção.

Margem Inferior

Permite controlar a margem interna inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Localizações

Este componente permite que exiba as Localizações que adicionou no painel de administração da sua loja em Configurações > Checkout > Localizações. As opções para personalizar este componente são as seguintes:

Ativar Título

Permite exibir uma secção de Título antes das localizações, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Localizações a Exibir

Permite definir qual tipo de localizações serão exibidas dentro do componente, com base nas seguintes opções:

  • Todas as localizações: a lista inteira de localizações que adicionou será exibida.
  • Localizações de retirada: apenas aquelas marcadas como Retirada serão exibidas.

Nota: O recurso Retirada Local está disponível apenas para ser usado quando estiver a utilizar a versão 2 do Checkout, que pode verificar indo em Configurações > Checkout > Preferências > Versão do Checkout no painel de administração da sua loja.

Quantidade de Localizações por Linha

Permite definir a quantidade de colunas para as localizações serem exibidas dentro do componente. A forma como elas se organizam nos diferentes dispositivos será baseada nas definições da tabela a seguir:

Dispositivo / Valor da Opção 3 colunas 2 colunas 1 coluna
Desktop
(Igual ou maior que 992px) 		3 colunas por linha horizontal 2 colunas por linha horizontal 1 coluna, empilhadas verticalmente
Tablets
(Igual ou maior que 576px) 		2 colunas por linha horizontal 2 colunas por linha horizontal 1 coluna, empilhadas verticalmente
Mobile
(Igual ou menor que 575px) 		1 coluna, empilhadas verticalmente 1 coluna, empilhadas verticalmente 1 coluna, empilhadas verticalmente

Alinhamento do Conteúdo

Permite definir o alinhamento para o conteúdo de todas as localizações dentro do componente.

Opções de Informação da Localização

As seguintes opções permitem definir quais detalhes das localizações serão visíveis dentro do componente:

  • Mostrar email da localização: exibir ou não o email de todas as localizações.
  • Mostrar telefone da localização: exibir ou não o telefone de todas as localizações.
  • Mostrar endereço da localização: exibir ou não o endereço de todas as localizações.
  • Mostrar detalhes da localização: permite exibir um link “Ver mais detalhes” no final que abrirá uma janela pop-up, que exibirá todos os detalhes da localização.
  • Mostrar mapa da localização: permite exibir ou não um Mapa do Google dentro da janela pop-up, com base no endereço de cada localização.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Galeria de Logos

Este componente permite que exiba uma coleção de imagens, que podem ser, por exemplo, logos das marcas que vende em sua loja, empresas parceiras, produtos em destaque ou basicamente qualquer coisa que deseje comunicar através do uso de imagens.

Funciona adicionando um subcomponente chamado Logo, para o qual pode adicionar quantos precisar.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Tipo de Exibição

Permite definir como os Logos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os logos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: os logos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens a exibir que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Número de Colunas no Desktop

Permite definir como os logos serão exibidos em dispositivos Desktop, que consideram aqueles com largura igual ou superior a 768px, com base no que definiu na opção Tipo de Exibição, conforme segue:

Carrossel

Esta opção considerará a quantidade de logos dentro da visualização do Carrossel:

Largura do Dispositivo Quantidade de Logos
Igual ou maior que 1201px Quantidade definida
Igual ou maior que 992px 4 logos
Igual ou maior que 768px 3 logos

Grade

Esta opção organizará os logos em colunas dentro de linhas horizontais, com base na quantidade selecionada:

Valor da Opção Desktop
(Igual ou maior que 992px) 		Tablets
(Igual ou maior que 768px)
8 8 colunas 4 colunas
7 7 colunas 4 colunas
6 6 colunas 4 colunas
5 5 colunas 4 colunas
4 4 colunas 4 colunas
3 3 colunas 3 colunas
2 2 colunas 2 colunas

Número de Colunas no Mobile

Permite definir como os logos serão exibidos em dispositivos Mobile, que consideram aqueles com largura igual ou inferior a 767px, com base no que definiu na opção Tipo de Exibição, conforme segue:

Carrossel

Esta opção considerará a quantidade de logos dentro da visualização do Carrossel:

Largura do Dispositivo Quantidade de Logos
Igual ou menor que 575px Quantidade definida
Igual ou maior que 414px Sempre 2 logos

Grade

Esta opção organizará os logos em colunas dentro de linhas horizontais, com base na quantidade selecionada:

Valor da Opção Mobile
(Igual ou menor que 767px)
3 3 colunas
2 2 colunas
1 1 coluna

Ativar Título

Permite exibir uma secção de Título antes dos logos, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título: Permite definir o título para o componente.
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções só serão consideradas e aplicadas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

Como mencionado anteriormente, o subcomponente para a Galeria de Logos é chamado Logo e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Imagem

Permite carregar a imagem ou logo.

Link

Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc., caso em que o Logo será clicável.

Texto do Link

Texto que será visível quando um utilizador passar o rato sobre a imagem.

Ativar como link externo

Se ativado, o link será aberto em uma nova aba do navegador.

Newsletter

Este componente permite que os utilizadores se inscrevam na sua loja, o que os criará como Clientes dentro do banco de dados do painel de administração da sua loja. pode revisar a lista completa indo para Clientes > Todos os Clientes.

Uma vez que um utilizador se inscreva, podem ocorrer algumas ações ou gatilhos:

  • O cliente será criado no banco de dados apenas com o email.
  • Se tiver a opção Conta habilitada ativada, dentro de Configurações > Geral > Emails > Emails Transacionais, o utilizador receberá um email para confirmar a inscrição.
  • Os utilizadores poderão criar uma conta de cliente clicando no link Redefinir Minha Senha disponível na Página de Login da sua loja (por exemplo, sua-loja.jumpseller.com/customer/login). Eles receberão este link uma vez que confirmem a inscrição.
  • Se tiver a opção Novo cliente ativada, dentro de Configurações > Geral > Emails > Emails do Administrador, receberá uma notificação quando o utilizador confirmar a inscrição com sucesso.
  • Se tiver a opção CAPTCHA no registro do cliente ativada, dentro de Configurações > Geral > Proteção contra Spam, os utilizadores terão obrigatoriamente que completar uma tarefa que será solicitada pela ferramenta Google reCAPTCHA para se inscreverem.

Nota: Mesmo sendo um pouco óbvio, um utilizador não poderá inscrever-se mais de uma vez com o mesmo email, já que as contas dos clientes são gerenciadas por esse valor.

Se deseja fazer mais e aproveitar o que este componente oferece, pode, por exemplo, instalar o App Mailchimp para sincronizar a lista de clientes e enviar emails de marketing. pode ler mais sobre isto nos seguintes links:

As opções disponíveis para personalizar este componente são as seguintes:

Alinhamento do Conteúdo

Permite definir o alinhamento para o conteúdo do componente (Título, Descrição) e o formulário de newsletter.

Nota: Isto afetará a posição em que o formulário está posicionado.

Título

Permite adicionar um título para o componente, que será exibido no início da secção.

Descrição

Permite adicionar um texto ou descrição abaixo do título. Pode ser útil para dar contexto e/ou incentivar os utilizadores a se inscreverem, por exemplo, fornecendo alguns benefícios-chave para fazê-lo.

Placeholder do Campo de Email

Permite definir o texto que é visível dentro do campo de email.

Texto do Botão

Permite definir o texto para o botão do formulário.

Texto de Declaração

Permite exibir um texto abaixo do formulário, que pode ser útil, por exemplo, para fornecer informações aos utilizadores de que eles estão aceitando os termos da sua loja ao se inscreverem, ou qualquer outra coisa que deseje.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Produto Selecionado

Este componente permite que destaque um produto específico ou individual da sua loja com todos os seus detalhes, como nome, opções e variantes, atributos como SKU e marca, estoque, preço, etc. Pode ser realmente útil, por exemplo, para exibir um produto-chave da sua loja ou um que tenha uma oferta especial.

Para os propósitos deste componente, nos referiremos como Conteúdo à coluna que contém todos os detalhes do produto, como Nome, Preço, Formulário, etc.; Por outro lado, nos referiremos como Galeria àquela que exibe a(s) imagem(ns) do produto.

Nota: Este componente pode ser adicionado em qualquer layout do tema, com exceção do layout Produto.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Produto

Neste campo, deve selecionar o produto que deseja destacar.

Inverter ordem das colunas no Desktop

Permite reverter a ordem das colunas do componente, caso em que o Conteúdo se moverá para o lado esquerdo da secção, enquanto a Galeria se moverá para o direito.

Nota: Esta alteração será aplicada apenas para dispositivos com largura igual ou superior a 768px. Para dispositivos com largura inferior a isto, o Conteúdo será automaticamente posicionado abaixo da Galeria.

Alinhamento do Conteúdo

Permite definir o alinhamento para o Conteúdo do componente.

Opções da Galeria

O seguinte conjunto de opções permitirá que personalize certos aspectos da Galeria do componente:

Dimensão da Imagem

Permite definir como as imagens serão apresentadas dentro do componente, com base nas seguintes opções:

  • Paisagem: Uma forma muito larga e não tão alta, ótima para proporcionar um estilo panorâmico. Utiliza uma proporção de aspecto de 16:9.
  • Retrato: Uma forma alta e estreita, ideal para proporcionar uma exibição vertical, como cartazes. Utiliza uma proporção de aspecto de 3:4.
  • Retangular: Uma forma equilibrada e ligeiramente mais longa, que é adequada para a maioria das imagens. Utiliza uma proporção de aspecto de 4:3.
  • Quadrado: Uma forma com altura e largura iguais, perfeita para imagens onde ambas as dimensões são iguais. Utiliza uma proporção de aspecto de 1:1.

Exibição da Imagem

Permite definir como as imagens dos seus produtos se adaptarão ao espaço disponível relacionado à dimensão selecionada acima, com base nas seguintes opções:

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

Mostrar miniaturas da Galeria

Permite exibir uma Galeria secundária com miniaturas de todas as imagens do produto juntamente com a principal, com as quais os utilizadores poderão clicar para visualizá-las. Ela também terá setas esquerda e direita para controlá-la.

Nota: Se esta opção estiver desativada, a Galeria principal exibirá setas dentro dela para que os utilizadores possam controlá-la e ver mais imagens.

Posição das miniaturas da Galeria no Desktop

Permite definir a posição das miniaturas da Galeria em dispositivos Desktop que possuem largura igual ou superior a 992px. Para dispositivos com largura inferior a isto, elas serão automaticamente colocadas abaixo da principal.

Ativar zoom nas imagens

Permite que os utilizadores possam ampliar as imagens do produto ao "passarem o rato" sobre elas. Para isto, é importante que considere carregar imagens em uma dimensão maior do que a exibida na vitrine.

Imagem do produto fixa

Permite que a imagem fique fixa no topo do Header do tema (se também estiver fixo) e/ou no Navegador, de forma que siga os utilizadores enquanto eles rolam a página para baixo.

Você pode ler mais sobre o tamanho e as dimensões adequadas para as imagens na esta secção da página.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Nota: Isto será aplicado a toda a secção, mas não afetará o produto e seus detalhes se a opção Aplicar estilo de Card estiver ativada.

Aplicar Estilo de Card

Permite aplicar um estilo de "card" ou "caixa" ao contêiner principal que contém todas as informações do produto. As seguintes opções estarão disponíveis apenas se isto estiver ativado:

  • Ativar borda do Card: exibe uma borda (ou linha) ao redor do contêiner principal da secção.
  • Opacidade da borda do Card: permite ajustar a opacidade (transparência) da borda.
  • Cores do conteúdo do Card: permite escolher o Pacote de Cores para o produto, que será aplicado dentro do contêiner principal.

Subcomponentes do Produto Selecionado

O componente Produto Selecionado funciona permitindo que escolha qual conteúdo deseja exibir nele, através de vários subcomponentes que são os detalhes do produto. Para cada um deles, terá a capacidade de editar, mover, ocultar e excluir. Os disponíveis para uso são os seguintes:

Nota: Alguns desses subcomponentes não terão opções em suas configurações, pois são usados principalmente para exibir informações. Portanto, a forma como eles aparecem e/ou se comportam pode ser gerenciada na secção Configurações do Tema do Editor Visual, já que são opções gerais que afetam outras páginas, componentes ou layouts dentro do tema.

Atributos

Permite exibir o SKU e a Marca do produto, juntamente com outras opções para personalizar como eles aparecerão e se comportarão:

Nota: Se um produto não tiver nenhum desses atributos, nada será exibido. Por outro lado, se um produto tiver ambos os atributos e optar por exibi-los, eles serão separados por uma linha vertical. A ordem será sempre primeiro o SKU e depois a Marca.

Mostrar antes da imagem do produto no Mobile

Por padrão, os Atributos serão posicionados abaixo/depois da Galeria do produto em dispositivos Mobile. Esta opção permite alterar o comportamento e colocá-los antes.

Mostrar SKU do produto

Permite definir se o SKU do produto será exibido ou não.

Mostrar texto antes do SKU

Permite exibir um texto antes do SKU do produto, como por exemplo "SKU: 1234".

Mostrar marca do produto

Permite definir se a Marca do produto será exibida ou não.

Título

Este subcomponente permite exibir o nome do produto, que possui as seguintes opções para personalizá-lo:

Mostrar antes da imagem do produto no Mobile

Por padrão, o Nome/Título será posicionado abaixo/depois da Galeria do produto em dispositivos Mobile. Esta opção permite alterar o comportamento e colocá-lo antes.

Mostrar título em maiúsculas

Permite forçar o título a ser exibido em todas as letras maiúsculas, mesmo quando não foi escrito ou definido dessa forma. Exemplo: NOME DO PRODUTO

Preço

Este subcomponente permite exibir o preço do produto, que possui as seguintes opções para personalizá-lo:

Mostrar antes da imagem do produto no Mobile

Por padrão, o Preço será posicionado abaixo/depois da Galeria do produto em dispositivos Mobile. Esta opção permite alterar o comportamento e colocá-lo antes.

Exibição do preço

Permite definir como os preços serão exibidos quando o produto tiver um desconto visível (promoção), com base nas duas seguintes opções:

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

Mostrar etiqueta de desconto

Permite exibir uma etiqueta de desconto "tag" ou "label" no lado direito do preço. As cores para esta etiqueta serão das que pode definir em Temas > Editor Visual > Configurações do Tema > Cores.

Nota: a etiqueta de desconto também será afetada pela opção Exibição do preço.

Mostrar mensagem de limite de data da promoção

Permite exibir uma mensagem abaixo do(s) preço(s) mencionando que há uma data em que o desconto (promoção) expira ou termina. Isto só funcionará se a promoção tiver um Limite de Data definido em suas configurações.

Estrelas de Avaliação do Produto

Este subcomponente permite exibir a pontuação de avaliação junto com as estrelas de avaliação para um produto que possui avaliações de clientes.

Nota: O recurso Solicitar Avaliações de Produtos está disponível apenas para planos PRO e superiores. Portanto, mesmo quando tiver este subcomponente adicionado, mas não tiver o plano necessário, ele não exibirá nada. O mesmo acontecerá com um produto que não possui avaliações.

Estoque

Este subcomponente permite exibir o Estoque do produto. Como isto será exibido e se comportará é explicado em este artigo.

Formulário do Produto

Este subcomponente permite exibir o Formulário com o qual os utilizadores podem adicionar o produto ao carrinho.

Como ele será exibido e se comportará, e quais são suas opções e elementos, está explicado em este artigo.

Localizações de Estoque do Produto

Este subcomponente permite exibir um botão, que ao ser clicado abrirá um painel lateral do lado direito do navegador. Este painel mostrará a lista de localizações e seus respectivos status de estoque.

As opções para personalizá-lo são as seguintes:

  • Título: permite definir o título que é visível no painel lateral que é aberto ao clicar no botão.
  • Ícone do botão: permite definir o ícone no lado esquerdo do texto do botão.
  • Texto do botão: texto que é exibido dentro do botão que abre o painel.

Outras opções para este subcomponente são tratadas em Temas > Editor Visual > Configurações do Tema > Formulário do Produto, que são explicadas em detalhes no artigo a seguir.

Descrição

Este subcomponente permite exibir a Descrição do produto que pode ser adicionada a todos os produtos na sua loja.

As opções para personalizá-lo são as seguintes:

Título

Permite exibir um título antes da descrição.

Colapsar descrição

Permite restringir a altura da descrição do produto, com base no limite de altura da opção abaixo. Isto é útil se seus produtos tiverem descrições longas que, por exemplo, geram um espaço em branco notável entre as colunas da Galeria e do Conteúdo.

Quando ativado, um link com o texto "Leia mais" será exibido no final da descrição. Ao clicar, a descrição se expandirá para sua altura máxima disponível, caso em que o texto do link mudará para "Leia menos". Ao clicar novamente, a descrição será recolhida.

Limite de altura para colapso

Permite definir a altura na qual a descrição será colapsada, apenas se a opção anterior estiver ativada.

Lista de Desejos

Este subcomponente permite exibir o link com o qual os utilizadores podem adicionar um produto à sua lista de desejos na lista de contas de clientes.

Nota: Os utilizadores só poderão adicionar um produto à lista de desejos uma vez que estejam logados.

Compartilhar Produto

Este subcomponente permite exibir uma lista de links que permitirão que os utilizadores compartilhem o produto.

As opções para personalizá-lo são as seguintes:

  • Título: permite definir o título que acompanha os links e para o botão que é exibido em dispositivos Mobile.
  • Mostrar Facebook: permite que o produto seja compartilhado no Facebook.
  • Mostrar 𝕏: permite que o produto seja compartilhado no 𝕏 (anteriormente Twitter).
  • Mostrar WhatsApp: permite que o produto seja compartilhado através do WhatsApp.
  • Mostrar Email: permite que o produto seja compartilhado através de Email, o que abrirá o aplicativo ou software no dispositivo em que o utilizador está a visitar a loja.
  • Mostrar Copiar para a área de transferência: permite que os utilizadores copiem a URL do produto para a área de transferência do dispositivo, para que possam compartilhá-la da maneira que quiserem.

Importante: Em dispositivos Mobile, isto mudará para um botão único, que ao ser clicado abrirá as opções nativas de compartilhamento do dispositivo do utilizador.

Divisor de Linha

Este subcomponente permite adicionar uma linha divisória, o que pode ser útil para gerar uma separação mais clara entre o conteúdo do componente principal.

As opções para personalizá-lo são as seguintes:

  • Espessura da Linha: Permite ajustar a espessura da linha, para que possa torná-la mais notória, se necessário.
  • Opacidade da Linha: Permite controlar a opacidade (transparência) da linha. A cor será baseada na opção Texto Principal do Pacote de Cores do componente.
  • Margem Superior: Permite controlar a margem interna superior da secção.
  • Margem Inferior: Permite controlar a margem interna inferior da secção.

Slider

Este componente é um dos tipos de seções mais utilizados e aplicados em websites. Ele permite que adicione e exiba vários subcomponentes dentro dele, que são chamados de Slide, com vários conteúdos dentro deles e várias opções para personalizá-los.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Largura

Permite definir a largura máxima que a secção terá, com base nas seguintes opções:

  • Largura da Grade: limita a secção com base na mesma largura que todo o tema tem nas demais seções, que é de 1296px.
  • Médio: expande a secção para uma largura máxima de 1440px.
  • Grande: expande a secção para uma largura máxima de 1600px.
  • Extra grande: expande a secção para uma largura máxima de 2400px.
  • Largura Total: expande a secção para a largura máxima do navegador onde a loja está a ser visualizada.

Nota: O tamanho das imagens que pode enviar dentro de cada Slide variará dependendo da opção que escolheu aqui. Estas são explicadas em detalhes na esta secção da página.

Tipo de Conteúdo

Permite definir a maneira como cada Slide irá parecer e quais opções serão consideradas nas configurações de seus respectivos subcomponentes. As opções disponíveis são as seguintes:

  • Imagem + Conteúdo: A(s) imagem(ns) para cada Slide funcionará como um fundo e o conteúdo (por exemplo, Título) será colocado sobre ele.
  • Apenas Imagem: Não será necessário adicionar conteúdo, portanto, elementos como o Título não serão exibidos. Com base nisto, qualquer gráfico que gostaria de adicionar, como textos, formas, etc., terá que ser adicionado na construção da imagem através de softwares como Photoshop, Illustrator, Canva, etc.

Nota: Ao escolher Apenas Imagem, só precisará considerar as seguintes opções nas configurações de um Slide: Imagem (desktop e mobile), Link e Texto do Link.

Altura

Permite definir a altura de todo o componente, com base nas seguintes opções:

  • Ajustar ao conteúdo: a altura da secção será determinada com base no conteúdo que adicionar dentro do componente, como Título, Descrição, etc.
  • Pequena: A altura da secção será de no mínimo 420px.
  • Média: A altura da secção será de no mínimo 560px.
  • Grande: A altura da secção será de no mínimo 720px.
  • Navegador: A altura da secção será, no mínimo, a altura da janela do navegador onde a sua loja está a ser visualizada, podendo variar de dispositivo para dispositivo.

Nota 1: Referimo-nos a um mínimo, porque a altura da secção variará dependendo da quantidade e/ou do comprimento do conteúdo que adicionar dentro do componente.

Nota 2: O tamanho das imagens que pode enviar dentro de cada Slide variará dependendo da opção que escolheu aqui. Estas são explicadas em detalhes na esta secção da página.

Configurações do Slider

As seguintes opções permitem que personalize certos atributos do componente:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Configurações do Subcomponente

Como mencionado antes, o subcomponente para um componente Slider é chamado Slide, e pode adicionar quantos quiser. As opções para este subcomponente são as seguintes:

Imagem (desktop)

Permite carregar uma imagem para dispositivos Desktop que possuem largura igual ou superior a 576px.

Imagem (mobile)

Permite carregar uma imagem para dispositivos Mobile que possuem largura igual ou inferior a 575px.

Nota: Se carregar apenas uma das duas imagens, ela será exibida em todos os dispositivos.

Sobreposição de Imagem

Permite definir a opacidade (transparência) para o elemento Overlay.

Posição Horizontal da Imagem

Permite definir a posição horizontal para qualquer uma das imagens acima, apenas quando o Tipo de Conteúdo for igual a Imagem + Conteúdo nas configurações principais do componente.

Posição Vertical da Imagem

Permite definir a posição vertical para qualquer uma das imagens acima, apenas quando o Tipo de Conteúdo for igual a Imagem + Conteúdo nas configurações principais do componente.

Nota: O posicionamento vertical e horizontal é mais perceptível quando as imagens são mais largas ou grandes do que a Largura e/ou Altura definidas.

Alinhamento do Conteúdo

Permite definir o alinhamento para o conteúdo dos slides.

Posição Horizontal do Conteúdo

Permite definir como o conteúdo dos slides será posicionado dentro do eixo x (horizontal).

Opções de Conteúdo

A seguir, encontrará várias opções para adicionar conteúdo a um Slide:

  • Subtítulo: Opcional. Permite exibir um pequeno texto antes do Título.
  • Título: Permite exibir um título. Tente torná-lo breve para que não ocupe muito espaço disponível.
  • Descrição: Permite exibir um texto após o título e antes do botão de link (se visível), para fornecer mais contexto sobre o que é o Slide. Tente torná-lo breve para que não ocupe muito espaço disponível.

Opções de Link

A seguir, encontrará várias opções para personalizar o Link do Slide:

  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, etc.
  • Texto do Link: Texto que será exibido dentro do botão.
  • Mostrar link como botão: Se ativado, o botão será exibido. Se desativado, ele será ocultado, mas o Slide ainda será clicável como um todo.
  • Usar estilo de botão contorno: Permite exibir o botão do link com uma borda ao redor.
  • Mostrar seta no botão: Permite exibir uma seta no lado direito do texto do botão.
  • Ativar como link externo: Se ativado, o link será aberto em uma nova aba do navegador.

Nota: Subtítulo, Título, Descrição, Sobreposição e Link como Botão só serão exibidos e visíveis se o Tipo de Conteúdo for igual a Imagem + Conteúdo. No caso de Apenas Imagem, só precisará de considerar as opções Imagem (desktop e mobile), Link e Texto do Link.

Cores do Conteúdo

Permite escolher o Pacote de Cores para cada Slide.

Recursos da Loja

Este componente permite que exiba conteúdo variável, semelhante ao que pode ser feito com o componente Conteúdo Dinâmico, mas com a diferença fundamental de que a Imagem e o Conteúdo serão sempre empilhados verticalmente, um abaixo do outro, ao escolher Grade na opção Tipo de secção das configurações do componente.

Funciona adicionando múltiplos subcomponentes, chamados Recurso, nos quais pode adicionar imagens e conteúdo (por exemplo, Título, descrição).

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Opções de Título

As seguintes opções e elementos podem ser exibidos dentro da secção de Título que vai antes do conteúdo do componente. Se todos eles estiverem vazios, a secção não será visível.

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Tamanho das Imagens

Permite definir como as imagens de cada Recurso serão exibidas, com base nas seguintes opções:

  • Original: as imagens serão exibidas com a dimensão original na qual as enviou.
  • Redimensionar: as imagens serão redimensionadas ou adaptadas para um formato de 520x300 px.

Tipo de secção

Permite definir como os Recursos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os recursos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.
  • Grade: os Recursos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens por linha que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Para a opção Grade, a Imagem(s) será posicionada no lado esquerdo, enquanto o Conteúdo no lado direito. Esse comportamento mudará para o oposto em blocos pares (por exemplo, 2, 4, 6, etc.) e apenas para dispositivos Desktop. Para dispositivos Mobile, a(s) Imagem(ns) sempre serão exibidas primeiro.

Número de Colunas no Desktop

Permite definir quantos Recursos serão exibidos em dispositivos Desktop, com base nas definições da tabela a seguir:

Largura do Dispositivo Quantidade de Colunas
Igual ou maior que 992px Quantidade definida
Igual ou maior que 768px 2 colunas
Menor que 767px 1 coluna

Nota: Esta opção só será aplicada se o Tipo de secção for igual a Carrossel.

Opções de Cores

As seguintes opções permitem que personalize certas cores dentro do componente:

  • Cor de fundo: permite definir a cor para o fundo do componente.
  • Cor de fundo do botão do bloco: permite definir a cor para o fundo de todos os botões dos blocos.
  • Cor de fundo do botão do bloco (hover): permite definir a cor para o fundo de todos os botões dos blocos no estado hover.

Nota: A cor do texto dos botões será ajustada automaticamente com base no contraste adequado que eles precisarão.

Configurações do Carrossel

As seguintes opções serão consideradas e aplicadas apenas se tiver selecionado Carrossel na opção Tipo de secção:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.

Configurações do Subcomponente

Como mencionado antes, o subcomponente para o componente Recursos da Loja é chamado Recurso, que nos referiremos como Bloco, e pode adicionar quantos quiser para fornecer as informações necessárias para seus clientes. As opções para este subcomponente são as seguintes:

Imagem (desktop)

Permite carregar uma imagem para dispositivos Desktop que possuem largura igual ou superior a 576px.

Imagem (mobile)

Permite carregar uma imagem para dispositivos Mobile que possuem largura igual ou inferior a 575px.

Nota: Se carregar apenas uma das duas imagens, ela será exibida em todos os dispositivos.

Título

Permite definir o Título do bloco, que será exibido após a(s) imagem(ns).

Descrição

Permite adicionar um texto para fornecer mais contexto sobre o que é o bloco. Exibe após o título.

Link para página

Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.

Texto do Link

Texto que será exibido dentro do link.

Testemunhos

Este componente permite que adicione Testemunhos personalizados e manuais de clientes, que podem ser usados para construir confiança entre seus clientes fornecendo feedback e/ou comentários que já recebeu sobre vários tópicos.

Funciona adicionando múltiplos subcomponentes, chamados Testemunhos, aos quais nos referiremos como Bloco para fins práticos.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Tipo de Exibição

Permite definir como os blocos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os blocos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, reprodução automática ou se deseja mostrar elementos de navegação nele.
  • Grade: os blocos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens por linha que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Alinhamento do Conteúdo

Permite definir o alinhamento para todos os blocos dentro do componente.

Tamanho da Imagem do Avatar

Permite definir o tamanho para a imagem do avatar que pode enviar em cada subcomponente, com base nas seguintes opções:

  • Pequeno: a imagem será exibida com dimensões de 50x50 px.
  • Médio: a imagem será exibida com dimensões de 75x75 px.
  • Grande: a imagem será exibida com dimensões de 100x100 px.

Mostrar Ícone de Citação

Permite exibir um ícone de citação antes do texto de cada bloco.

Aplicar Estilo de Card aos Depoimentos

Permite aplicar um estilo de "card" ou "caixa" a todos os blocos. As seguintes opções estarão disponíveis apenas se isto estiver ativado:

  • Ativar Borda do Card: exibe uma borda (ou linha) ao redor dos blocos.
  • Opacidade da Borda do Card: permite ajustar a opacidade (transparência) da borda.
  • Cores do Conteúdo do Card: permite escolher o Pacote de Cores para todos os blocos.

Número de Colunas no Desktop & Mobile

Permite definir a quantidade de colunas em que os blocos serão exibidos para dispositivos Desktop e Mobile, que variarão dependendo da opção escolhida em Tipo de Exibição, com base nas definições das seguintes tabelas:

Carrossel (todos os dispositivos)

Largura do Dispositivo Quantidade de Colunas
Igual ou maior que 992px Quantidade definida para Desktop
Igual ou maior que 768px 3 colunas
Igual ou maior que 415px Quantidade definida para Mobile
Igual ou menor que 414px 1 coluna

Grade

Número de colunas no desktop se aplicará a dispositivos com largura igual ou superior a 576px, enquanto Quantidade de colunas no Mobile se aplicará a dispositivos com largura igual ou inferior a 575px.

Dispositivo Desktop / Valor da Opção 4 colunas 3 colunas 2 colunas 1 coluna
Desktop
(Igual ou maior que 992px) 		4 colunas por linha horizontal 3 colunas por linha horizontal 2 colunas por linha horizontal 1 coluna, empilhadas verticalmente
Tablets
(Igual ou maior que 576px) 		3 colunas por linha horizontal 3 colunas por linha horizontal 2 colunas por linha horizontal 1 coluna, empilhadas verticalmente
Dispositivo Mobile / Valor da Opção 2 colunas 1 coluna
Mobile
(Igual ou menor que 575px) 		2 colunas, empilhadas verticalmente 2 colunas, empilhadas verticalmente 2 colunas, empilhadas verticalmente
Mobile Pequeno
(Igual ou menor que 414px) 		1 coluna, empilhadas verticalmente 1 coluna, empilhadas verticalmente 1 coluna, empilhadas verticalmente

Ativar Título

Permite exibir uma secção de Título antes dos depoimentos, na qual pode adicionar os seguintes elementos através das suas respectivas opções:

  • Subtítulo: Exibe no início do Título e antes do Título.
  • Título
  • Descrição: Texto que é exibido abaixo do Título.
  • Link: Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.
  • Texto do Link: Texto que será exibido dentro do link.

Configurações do Carrossel

As seguintes opções serão consideradas e aplicadas apenas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

Como mencionado antes, o subcomponente para o componente Depoimentos é chamado Depoimento e pode adicionar quantos quiser para fornecer as informações necessárias para seus clientes. As opções para este subcomponente são as seguintes:

Citação

Dentro deste campo, pode adicionar o comentário de seus clientes.

Autor

Opcional. Permite adicionar o nome do cliente, ou praticamente qualquer coisa que desejar.

Imagem do Avatar

Opcional. Permite carregar uma imagem (avatar) para cada bloco.

Nota: A dimensão para carregar a imagem será baseada no que escolher na opção Tamanho da Imagem do Avatar nas configurações principais do componente. Sugerimos que não carregue uma imagem maior do que isto para evitar problemas de velocidade da página.

Bloco de Texto

Este componente permite que exiba uma secção com basicamente apenas texto e um link. Pode ser útil como uma secção complementar que acompanha outros componentes do tema ou, por exemplo, como uma secção de Título. As opções para personalizar este componente são as seguintes:

Largura

Permite definir a largura à qual o conteúdo do componente será restrito.

Nota: pode ler sobre como cada opção dentro desta se comporta na esta secção, na parte Outros tamanhos de largura.

Alinhamento do Conteúdo

Permite definir o alinhamento para todo o conteúdo dentro do componente.

Nota: Isto será aplicado para todos os dispositivos.

Posição Horizontal do Conteúdo

Permite definir a posição no eixo “x” (horizontal).

Nota: Isto não será visível se tiver selecionado Largura Total na opção Largura.

Subtítulo

Permite adicionar um texto antes do Título do componente, que terá um tamanho menor.

Título

Permite adicionar um título para o componente.

Nota: O tamanho deste título será determinado pela opção definida em Configurações do Tema > Títulos > Tamanho dos Títulos.

Texto

Permite adicionar uma descrição ou texto para fornecer mais contexto sobre o que a secção trata.

Link

Permite adicionar um botão de link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.

Texto do Link

Texto que será exibido dentro do botão de link.

Usar estilo de botão contorno

Permite exibir o botão do link com uma borda ao redor dele.

Mostrar seta no botão

Permite exibir uma seta no lado direito do texto do botão.

Ativar como link externo

Se ativado, o link será aberto em uma nova aba do navegador.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Barra de Confiança

Este componente permite que exiba informações sobre a sua loja que deseja destacar ou que são relevantes para seus clientes, que podem ser usadas, por exemplo, em tópicos como seus Métodos de Pagamento, Opções de Envio, entre outros conteúdos que podem ser necessários para.

Funciona adicionando múltiplos subcomponentes chamados Bloco de Confiança, aos quais nos referiremos – para fins práticos – como Bloco.

Configurações do Componente

Ao clicar no nome do componente, encontrará opções gerais para personalizá-lo, o que determinará como a secção irá parecer e se comportar. As opções disponíveis para este componente são as seguintes:

Tipo de Exibição

Permite definir como os blocos serão exibidos dentro do componente, com base nas seguintes opções:

  • Carrossel: os blocos serão exibidos dentro de um Carrossel, no qual pode controlar aspectos como a velocidade, reprodução automática ou se deseja mostrar elementos de navegação nele.
  • Grade: os blocos serão exibidos em colunas, um ao lado do outro horizontal e verticalmente com base na quantidade de itens por linha que definir. Em dispositivos móveis, eles sempre serão empilhados verticalmente.

Número de Colunas no Desktop & Mobile

Permite definir a quantidade de colunas em que os blocos serão exibidos para dispositivos Desktop e Mobile, que variarão dependendo da opção que escolheu em Tipo de Exibição, com base nas definições das seguintes tabelas:

Carrossel (todos os dispositivos)

Largura do Dispositivo Quantidade de Colunas
Igual ou maior que 992px Quantidade definida para Desktop
Igual ou maior que 768px 3 colunas
Igual ou maior que 415px Quantidade definida para Mobile
Igual ou menor que 414px 1 coluna

Grade

Número de Colunas no Desktop se aplicará a dispositivos com largura igual ou maior que 576px, enquanto Quantidade de Colunas no Mobile se aplicará a dispositivos com largura igual ou menor que 575px.

Dispositivo Desktop / Valor da Opção 4 colunas 3 colunas 2 colunas 1 coluna
Desktop
(Igual ou maior que 992px) 		4 colunas por linha horizontal 3 colunas por linha horizontal 2 colunas por linha horizontal 1 coluna, empilhadas verticalmente
Tablets
(Igual ou maior que 576px) 		3 colunas por linha horizontal 3 colunas por linha horizontal 2 colunas por linha horizontal 1 coluna, empilhadas verticalmente
Dispositivo Mobile / Valor da Opção 2 colunas 1 coluna
Mobile
(Igual ou menor que 575px) 		2 colunas, empilhadas verticalmente 2 colunas, empilhadas verticalmente 2 colunas, empilhadas verticalmente
Mobile Pequeno
(Igual ou menor que 414px) 		1 coluna, empilhadas verticalmente 1 coluna, empilhadas verticalmente 1 coluna, empilhadas verticalmente

Alinhamento do Conteúdo

Permite definir o alinhamento para todos os blocos dentro do componente.

Nota: Se escolher Centro e o bloco tiver um ícone, ele será colocado acima/antes de todo o conteúdo.

Mostrar ícones

Permite definir se ícones estarão disponíveis para serem exibidos dentro de todos os blocos.

Nota: Se esta opção estiver desativada, não importará se adicionou um ícone em algum bloco.

Configurações do Carrossel

As seguintes opções serão consideradas e aplicadas apenas se tiver selecionado Carrossel na opção Tipo de Exibição:

  • Ativar autoplay: Permite que o Carrossel se mova automaticamente de um item para o próximo.
  • Velocidade do Autoplay: Permite definir o tempo que levará para a opção anterior funcionar.
  • Mostrar setas: Permite exibir setas abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Mostrar pontos: Permite exibir pontos abaixo do Carrossel para que os utilizadores possam controlá-lo.
  • Tamanho das setas e pontos: Permite ajustar o tamanho das setas e pontos.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente.

Configurações do Subcomponente

Como foi mencionado antes, o subcomponente para o componente Barra de Confiança é chamado Bloco de Confiança e pode adicionar quantos quiser para fornecer as informações necessárias para seus clientes. As opções para este subcomponente são as seguintes:

Ícone

Permite adicionar um ícone ao bloco. A sua posição será determinada com base no que escolher na opção Alinhamento do Conteúdo nas configurações do componente.

Título

Permite adicionar um título ao bloco.

Texto

Permite adicionar um texto abaixo do título para fornecer mais contexto sobre o que o bloco trata.

Link

Permite adicionar um link para qualquer conteúdo da loja, como categorias, produtos, páginas, links externos, etc.

Texto do Link

Texto que será exibido dentro do link.

Vídeo

Este componente permite que exiba um vídeo do YouTube ou Vimeo dentro de uma única secção, com várias opções para personalizá-lo, que são as seguintes:

Código de Incorporação de Vídeo

Neste campo, precisa adicionar o código incorporado que cada plataforma fornece, dentro das opções de compartilhamento de vídeo. Se deixar em branco, será exibida uma imagem “falsa”.

Proporção do Vídeo

Permite definir a forma ou dimensão que o vídeo terá, com base nas seguintes opções:

  • Paisagem: Um formato horizontal ou amplo, comumente usado para vídeos tradicionais e telas de TV, que aplica uma proporção 16:9.
  • Retrato: Um formato vertical ou alto, ideal especialmente para telas de dispositivos móveis, que aplica uma proporção 3:4.
  • Retangular: Uma variação mais alta da opção Paisagem, que aplica uma proporção 4:3.
  • Quadrado: Um formato quadrado perfeito, frequentemente visto em plataformas de mídia social como o Instagram, que aplica uma proporção 1:1.

Largura

Permite definir a largura à qual o vídeo será restrito dentro do componente.

Nota: pode ler sobre como cada opção dentro desta se comporta na esta secção, na parte Outros tamanhos de largura.

Posição Horizontal do Conteúdo

Permite definir a posição na qual o vídeo será colocado dentro do eixo “x” (horizontal).

Nota: Isto não será visível se tiver selecionado Largura Total na opção Largura.

Margem Superior

Permite controlar a margem superior da secção.

Margem Inferior

Permite controlar a margem inferior da secção.

Cores do Conteúdo

Permite escolher o Pacote de Cores para o componente, que basicamente aplicará uma cor de fundo atrás do vídeo.

Uso de Imagens dentro de Temas

Nesta secção, explicamos vários aspetos sobre o uso de imagens dentro do tema, abordando tópicos como formatos, tamanhos, entre outras coisas que podem ser úteis para saber.

Quando se trata de tamanhos e dimensões, isto varia dependendo do componente e das opções que eles oferecem em suas configurações. A seguir, fornecemos, com o máximo de detalhe possível, as definições para tamanhos ideais de imagens para vários componentes e seções dentro do tema.

Formatos de Imagem

Para qualquer uma das imagens que pode enviar, por exemplo, dentro de um Slide ou Banner, recomendamos alguns formatos que pode considerar usar para melhorar a experiência dos visitantes da sua loja:

WebP

Usar o formato de imagem WebP pode melhorar significativamente tanto o desempenho do seu site quanto a experiência do utilizador. Entre seus benefícios, podemos destacar os seguintes:

  • Tamanhos de Arquivo Menores com Alta Qualidade: o formato oferece compressão superior em comparação com formatos de imagem tradicionais como JPEG e PNG. Isto significa que as imagens WebP são tipicamente menores em tamanho de arquivo enquanto mantêm qualidade de imagem semelhante ou até melhor. Tamanhos de arquivo menores resultam em tempos de carregamento de página mais rápidos, melhorando a experiência geral do utilizador.
  • Melhoria na Velocidade da Página e SEO: esse tipo de imagem carrega mais rápido devido aos seus tamanhos de arquivo reduzidos, contribuindo para a melhoria da velocidade da página, que é um fator crítico para SEO. Sites que carregam mais rapidamente tendem a ter uma classificação mais alta nos resultados dos motores de busca, o que pode gerar mais tráfego para o seu site.
  • Suporte a Transparência e Animação: eles suportam transparência (como PNG) e animação (como GIF) dentro do mesmo formato. Isto significa que pode usar WebP para uma ampla variedade de necessidades de imagem, desde imagens estáticas com fundos transparentes até imagens animadas, tudo enquanto mantém tamanhos de arquivo menores.
  • Compatibilidade entre Navegadores: eles são amplamente suportados pela maioria dos navegadores modernos, incluindo Chrome, Firefox, Edge e Safari. Como resultado, pode usar com confiança imagens WebP na sua loja, sabendo que a maioria dos utilizadores se beneficiará das melhorias de desempenho sem problemas de compatibilidade.
  • Melhor Experiência do utilizador em Dispositivos Móveis: Como as imagens WebP carregam mais rapidamente e consomem menos dados, elas proporcionam uma experiência mais suave em dispositivos móveis. Tempos de carregamento mais rápidos e redução no consumo de dados são especialmente importantes para visitantes móveis, que podem ter conexões de internet mais lentas ou limites de dados.

Se não possui um software que permita editar ou exportar suas imagens para WebP, pode usar serviços online gratuitos como TinyPNG para compactá-las ou convertê-las em apenas alguns cliques.

JPG / JPEG

JPG é uma escolha sólida para imagens na web, especialmente para fotos complexas com muitas cores e gradientes. É amplamente suportado e oferece compressão decente para boa qualidade e tamanhos de arquivo menores. No entanto, sua compressão com perda, falta de suporte a transparência e potencial para degradação de qualidade o tornam menos adequado para certos casos de uso, especialmente quando comparado a formatos mais novos como WebP.

Se está a lidar principalmente com fotos, JPG ainda pode ser uma ótima opção. Mas para outros tipos de imagens ou quando precisa do melhor desempenho, pode querer explorar outras alternativas.

PNG

PNG é uma excelente escolha para imagens que exigem alta qualidade, nitidez e transparência, como logos, ícones e gráficos simples. Sua compressão sem perda garante que suas imagens mantenham seus detalhes originais sem qualquer degradação. No entanto, os tamanhos de arquivo maiores e a ineficiência para fotos o tornam menos adequado para todos os tipos de imagens na web, especialmente ao otimizar para velocidade e desempenho.

Se precisa de transparência ou qualidade perfeita, PNG é o formato ideal. Mas para outros casos de uso, especialmente onde o tamanho do arquivo e a velocidade de carregamento são críticos, pode querer considerar alternativas como WebP ou JPG.

SVG

SVG é um formato de imagem incrivelmente versátil e poderoso, especialmente para design web. É perfeito para logos, ícones, ilustrações e quaisquer gráficos que precisem ser escaláveis e independentes de resolução. A capacidade de editar, animar e estilizar SVGs com código o torna um favorito entre os desenvolvedores.

No entanto, SVG não é ideal para imagens complexas como fotos e requer um pouco mais de conhecimento técnico para trabalhar com elas de forma eficaz. Se precisa de imagens nítidas e escaláveis com tamanhos de arquivo pequenos e potencial para interatividade, SVG é uma escolha fantástica. Para imagens detalhadas ou casos de uso mais simples, formatos tradicionais como JPG ou PNG podem ser mais adequados, dependendo do que deseja alcançar.

Tamanhos de Slide

Para o caso de um Slide, subcomponente do Slider, as dimensões sugeridas listadas abaixo variarão dependendo do que escolher na opção Tipo de Conteúdo das configurações do componente:

Imagem + Conteúdo

A tabela a seguir fornece as dimensões ideais de imagem ao escolher Imagem + Conteúdo na opção Tipo de Conteúdo nas configurações do Slider.

Largura Altura Dimensão para Desktop (em pixels) Dimensão para Mobile (em pixels)
Grade Pequena 1296 x 420 551 x 420
Grade Média 1296 x 560 551 x 560
Grade Grande 1296 x 720 551 x 720
Grade Navegador 1296 x (variável) 551 x (variável)
Grade Ajustar ao conteúdo 1296 x (variável) 551 x (variável)
Médio Pequena 1440 x 420 575 x 420
Médio Média 1440 x 560 575 x 560
Médio Grande 1440 x 720 575 x 720
Médio Navegador 1440 x (variável) 575 x (variável)
Médio Ajustar ao conteúdo 1440 x (variável) 575 x (variável)
Grande Pequena 1600 x 420 575 x 420
Grande Média 1600 x 560 575 x 420
Grande Grande 1600 x 720 575 x 720
Grande Navegador 1600 x (variável) 575 x (variável)
Grande Ajustar ao conteúdo 1600 x (variável) 575 x (variável)
Extra Grande Pequena 2400 x 420 575 x 420
Extra Grande Média 2400 x 560 575 x 560
Extra Grande Grande 2400 x 720 575 x 720
Extra Grande Navegador 2400 x (variável) 575 x (variável)
Extra Grande Ajustar ao conteúdo 2400 x (variável) 575 x (variável)
Largura Total Pequena Largura: 2400 px mínimo sugerida / Altura: 420 px 575 x 420
Largura Total Média Largura: 2400 px mínimo sugerida / Altura: 560 px 575 x 560
Largura Total Grande Largura: 2400 px mínimo sugerida / Altura: 720 px 575 x 720
Largura Total Navegador Largura: 2400 px mínimo sugerida / Altura: variável 575 x (variável)
Largura Total Ajustar ao conteúdo Largura: 2400 px mínimo sugerida / Altura: variável 575 x (variável)

Nota 1: Ao escolher Navegador na opção Altura do componente, a dimensão necessária deve ser um mínimo de certos pixels considerando dispositivos muito grandes, para que possa ser visualizado adequadamente.

Nota 2: Ao escolher Ajustar ao conteúdo na opção Altura do componente, a dimensão necessária deve considerar a altura do Slide mais alto.

Apenas Imagem

A tabela a seguir fornece as dimensões ideais de imagem ao escolher Apenas Imagem na opção Tipo de Conteúdo nas configurações do Slider.

Além disto, referimo-nos apenas à Largura da imagem nesta tabela, já que sua Altura dependerá de quão alta deseja que suas imagens sejam.

Largura Imagem Desktop (em pixels) Imagem Mobile (em pixels)
Grade Mínimo sugerido: 1296 Máximo sugerido: 551
Médio Mínimo sugerido: 1440 Máximo sugerido: 575
Grande Mínimo sugerido: 1600 Máximo sugerido: 575
Extra Grande Mínimo sugerido: 2400 Máximo sugerido: 575
Largura Total Mínimo sugerido: 2400 Máximo sugerido: 575

Nota: A opção Altura nas configurações do Slider não será considerada ao escolher Apenas Imagem, portanto, não verá nenhuma mudança visível ao escolher qualquer um de seus valores.

Tamanhos de Banner

Para o caso de um Banner, subcomponente de Banners, as dimensões sugeridas nas tabelas abaixo variarão dependendo da combinação do que escolher nas opções Tipo de Conteúdo, Número de Colunas no Desktop e Número de Colunas no Mobile das configurações do componente:

Imagem + Conteúdo

Ao escolher esta opção, a dimensão das imagens também terá uma dependência baseada no que escolher na opção Proporção da Imagem das configurações do componente. Considere que as seguintes dimensões são sugestões do ponto de vista de medida mínima:

Desktop

Proporção / Número de colunas 4 colunas 3 colunas 2 colunas 1 coluna
Paisagem 306 x 172 px 416 x 234 px 636 x 358 px 1296 x 729 px
Retrato 306 x 408 px 416 x 555 px 636 x 848 px 1296 x 1728 px
Retangular 306 x 230 px 416 x 312 px 636 x 477 px 1296 x 972 px
Quadrado 306 x 306 px 416 x 416 px 636 x 636 px 1296 x 1296 px

Mobile

Proporção / Número de colunas 2 colunas 1 coluna
Paisagem 366 x 206 px 527 x 297 px
Retrato 366 x 488 px 527 x 703 px
Retangular 366 x 275 px 527 x 396 px
Quadrado 366 x 366 px 527 x 527 px

Apenas Imagem

Ao escolher esta opção, estamos apenas a especificar a Largura mínima sugerida, já que a Altura para cada Banner dependerá de como deseja que eles sejam apresentados e pareçam:

Desktop

Proporção / Número de colunas 4 colunas 3 colunas 2 colunas 1 coluna
Paisagem 306 px 416 px 636 px 1296 px
Retrato 306 px 416 px 636 px 1296 px
Retangular 306 px 416 px 636 px 1296 px
Quadrado 306 px 416 px 636 px 1296 px

Mobile

Proporção / Número de colunas 2 colunas 1 coluna
Paisagem 366 px 527 px
Retrato 366 px 527 px
Retangular 366 px 527 px
Quadrado 366 px 527 px

Nota: A opção Altura nas configurações do Slider não será considerada ao escolher Apenas Imagem, portanto, não verá nenhuma mudança visível ao escolher qualquer um de seus valores.

Tamanhos de Big Banner

Para o caso do componente Big Banner, as dimensões mínimas sugeridas nas tabelas abaixo variarão dependendo da combinação das opções Largura e Altura nas configurações:

A dimensão para dispositivos Desktop considerará aqueles que possuem largura igual ou superior a 576px, enquanto para dispositivos Mobile considerará aqueles que possuem largura igual ou inferior a 575px:

Largura: Grade

Opção de Altura Dimensão da Imagem Desktop Dimensão da Imagem Mobile
Ajustar ao conteúdo 1296 x 300 px 575 x 320 px
Pequena 1296 x 420 px 575 x 420 px
Média 1296 x 560 px 575 x 560 px
Grande 1296 x 720 px 575 x 720 px
Navegador 1296 x 850 px 575 x 820 px

Largura: Médio

Opção de Altura Dimensão da Imagem Desktop Dimensão da Imagem Mobile
Ajustar ao conteúdo 1440 x 300 px 575 x 320 px
Pequena 1440 x 420 px 575 x 420 px
Média 1440 x 560 px 575 x 560 px
Grande 1440 x 720 px 575 x 720 px
Navegador 1440 x 850 px 575 x 820 px

Largura: Grande

Opção de Altura Dimensão da Imagem Desktop Dimensão da Imagem Mobile
Ajustar ao conteúdo 1600 x 300 px 575 x 320 px
Pequena 1600 x 420 px 575 x 420 px
Média 1600 x 560 px 575 x 560 px
Grande 1600 x 720 px 575 x 720 px
Navegador 1600 x 850 px 575 x 820 px

Largura: Extra Grande

Opção de Altura Dimensão da Imagem Desktop Dimensão da Imagem Mobile
Ajustar ao conteúdo 2400 x 300 px 575 x 320 px
Pequena 2400 x 420 px 575 x 420 px
Média 2400 x 560 px 575 x 560 px
Grande 2400 x 720 px 575 x 720 px
Navegador 2400 x 850 px 575 x 820 px

Largura: Navegador

Opção de Altura Dimensão da Imagem Desktop Dimensão da Imagem Mobile
Ajustar ao conteúdo 2800 x 300 px 575 x 320 px
Pequena 2800 x 420 px 575 x 420 px
Média 2800 x 560 px 575 x 560 px
Grande 2800 x 720 px 575 x 720 px
Navegador 2800 x 850 px 575 x 820 px

Nota: Ao definir Navegador nas opções Largura e Altura, sugerimos que teste como as imagens ficam em diferentes dispositivos, para garantir que não fiquem pixeladas.

Tamanhos de Imagem na Página de Produto

Para o caso dos tamanhos de imagens dentro do layout do produto (ou página), estes variarão com base no que escolher na opção Dimensão da Imagem, que pode ser encontrada dentro do componente Template de Produto. Além disto, o tema carregará automaticamente diferentes tamanhos de imagem dependendo da largura da viewport do navegador onde a loja está a ser visitada, para que possam ser otimizadas para cada tipo diferente de dispositivo.

Além disto, precisa considerar que ao habilitar a opção Zoom, pode ser necessário enviar imagens um pouco maiores do que os tamanhos sugeridos mencionados abaixo, para que não fiquem pixeladas quando forem ampliadas.

A seguir, detalhamos as dimensões mínimas sugeridas para que possa enviar suas imagens de produto. Os valores da tabela a seguir consideram apenas a dimensão do dispositivo Desktop, pois será o que terá a maior dimensão de todas:

Opção de Dimensão Tamanho normal da imagem Tamanho da imagem ampliada
Paisagem 719 x 404 px 1000 x 563 px
Retrato 719 x 959 px 1000 x 1333 px
Retangular 719 x 539 px 1000 x 750 px
Quadrado 719 x 719 px 1500 x 1500 px

Nota: As imagens serão automaticamente redimensionadas ou cortadas com base no que escolher na opção Exibição da Imagem, nas configurações do componente.

Artigos Relacionados

Comece a sua jornada com a gente!

Teste gratuito por 14 dias. Não é necessário cartão de crédito.

Comece Agora