Elemento da lista de produtos

Sobre o elemento Lista de produtos

O processo de Lista de Produtos desempenha um papel crucial ao exibir uma variedade de produtos. Seu propósito é aumentar efetivamente o valor de vendas ao permitir upselling e cross-selling para seus clientes. Diferentemente de sua versão anterior, o elemento Product List V7 oferece a capacidade de escolher seletivamente produtos específicos para exibir, aumentando a flexibilidade do design da página da web.

Como adicionar um elemento de lista de produtos à sua página?

Para começar a usar o elemento Lista de produtos no GemPages, siga estas etapas:

Passo 1: Faça login no seu Administrador do Shopify e acesso Painel GemPages > PÁGINAS.

Passo 2: Localize a página de destino para abrir o editor.

Passo 3: Na barra lateral esquerda, arraste e solte o Lista de Produtos elemento sob o Produto seção na sua seção preferida na página.

Passo 4: Clique no elemento para acessar suas opções de configuração, que incluem Configurações e Avançado Guias.

Configurar a guia Configurações

traçado

Você tem duas opções para escolher para exibir sua lista de produtos:

• Rede: A lista de produtos será apresentada no estilo padrão.
• Slider: As imagens dos produtos serão exibidas em um carrossel.

Fonte do produto

Você pode escolher como os produtos serão exibidos selecionando uma das seguintes opções:

• Produtos: Selecione manualmente produtos específicos para exibir.
• coleção: Se desejar exibir produtos de uma coleção específica, selecione esta opção. Certifique-se de ter configurado as coleções no seu painel administrativo da Shopify com antecedência, pois o elemento recuperará informações de lá.

• Relacionado: Exiba automaticamente produtos associados ao atual, com base na mesma coleção, fornecedor ou tag.

Ecrã

Use o controle deslizante ou insira um número exato para escolher quantos produtos devem aparecer em uma única linha.

Espaçamento de itens

Ajusta a espaçamento entre seus itens na Lista de Produtos.

Navegação

Nesta seção, você pode configurar o Navegação configurações para a lista de produtos do controle deslizante, incluindo:

• Posição: Escolha exibir a seta dentro ou fora da lista.
• Ícone: Selecione seu ícone preferido na lista disponível ou carregue um novo arquivo SVG.
• Tamanho do ícone: Ajuste o tamanho do ícone.
• Tamanho do botão: Modifique o tamanho do botão do ícone.
• Fundo: Defina a cor de fundo do botão do ícone.
• Fronteira: Adicione uma borda ao redor do botão e personalize sua largura e cor.
• Canto: Defina o raio do canto para controlar o quão arredondadas as bordas dos botões aparecem.
• Sombra: Habilita e personaliza a sombra projetada para o botão.
• Lacuna até a borda: Espaço entre a seta e a borda do controle deslizante
• Mostrar ao passar o mouse: Mostrar setas somente ao passar o mouse sobre a lista de produtos.

dots

Alterne a visibilidade dos pontos abaixo do controle deslizante para configurar o dots configurações para mostrar indicadores de paginação abaixo do controle deslizante, incluindo:

• Posição: Escolha a localização dos pontos.
• Cor ativa: Defina a cor do ponto atualmente ativo (destacado).
• Cor inativa: Defina a cor dos pontos inativos (não selecionados).
• Tamanho do ponto: Ajuste o tamanho de cada ponto (em pixels).
• Lacuna até a borda: Controle a distância entre os pontos e a borda do contêiner.

Efeito de slide

Sob o Efeito de slide seção, você pode configurar:

• Autoplay: Percorra automaticamente os produtos sem interação do usuário.
• Direção do slide: Escolha a direção em que o controle deslizante se move: esquerda ou direita.
• Loop infinito: Habilite o loop contínuo para que o controle deslizante volte ao início após atingir o último produto.
  
• Arrastar/deslizar: Permitir que os usuários arrastem manualmente (desktop) ou deslizem (celular) o controle deslizante.
• Velocidade do slide: Defina a duração da transição do slide (por exemplo, 500 ms).
• Animação: Selecione o tipo de suavização da animação para transições de slides mais suaves (por exemplo, suavização de entrada, suavização de saída, linear).

Dimensões:

Nesta seção, você pode definir o tamanho do contêiner Lista de Produtos, incluindo:

Largura: Insira um valor de largura fixa (em pixels) ou ative Largura completa para fazer com que o elemento ocupe toda a largura da página.

Altura: Escolher entre

• Auto: A altura será ajustada com base no conteúdo.
• Molduras por Medida: Insira um valor de altura específico para definir uma altura fixa.

Acolchoamento: Defina o espaçamento dentro das bordas do elemento para criar espaço para o conteúdo.

Contexto

Esta seção permite que você personalize o estilo de fundo do elemento Lista de Produtos:

• Cor: Use o seletor de cores para aplicar uma cor de fundo. Você pode escolher entre predefinições, inserir um código HEX ou selecionar entre cores recentes.
• Imagem: Carregue uma imagem para usar como plano de fundo. Pode ser um padrão, uma textura ou um visual promocional, dependendo do seu design.

Shape

Nesta seção, você pode moldar os cantos do contêiner Lista de Produtos:

Raio de canto: Ajuste a redondeza de cada canto (superior esquerdo, superior direito, inferior esquerdo e inferior direito) individualmente.

• 0px = canto agudo
• 50px+ = canto totalmente arredondado

Use os botões de layout predefinidos para aplicar rapidamente valores consistentes em todos os cantos ou redefinir para o padrão.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até o Avançado aba e siga as instruções em Este artigo.

Perguntas

1. Posso exibir produtos diferentes em páginas diferentes?

Sim. Você pode selecionar manualmente produtos ou coleções específicas por página usando as opções "Vários produtos" ou "Uma coleção" nas configurações da Lista de produtos.

2. Como faço para mostrar a lista de produtos em 2 colunas no celular?

Clique no ícone do dispositivo ao lado do controle deslizante “Produtos por linha” > alterne para a visualização móvel e defina o número como 2.

3. Por que minha lista de produtos está em branco ou sem produtos?

Isso pode acontecer se:

• A coleção vinculada do Shopify está vazia ou não publicada.
• Os produtos selecionados estão fora de estoque e ocultos da vitrine.
• Você está visualizando uma página específica do produto usando o identificador de produto errado.
• Verifique novamente as configurações do Shopify e o contexto de visualização.

4. Posso filtrar produtos dentro do elemento Lista de Produtos?

Não. O elemento Lista de Produtos não suporta filtragem em tempo real ou filtros inteligentes. Se você estiver usando o Filtro e Pesquisa Inteligente de Produtos, ele substituirá a lista de produtos por sua própria saída.

5. É possível estilizar os cartões de produtos dentro da lista?

Sim. Você pode estilizar títulos de produtos, preços, botões, espaçamento e layout usando o Avançado configurações de guias e blocos individuais na Lista de Produtos.

6. Posso usar o mesmo elemento da lista de produtos em várias páginas?

Cada elemento da Lista de Produtos é único em sua página. No entanto, você pode duplicar uma página ou salvá-la como modelo se quiser reutilizar a configuração em outras páginas.

7. Posso usar a Lista de Produtos do GemPages com o Filtro e Pesquisa Inteligente de Produtos?

Não. O aplicativo Filtro e Pesquisa Inteligente de Produtos gera sua própria lista de produtos e estrutura de filtros. Portanto, ele não é compatível com o elemento Lista de Produtos do GemPages.

8. Por que minha lista de produtos não está aparecendo na página inicial?

• Certifique-se de que a A página inicial do GemPages está definida como padrão.Caso contrário, o Shopify continuará exibindo a página inicial do tema.
• Certifique-se de que a página inicial esteja publicado, não apenas salvo.
• Se você estiver usando Coleção como fonte do produto:
  • A coleção está publicada na Shopify.
  • A coleção contém produtos que estão visíveis na loja online.
• Se você estiver usando Produtos como fonte do produto:
  • Pelo menos um produto está selecionado nas configurações da Lista de Produtos.

9. Posso alterar a ordem dos produtos no elemento Lista de Produtos?

Sim, se você selecionar Produtos (Seleção manual), você pode organizar a ordem dos produtos como preferir; no entanto, se você usar Coleção Como fonte, a ordem segue a classificação padrão da coleção.