Como definir as Configurações Gerais
No painel de administração da sua loja Jumpseller, terá acesso às configurações básicas e avançadas. Vamos ver como definir as Configurações Gerais...
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.
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:
seta
no lado esquerdo do nome. Isto significa que ele tem ou pode ter subcomponentes dentro.seta
para fechá-la.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.
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.
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:
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
.
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:
Para ver as personalizações individuais de cada tema, visite a documentação deles.
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:
Para ver as personalizações individuais de cada tema, visite a documentação deles.
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:
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:
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.
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
, no qual pode controlar aspectos como velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
Banner
funcionarão como um fundo e o conteúdo (por exemplo, Título) será colocado por cima.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:
16:9
.3:4
.4:3
.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çãoTipo 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:
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
:
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çãoRetrato
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:
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 aImagem + Conteúdo
. No caso deApenas Imagem
, só precisará considerar as opçõesImagem
(desktop e móvel),Link
eTexto do link
.
Este componente permite que exiba uma secção cujo propósito é destacar algo sobre a sua loja, como por exemplo:
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:
Altura
Permite definir a altura para todo o componente, com base nas seguintes opções:
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:
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.
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:
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:
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.
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:
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.
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:
Tamanho do Mapa
Permite definir a largura do Mapa
, com base nas seguintes opções:
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.
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:
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
:
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
ouPNG
.
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:
hover
.Overlay
, se ativado.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:
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.
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
.
(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:
Margem Superior
Permite controlar a margem superior da secção.
Margem Inferior
Permite controlar a margem inferior da secção.
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:
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:
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:
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:
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
Produtos > Todos os produtos
para ver a lista de produtos da sua loja.Opção 2
Produtos > Categorias
e escolha a que deseja clicando em seu nome.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
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
Categoria
selecionada, que pode substituir preenchendo este campo.Categoria
selecionada ao ser clicado.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
:
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
ouPNG
.
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:
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
Produtos > Todos os produtos
e escolha um produto da sua loja clicando em seu nome e/ou imagem.Produto em Destaque
.Lista de produtos em destaque
Produtos > Todos os produtos
e antes da lista de produtos encontrará três opções. Clique na que está mais à direita.Destaque
.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
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
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
:
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
ouPNG
.
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:
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:
Avaliações de Produtos
, o que pode ser feito no painel de administração da sua loja acedendo a Configurações > Geral > Emails
.Produtos > Avaliações
para ver a lista completa.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
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
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
:
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
ouPNG
.
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:
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
ouLargura Total
na opçãoLargura
.
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.
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:
Configurações > Geral > Preferências > Redes Sociais
e clique no botão “Editar informações” que está dentro desta secção.Login no Instagram
que está mais abaixo, no final.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
:
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.
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
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
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
:
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.
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:
Personalização > Páginas > Todas as Páginas
, notará no lado esquerdo uma secção chamada Categorias
.Publicações
.A seguir, explicamos como pode vincular uma página a uma categoria, neste caso, para o Blog:
dominio-da-loja.jumpseller.com/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:
Páginas > Todas as Páginas
no painel de administração da sua loja.Post
.Ordem da Categoria
permitirá definir como as publicações serão exibidas dentro do componente, o que também afetará a página Blog.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:
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
:
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.
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
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
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
:
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.
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:
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.
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:
Localizações a Exibir
Permite definir qual tipo de localizações serão exibidas dentro do componente, com base nas seguintes opções:
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 emConfiguraçõ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:
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.
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
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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:
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
:
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.
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:
Conta habilitada
ativada, dentro de Configurações > Geral > Emails > Emails Transacionais
, o utilizador receberá um email para confirmar a inscrição.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.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.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.
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 daGaleria
.
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:
16:9
.3:4
.4:3
.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:
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:
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:
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:
painel lateral
que é aberto ao clicar no botão.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:
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:
Texto Principal
do Pacote de Cores do componente.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:
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:
Slide
funcionará como um fundo e o conteúdo (por exemplo, Título) será colocado sobre ele.Nota: Ao escolher
Apenas Imagem
, só precisará considerar as seguintes opções nas configurações de umSlide
: Imagem (desktop e mobile), Link e Texto do Link.
Altura
Permite definir a altura de todo o componente, com base nas seguintes opções:
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:
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/ouAltura
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
:
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
:
Slide
ainda será clicável como um todo.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 aImagem + Conteúdo
. No caso deApenas Imagem
, só precisará de considerar as opçõesImagem
(desktop e mobile),Link
eTexto do Link
.
Cores do Conteúdo
Permite escolher o Pacote de Cores para cada Slide
.
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.
Tamanho das Imagens
Permite definir como as imagens de cada Recurso
serão exibidas, com base nas seguintes opções:
520x300 px
.Tipo de secção
Permite definir como os Recursos serão exibidos dentro do componente, com base nas seguintes opções:
Carrossel
, no qual pode controlar aspectos como a velocidade, autoplay ou se deseja mostrar elementos de navegação nele.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 aCarrossel
.
Opções de Cores
As seguintes opções permitem que personalize certas cores dentro do componente:
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
:
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.
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
, no qual pode controlar aspectos como a velocidade, reprodução automática ou se deseja mostrar elementos de navegação nele.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:
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:
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:
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
:
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.
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çãoLargura
.
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.
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
, no qual pode controlar aspectos como a velocidade, reprodução automática ou se deseja mostrar elementos de navegação nele.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
:
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.
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:
16:9
.3:4
.4:3
.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çãoLargura
.
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.
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.
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:
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.
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çãoAltura
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çãoAltura
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 escolherApenas Imagem
, portanto, não verá nenhuma mudança visível ao escolher qualquer um de seus valores.
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 escolherApenas Imagem
, portanto, não verá nenhuma mudança visível ao escolher qualquer um de seus valores.
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
eAltura
, sugerimos que teste como as imagens ficam em diferentes dispositivos, para garantir que não fiquem pixeladas.
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.
Experimente grátis durante 14 dias. Não é necessário cartão de crédito.