Elementos do Shopify - Lista de produtos

Neste artigo, você aprenderá sobre outro elemento do Shopify chamado Lista de produtos.

Sobre o elemento Lista de produtos

A Lista de produtos foi projetada para apresentar uma lista de produtos em sua página para aumentar sua taxa de conversão.

Você pode usar o elemento Lista de produtos para fazer upsell e venda cruzada de seus produtos. Imagine que você está vendendo um produto e gostaria de vender produtos adicionais na mesma coleção. Este elemento capacitará suas vendas.

O elemento Lista de produtos foi aprimorado no PageFly versão 2.8.0 com um novo recurso, que é o recurso Carregando mais na guia Geral. Para mais detalhes, consulte a próxima parte deste artigo.

Observe que você pode pesquisar este elemento usando a função de pesquisa em vez de buscá-lo na barra lateral.

Configuração do elemento lista de produtos

O elemento Lista de produtos vem com muitos parâmetros, permitindo que você ajuste a aparência do conteúdo para obter a melhor taxa de conversão possível.

Selecione o elemento no layout para ver seus parâmetros.

shopify elements product list

Parâmetro da guia Geral
1. CONTEÚDO
  • Origem do produto: você pode escolher uma das três opções abaixo
    • Todos: exibe todos os produtos da loja
    • Coleção personalizada: escolha uma coleção que você deseja exibir
    • Produto (s) relacionado (s): escolha o produto personalizado que você deseja usar, em seguida, os produtos relacionados ao produto personalizado escolhido  antes serão exibidos
  • Itens por carregamento: você só pode mostrar no máximo 20 produtos. (Isso é limitado pelo Shopify).
  • Itens por linha: ajuste o número de itens em uma linha
  • Itens por espaçamento: ajuste o espaço entre os itens
  • Modo de carregamento (esse recurso é novo na versão 2.8.0): esse recurso fornece maneiras diferentes de mostrar seus produtos. Isso também ajuda seus clientes a ver ativamente todos os seus produtos.
    • Nenhum: esta opção é escolhida por padrão. O total de produtos exibidos será baseado no número de itens por carregamento que você configurou acima. Por exemplo, sua loja possui 100 produtos e você define 4 produtos para a opção Item por carregamento e, em seguida, exibirá 4/100 produtos.
    • Paginação: esta opção exibirá os números da página. No editor, você pode ver como na imagem abaixo. Os produtos exibidos em sua página também serão baseados no item por carregamento definido acima. Os clientes podem clicar nesses números para ver outros produtos.
    • Carregar mais: essa opção exibirá o botão Carregar mais. No editor, você pode ver como na imagem abaixo. Os produtos exibidos em sua página também serão baseados no item por carregamento definido acima. Os clientes podem clicar no botão Carregar mais para ver outros produtos.
2. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
3. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
4. ANIMAÇÃO Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
Parâmetro da guia Estilo
1. NO GERAL Cor do conteúdo: a cor que você escolher será aplicada a outros elementos, como

  • Título do Produto
  • Preço do produto
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4. FUNDO DE TELA Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Observe que, se você estilizar a lista de produtos, os números de Paginação e texto Carregar mais do botão Carregar mais no recurso Carregar mais também serão substituídos.

Por exemplo, se você definir a cor violeta no parâmetro CONTEÚDO, os números da página ou texto carregar mais também serão violeta.

Sensibilidade do dispositivo

O elemento Lista de produtos foi criado para exibir corretamente o conteúdo em todos os dispositivos, incluindo laptop, tablet e celular. Para ver como ele é exibido, vá para o alternador de dispositivos no menu superior> selecione os dispositivos que deseja ver. Vamos ver um exemplo abaixo


Você pode ver que, ao mudar para laptop e tablet, a quantidade de itens por linha são 4 por padrão, mas no dispositivo móvel, esse número é automaticamente definido para 2. E essa automação torna a visualização móvel mais clara. Você pode alterar o número de itens por linha e itens por carregamento para cada dispositivo desejado.

Nota importante:

Para alterar o pedido do produto em uma lista de produtos, você pode ver este vídeo abaixo

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages