As galerias de produtos são a maneira de mostrar os produtos que você oferece. Você pode adicionar uma galeria a qualquer página do site e decidir o que mostrar: todos os seus produtos ou uma categoria específica.
Dependendo das suas preferências, você pode escolher entre uma galeria em grade ou uma galeria slider, como a mostrada abaixo:
Neste artigo, saiba mais sobre:
Exibir uma categoria em uma galeria em grade
Uma galeria em grade de produto é uma ótima maneira de exibir um grande número de produtos. Os produtos aparecem em uma grade com várias colunas e linhas.
Para adicionar uma galeria em grade e selecionar uma categoria para mostrar:
- Vá para a página à qual você deseja adicionar uma galeria.
- Abra o painel Adicionar no seu Editor:
- Editor Wix: clique em Elementos
no lado esquerdo do Editor. - Editor X: clique em Elementos
na parte superior do Editor X.
- Clique em Loja.
- Clique em Produtos em grade.
- Arraste a galeria em grade no local desejado da página do seu site.
- Clique na galeria no Editor.
- Clique em Selecionar categoria
- Selecione uma opção:
- Para exibir todos os produtos: certifique-se de que a categoria Todos os produtos esteja selecionada.
- Para exibir uma categoria: clique para selecionar uma categoria.
Personalizar uma galeria em grade
A galeria é a primeira parte da sua loja que os clientes veem. Personalize-a para causar uma boa impressão.
Para personalizar uma galeria em grade:
- Vá para a página no Editor que contém a galeria que você deseja personalizar.
- Clique na Galeria de produtos.
- Clique no ícone Configurações
. - Escolha o que você quer fazer:
Clique na aba Layout e personalize a galeria usando as seguintes opções:
- Esticar para largura total: clique na alavanca para esticar a galeria no navegador. Se ativada, defina o tamanho das margens da galeria. Se você ativou Esticar para largura total, recomendamos que você selecione Responsivo em Comportamento da grade na seção Layout da galeria.
- Layout da galeria: selecione um estilo de exibição e, em seguida, escolha o alinhamento do texto, o número de colunas e linhas e o espaçamento entre elas.
- Layout da imagem: selecione como as imagens que você adicionou são exibidas. Saiba mais
- Layout da fita: selecione onde a fita aparece.
- Paginação: selecione um estilo de paginação e personalize as setas e o alinhamento.
Observação: disponível apenas se você selecionar paginação na aba Configurações
Personalizar as configurações
Clique na aba Configurações e personalize as seguintes opções:
- Ao passar o mouse: defina o que acontece quando um cliente passa o mouse sobre um produto.
- O que é exibido? mostre ou oculte elementos da galeria.
- Ver mais produtos: selecione o que acontece quando os clientes rolam para baixo até a parte inferior da página. Saiba mais
Observação: no mobile, o botão "Ver mais" sempre é exibido após 10 produtos. - Botão Adicionar ao carrinho: mostre o botão para que os clientes possam adicionar produtos ao carrinho sem acessar a página de produto. Se selecionado, personalize o botão:
- Apenas ao passar o mouse: selecione para mostrar o botão apenas quando o cliente mover o mouse sobre ele.
- Quando o botão é clicado: selecione para onde o cliente é direcionado após clicar no botão Adicionar ao carrinho.
- Mostrar quantidade: selecione para permitir que os clientes adicionem 2 ou mais produtos ao carrinho.
- Mostrar opções: ative a alavanca para exibir opções de produto, como cor ou tamanho.
Clique na aba Texto e personalize qualquer uma das seguintes opções:
- Texto do botão Adicionar ao carrinho: disponível se o botão Adicionar ao carrinho estiver ativado.
- Texto falta de estoque: a mensagem aparece quando o estoque do produto for zero.
- Texto do botão Ver mais produtos: disponível se você selecionou para exibir um botão Ver mais quando os clientes rolam para baixo até o final da página.
Clique na aba Design e personalize a galeria usando as seguintes opções:
Dica: as opções variam de acordo com os recursos que você ativou nas abas Configurações e Visualização rápida.
- Geral: selecione uma cor de background para a galeria e personalize o design do filtro e da classificação.
- Botão Ver mais/Paginação: personalize a opção selecionada na aba Configurações, "Ver mais" ou "Paginação".
- Exibição do produto: selecione uma cor de background para os produtos, adicione uma borda e personalize o texto da galeria.
- Botão Adicionar ao carrinho: selecione um design para cada visualização - padrão e ao passar o mouse.
- Fitas: selecione a forma, a cor e a fonte da fita. Saiba mais
- Opções e quantidade: personalize os dois tipos de opções de produto: cor e dropdown.
- Nome e separador de preço: personalize o separador entre o nome do produto e o preço.
- Botão de visualização rápida: o botão Visualização rápida aparece sobre a imagem quando o mouse passa sobre ela. Para vê-lo, visualize seu site.
Habilite filtros para ajudar os clientes a encontrar os produtos que procuram.
Saiba como
[Uploading files, please wait...]
Adicionar opções de classificação
Permita que os clientes classifiquem seus produtos por preço, nome ou por quando eles foram adicionados.
Saiba como
Personalizar a Visualização rápida
A Visualização rápida permite que os clientes visualizem os detalhes do produto em um pop-up, sem precisar sair da página da sua loja.
Para desativar a Visualização rápida:
- Clique na aba Visualização rápida.
- Clique na alavanca Mostrar visualização rápida para desativá-la.
Para saber como personalizar a visualização rápida, clique
aqui.
Personalizar a galeria em grade para dispositivos móveis
Certifique-se de que a galeria tenha uma boa aparência quando os clientes a visualizam em um dispositivo móvel. Você pode ajustar o design para que ele se adeque a telas menores e permitir que os clientes adicionem produtos rapidamente ao carrinho sem precisar sair da galeria.
Para personalizar a galeria em grade para dispositivos móveis:
- Vá para a página com a galeria em grade que você deseja personalizar.
- Clique no ícone Mobile
na parte superior do Editor.
- Clique na galeria em grade
- Clique em Configurações.
- Siga uma dessas instruções para personalizar sua galeria para mobile:
- Mostrar botão "Adicionar ao carrinho": ative para permitir que os clientes adicionem produtos ao carrinho sem acessar a página de produto. Se ativada, clique na alavanca Mostrar quantidade para permitir que os clientes adicionem mais de um produto ao carrinho.
- Mostrar opções de produtos: ative para exibir opções de produto, como tamanhos ou cores.
- Personalizar o layout: exiba produtos em 1 ou 2 colunas.
- Personalizar o design: arraste as alavancas para ajustar o tamanho do texto para dispositivos móveis.
Exibir uma categoria em uma galeria slider
A galeria slider é a maneira perfeita de mostrar seus produtos. Os clientes podem clicar nas setas de navegação para ver mais produtos.
Para adicionar uma galeria slider e selecionar uma categoria para exibir:
- Vá para a página à qual você deseja adicionar uma galeria.
- Abra o painel Adicionar no seu Editor:
- Editor Wix: clique em Elementos no lado esquerdo do Editor.
- Editor X: clique em Elementos na parte superior do Editor X.
- Clique em Loja.
- Clique em Galeria slider.
- Arraste a galeria de produtos slider para onde você deseja colocá-la.
- Clique na galeria no Editor.
- Clique em Configurações.
- Selecione uma opção:
- Para exibir todos os produtos: certifique-se de que a categoria Todos os produtos esteja selecionada.
- Para exibir uma categoria: selecione uma categoria no dropdown Qual categoria exibir?.
Personalizar uma galeria slider
Personalize uma galeria slider para obter a aparência perfeita. Você pode personalizar o texto e o design da galeria, escolher quais elementos exibir (por exemplo, um botão Adicionar ao carrinho) e mais.
Para personalizar uma galeria slider:
- Clique na galeria slider de produtos.
- Clique em Configurações.
- Escolha o que você quer fazer:
Clique na aba Layout e personalize a galeria usando as seguintes opções:
- Esticar para largura total: clique na alavanca para escolher como a galeria slider é exibida.
- Ativada: o elemento é esticado para a largura total do navegador dos visitantes.
- Margens: defina o tamanho das margens nas bordas da galeria.
- Desativada: o elemento não é esticado no navegador.
- Estilo da exibição do produto: selecione como os detalhes do produto são exibidas.
- Alinhamento da info do produto: selecione o alinhamento do texto: esquerda, direita ou centro.
- Alinhamento do título da galeria: o título pode ser desativado na aba Configurações.
- Quantidade de produtos: selecione como o número de produtos exibidos é determinado:
- Fixo: o número de produtos que você seleciona é exibido para todos os visitantes do site.
- Selecione o número de produtos a serem exibidos.
- Responsivo: o número de produtos exibidos se ajusta de acordo com o tamanho da tela do visitante. Essa configuração só estará disponível se você tiver selecionado Esticar para largura total acima.
- Espaçamento entre produtos: ajuste o tamanho do espaço em branco entre os produtos.
- Preenchimento da info do produto: ajuste o preenchimento à esquerda e à direita dos detalhes do produto.
- Layout da imagem: selecione como as imagens que você adicionou são exibidas. Saiba mais
- Layout da fita: selecione onde a fita aparece. Saiba mais
Personalizar as configurações
Clique na aba Configurações e personalize as seguintes opções:
- Ao passar o mouse: defina o que acontece quando um cliente passa o mouse sobre um produto.
- O que é exibido? mostre ou oculte elementos da galeria.
- Botão Adicionar ao carrinho: mostre o botão para que os clientes possam adicionar produtos ao carrinho sem acessar a página de produto. Se selecionado, personalize o botão:
- Apenas ao passar o mouse: selecione para mostrar o botão apenas quando o cliente mover o mouse sobre ele.
- Quando o botão é clicado: selecione para onde o cliente é direcionado após clicar no botão Adicionar ao carrinho.
- Mostrar quantidade: selecione para permitir que os clientes adicionem 2 ou mais produtos ao carrinho.
Clique na aba Texto e personalize qualquer uma das seguintes opções:
- Texto do título da galeria: disponível se o título estiver ativado.
- Texto do botão Adicionar ao carrinho: disponível se o botão Adicionar ao Carrinho estiver ativado.
- Texto falta de estoque: a mensagem aparece quando o estoque do produto for zero.
Clique na aba Design e personalize a galeria usando as seguintes opções:
Dica: as opções variam de acordo com os recursos que você ativou nas abas Configurações e Visualização rápida.
- Geral: selecione uma cor de background para a galeria, escolha a fonte e a cor do título e personalize as setas da galeria slider.
- Exibição do produto: selecione uma cor de background para os produtos, adicione uma borda e personalize o texto da galeria.
- Botão Adicionar ao carrinho: selecione um design para cada visualização - padrão e ao passar o mouse.
- Fitas: selecione a forma, a cor e a fonte da fita. Saiba mais
- Nome e separador de preço: personalize o separador entre o nome do produto e o preço.
- Botão de visualização rápida: o botão Visualização rápida aparece sobre a imagem quando o mouse passa sobre ela. Para vê-lo, visualize seu site.
Personalizar a Visualização rápida
A Visualização rápida permite que os clientes visualizem os detalhes do produto em um pop-up, sem precisar sair da página da sua loja.
Para desativar a Visualização rápida:
- Clique na aba Visualização rápida.
- Clique na alavanca Mostrar visualização rápida
para desativá-la.
Para saber como personalizar a Visualização rápida, clique
aqui.
