As galerias de produtos são uma ótima 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.
Escolha entre uma galeria em grade (uma galeria com várias linhas) ou uma galeria slider para que os clientes possam percorrer por ela.
Personalizar uma galeria em grade
Ajuste as galerias em grade e crie a identidade visual perfeita para sua loja.
Para personalizar uma galeria em grade:
- Vá para a página no seu editor que contém a galeria que você deseja personalizar.
- Clique na galeria de grade.
- Clique em Configurações ou no ícone Configurações
. - Escolha quais configurações você deseja personalizar:
Escolher quais produtos são mostrados
Clique na aba Categoria para escolher a categoria de produto que deseja exibir.
Dica: por definição, toda galeria exibe a categoria "Todos os produtos".
Escolha quais elementos você deseja exibir
Clique na aba Exibição e marque ou desmarque as caixas de seleção para mostrar ou ocultar elementos da galeria, como filtros, fitas ou opções de produto.
Dica: quando você exibe as opções de produto, apenas 2 são mostradas. Por exemplo, se o seu produto tiver opções de cor, tamanho e forma, apenas as 2 primeiras opções que você criou serão exibidas.
Selecionar suas configurações
Clique na aba Configurações e personalize as opções disponíveis.
- Opções de produto: selecione quais opções de produto são exibidas.
Dica: isso é relevante se você ativou as opções de produto e se alguns produtos tiverem várias opções, como cor, tamanho e forma. - Comportamento da rolagem:
- Selecione o que acontece quando os clientes rolam para baixo até o final da página. Saiba mais
- Ative a alavanca Barra lateral sticky para manter os filtros visíveis durante a rolagem. Se ativada, personalize a distância da barra lateral e a parte superior da página.
- Efeitos na imagem do produto: defina o que acontece quando um cliente move o mouse sobre um produto.
Clique na aba Layout e personalize a galeria usando as seguintes opções:
Dica: as opções variam de acordo com os elementos que você ativou.
- Geral: clique na alavanca para esticar a galeria para a largura total do navegador. Se ativada, defina o tamanho da margem (relevante apenas para o Editor Wix, não para os editores do Wix Studio ou Harmony).
Observação: se ativada, recomendamos selecionar Responsivo em Comportamento da grade. - Grade de produto:
Dica: com a configuração de comportamento da grade definida como "Fixo", as configurações permanecem as mesmas, independentemente do tamanho da tela do visitante. Com Responsivo, o número de linhas e colunas se ajustam ao tamanho da tela, mas essa configuração só funciona quando a galeria é esticada para a largura total. - Imagens do produto: selecione como as imagens são exibidas. Saiba mais sobre como exibir imagens
- Botão "Adicionar ao carrinho": escolha onde o botão fica.
Observação: se o botão estiver colocado sobre a imagem, o botão Visualização rápida não será exibido. - Painel de adição rápida: alinhe e personalize o espaçamento do painel de adição rápida.
- Informações do produto: escolha uma opção de layout de cartão de produto e personalize-a.
- Opções de produto: clique nas alavancas para exibir apenas opções de cor ou limitar as opções de cor e selecionar como as opções de texto são exibidas.
- Quantidade: defina a largura do seletor de quantidade do produto.
- Fitas: selecione onde a fita aparece e ajuste o preenchimento.
Clique na aba Design e personalize a galeria usando as seguintes opções:
Dica: as opções variam de acordo com os elementos que você ativou.
- Geral: selecione o background que aparece atrás dos cartões de produto.
- Filtro e classificação: se você ativou os filtros ou classificação, personalize o background e o texto.
- Cartões de produto: adicione um background, borda e personalize o raio do canto da imagem.
- Informações do produto: personalize o texto da galeria.
- Opções de produto: personalize como as opções de cor e texto do produto são exibidas.
- Quantidade: personalize o design do seletor de quantidade do produto.
- Fitas: selecione a forma, a cor e a fonte da fita.
- 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: se a visualização rápida estiver ativa, personalize o design do botão.
Dica: para personalizar a própria Visualização rápida, vá para a aba Visualização rápida. - Botão "Adicionar ao carrinho": selecione um design para cada visualização - padrão, ao passar o mouse e desativado (por exemplo: esgotado).
- Painel de adição rápida: personalize o design do painel de adição rápida.
- Botões Mostrar mais/Anteriores ou Paginação: personalize o design do "Botão Mostrar mais" ou "Paginação".
Clique na aba Texto e personalize qualquer um dos textos que aparece na sua galeria em grade.
Personalizar o comportamento do botão "Adicionar ao carrinho"
Se ainda não estiver ativado, clique em Mostrar Adicionar ao carrinho para exibir o botão na sua galeria.
Por fim, escolha para onde os clientes são direcionados após clicar no botão:
- Mostrar pop-up: uma notificação pop-up aparece.
- Abrir carrinho lateral: o carrinho lateral abre na lateral da tela.
- Vai para a página do carrinho: os clientes são levados diretamente para a página do carrinho.
- Ficar na página: os clientes permanecem na mesma página. O botão exibe uma marca de seleção para indicar que o produto foi adicionado com sucesso.
Clique na aba
Ordenação para ativar e personalizar filtros. Permita que os clientes classifiquem seus produtos por preço, nome ou por quando eles foram adicionados. Saiba como
adicionar e configurar opções de ordenação.
Ativar e 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.
Observações:
- Se você colocou o botão "Adicionar ao carrinho" na imagem, o botão de visualização rápida não será exibido.
- Para ver o botão Visualização rápida em ação, visualize seu site ou confira seu site online.
Para ativar ou desativar a visualização rápida:
- Clique na aba Exibição.
- Marque ou desmarque a caixa de seleção ao lado de Botão de visualização rápida.
Próximas etapas:
Personalizar uma galeria slider
Personalize sua galeria de produtos 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:
- Vá para a página no seu editor que contém a galeria que você deseja personalizar.
- Clique na galeria de produtos slider.
- Clique em Configurações ou no ícone Configurações .
- Escolha o que você quer fazer:
Escolher quais produtos são mostrados
Você pode usar essa galeria de três maneiras:
- Mostrar produtos selecionados:
Mostre uma categoria específica ou a categoria "Todos os produtos".
Por exemplo, se você quiser exibir suas novidades, crie uma categoria "Novidades" e coloque todos os seus novos produtos nela. Em seguida, selecione essa categoria no dropdown. - Mostrar automaticamente seus produtos mais vendidos:
Escolha essa opção para exibir automaticamente seus itens mais vendidos. Observe que, se você ainda não teve vendas suficientes para calcular quais produtos são mais vendidos, produtos relacionados a categoria "Todos os produtos" é exibida. - Mostrar produtos relacionados:
Mostre produtos nos quais os clientes estão interessados, com base no que eles estão visualizando. Você pode selecionar o tipo de galeria relacionada que deseja exibir.
- De categorias semelhantes: funciona melhor quando adicionada à página de produto, ao carrinho ou à página de agradecimento.
- Comprados frequentemente juntos: funciona melhor quando adicionado à página de produto.
- Vistos frequentemente juntos: funciona melhor quando adicionado à página de produto.
Escolher quais elementos exibir
Clique na aba Exibição e, em seguida, marque ou desmarque as caixas de seleção para mostrar ou ocultar elementos da galeria.
Dica: quando você exibe as opções de produto, apenas 2 são mostrados. Por exemplo, se o seu produto tiver opções de cor, tamanho e forma, apenas as 2 primeiras opções que você criou serão exibidas.
Personalizar as configurações
Clique na aba Configurações e personalize as seguintes opções:
- Opções de produto: selecione quais opções de produto são exibidas.
Dica: isso é relevante se você ativou as opções de produto e se alguns produtos tiverem várias opções, como cor, tamanho e forma. - Comportamento do slider: ative o loop infinito para permitir que os clientes continuem navegando pelos produtos.
- Efeitos da imagem do produto: defina o que acontece quando um cliente move o mouse sobre um produto.
Clique na aba Layout e personalize a galeria usando as seguintes opções:
- Geral: clique na alavanca para esticar a galeria para a largura total do navegador. Se ativada, defina o tamanho da margem (relevante apenas para o Editor Wix, não para os editores do Wix Studio ou Harmony).
Observação: se ativada, recomendamos selecionar Responsivo em Comportamento da grade. - Título da galeria: edite o alinhamento do título
- Grade de produto:
Dica: com a configuração de comportamento da grade definida como "Fixo", as configurações permanecem as mesmas, independentemente do tamanho da tela do visitante. Com "Responsivo", o número de colunas se ajusta ao tamanho da tela, mas essa configuração só funciona quando a galeria é esticada para a largura total. - Imagens do produto: selecione como as imagens são exibidas. Saiba mais sobre como exibir imagens
- Botão "Adicionar ao carrinho": escolha onde o botão fica.
Observação: se o botão estiver colocado sobre a imagem, o botão Visualização rápida não será exibido. - Painel de adição rápida: alinhe e personalize o espaçamento do painel de adição rápida.
- Informações do produto: selecione um layout e alinhamento para as informações do produto.
- Opções de produto: clique nas alavancas para exibir apenas opções de cor ou limitar as opções de cor e selecionar como as opções de texto são exibidas.
- Quantidade: defina a largura do seletor de quantidade do produto.
- Fitas: selecione onde a fita aparece e ajuste o preenchimento.
- Setas de navegação: personalize o posicionamento das setas.
- Pontos de paginação: selecione uma opção de alinhamento e personalize a distância da galeria.
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 uma fonte e cor do título.
- Cartões de produto: selecione uma cor de background para os produtos, adicione uma borda e personalize o texto da galeria.
- Informações do produto: personalize as fontes das informações do produto que você exibe.
- Opções de produto: personalize como as opções de cor e texto do produto são exibidas.
- Quantidade: personalize o design do seletor de quantidade do produto.
- Fitas: selecione a forma, a cor e a fonte da fita.
- Setas de navegação: personalize o design das setas de navegação.
- Pontos de paginação: personalize a cor e a opacidade dos pontos de paginação.
- 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: se a visualização rápida estiver ativa, personalize o design do botão.
Dica: para personalizar a própria Visualização rápida, vá para a aba Visualização rápida. - Botão "Adicionar ao carrinho": selecione um design para cada visualização - padrão, ao passar o mouse e desativado (por exemplo: esgotado).
- Painel de adição rápida: personalize o design do Painel de adição rápida.
Clique na aba Texto e personalize qualquer um dos textos que aparece na sua galeria slider.
Personalizar o comportamento do botão "Adicionar ao carrinho"
Se ainda não estiver ativado, clique em Mostrar Adicionar ao carrinho para exibir o botão na sua galeria.
Por fim, escolha para onde os clientes são direcionados após clicar no botão:
- Mostrar pop-up: uma notificação pop-up aparece.
- Abrir carrinho lateral: o carrinho lateral abre na lateral da tela.
- Vai para a página do carrinho: os clientes são levados diretamente para a página do carrinho.
- Ficar na página: os clientes permanecem na mesma página. O botão exibe uma marca de seleção para indicar que o produto foi adicionado com sucesso.
Ativar e 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.
Observações:
- Se você colocou o botão "Adicionar ao carrinho" na imagem, o botão de visualização rápida não será exibido.
- Para ver o botão Visualização rápida em ação, visualize seu site ou confira seu site online.
Para ativar ou desativar a visualização rápida:
- Clique na aba Exibição.
- Marque ou desmarque a caixa de seleção ao lado de Botão de visualização rápida.
Próximas etapas:
- Para personalizar o botão Visualização rápida, vá para a aba Design.
- Para personalizar o pop-up Visualização rápida, vá para a aba Visualização rápida. Saiba mais.
Personalizar uma galeria no mobile
Certifique-se de que suas galerias tenham uma boa aparência quando os clientes as visualizarem em um dispositivo móvel. Você pode ajustar o design para que ela se adeque a telas menores e permitir que os clientes adicionem produtos rapidamente ao carrinho sem precisar sair da galeria.
- Vá para o seu editor.
- Clique no ícone Alternar para mobile
na parte superior do editor. - Vá para a página com a galeria em grade ou slider que você deseja personalizar.
- Clique na galeria.
- Clique em Configurações.
- Personalize sua galeria usando as opções disponíveis.
