Como criar uma lista de produtos com o elemento Lista de Produtos

Este artigo irá guiá-lo passo a passo sobre como criar uma lista de produtos do Shopify usando o elemento Lista de produtos no GemPages.

O que é o elemento Lista de produtos?

O processo de Elemento da lista de produtos O GemPages permite que você exiba produtos da sua loja Shopify dinamicamente. Ele se ajusta automaticamente ao número de produtos da sua coleção e mantém a consistência do design em toda a sua loja.

Casos de uso comuns:

Como criar uma lista de produtos do Shopify

Antes de começar, certifique-se de ter um Coleção Shopify Pronto. Se você já tiver um, pode pular o Passo 1.

Etapa 1: Crie uma coleção no Shopify (opcional)

Se você já tem a coleção desejada, pule esta etapa.

1. Faça login no Shopify. Acesse o Painel de Administração do Shopify.

2. Debaixo de Produtos guia, selecione Coleções. Clique na “Criar coleção” no canto superior direito da página.

criar-lista-de-produtos-adicionar-coleção

3. Configurar Tipo de coleção definições:

Manual: Adicione produtos manualmente à coleção.
Inteligente: Defina condições para adicionar automaticamente produtos correspondentes.

criar-lista-de-produtos-tipo-de-coleção

4. Preencha as demais informações necessárias. Clique em "Salvar" para criar sua coleção.

Etapa 2: adicione o elemento Lista de produtos no GemPages

1. Abra o Editor GemPages. Localize o Elemento da lista de produtos no Biblioteca de elementos.

2. Localize o Elemento da lista de produtos na Biblioteca de Elementos.

3. Arraste e solte na seção onde você deseja que sua lista de produtos apareça.

criar-lista-de-produtos-arrastar-soltar-elemento

4. No Painel de configurações da lista de produtos, escolha como obter produtos:

criar-lista-de-produtos-fonte-do-produto

Produtos: Selecione produtos individuais manualmente.
Coleções: Exibir todos os produtos de uma coleção específica do Shopify.
Relacionado: Exibir produtos do mesmo fornecedor, tags ou coleção.

Exemplo: Para exibir a coleção que você criou na Etapa 1, selecione Coleções, escolha a coleção desejada e clique Confirmar.

criar-lista-de-produtos-selecionar-coleção

Saiba mais sobre o Elemento da lista de produtos Configurações aqui..

Etapa 3: estilize os elementos do seu produto

1. Customizar Títulos do produto, Preços e Botões Adicionar ao carrinho para combinar com a marca da sua loja.

2. Aprimore sua lista de produtos com elementos extras, como:

Observação: As alterações feitas em um produto na Lista de Produtos (como estilo da fonte ou cor do botão) serão aplicadas automaticamente a todos os produtos na lista, garantindo uma aparência consistente, seja a lista estática ou dinâmica.

Etapa 4: otimizar para celular

Após concluir o design da área de trabalho, mude para Exibição móvel no Editor GemPages:

criar-lista-de-produtos-otimizar-celular

Adjust espaçamento, tamanhos de fonte e dimensões dos botões para telas menores.
Exemplo: exiba 4 produtos por linha no desktop e 2 produtos por linha no celular para melhor legibilidade e usabilidade.

Como criar uma lista de produtos com o elemento Prodct List