O widget Catálogo de produtos no criador de sites

Com o criador de sites da SendPulse, você pode adicionar um widget de Catálogo de produtos que extrai os produtos diretamente do seu catálogo de CRM e os exibe em uma página do site.

Por exemplo, você pode transformar uma landing em uma vitrine ou uma vitrine de produtos sem configurar uma loja online completa.

Vamos falar sobre como adicionar e personalizar o widget de Catálogo de produtos.

Adicione o widget

Antes de adicionar o widget, conecte uma loja online ao seu site. Ele mostra os produtos e as categorias do seu catálogo de CRM. Você pode adicioná-los ou gerenciá-los manualmente ou por meio da API.

Coloque o widget Catálogo de produtos no seu site.

Este widget ocupa toda a largura da seção, então você não pode colocar outras colunas ao lado dele.

Escolha produtos para exibir

Escolha as categorias de produtos para mostrar no seu widget. Na lista suspensa Produtos, selecione Todas as categorias para mostrar todo o catálogo ou escolha uma única categoria.

Para adicionar ou editar os produtos e as categorias nesta lista, clique em Gerenciar produtos. O link abre seu catálogo de produtos de CRM.

O menu de categorias reflete a estrutura do seu catálogo de CRM, incluindo as categorias aninhadas. Se uma categoria não tiver produtos ativos ou nenhum produto corresponder ao filtro de pesquisa ou preço atual, o catálogo mostrará um espaço reservado para estado vazio em vez de cards.

Personalize o estilo do catálogo

Decida onde a categoria e o menu do filtro de preço ficam em relação aos cartões de produto. Em Estilo de catálogo, selecione um layout:

Para estilizar os cartões de produto, no estilo Catálogo, clique em Personalizar.

Na seção Geral, defina o Espaçamento do cartão, isto é, uma distância entre os cartões em pixels.

Na seção Cartão, defina a cor de fundo, o preenchimento interno, o contorno e o arredondamento.

Na seção Galeria, decida como as imagens do produto devem aparecer:

Na seção Tipografia, defina um tamanho de fonte, formato e cor para cada elemento de texto:

Defina um número de produtos

Controle quantos produtos o catálogo mostra e quantos aparecem em cada linha.

Na seção Número de cartões em uma linha, defina o número de cartões por linha para a Visualização Desktop e Mobile.

O número máximo de cartões por linha depende do layout. Na visualização Desktop , você pode mostrar até 4 cartões com o layout Side e até 5 cartões com o layout Top . Na visualização Móvel, você pode mostrar até 2 cartões por linha.

Na seção Número máximo de produtos exibidos, defina quantos produtos o catálogo carrega de uma só vez. Você pode escolher entre 6 e 24.

Quando o catálogo tem mais produtos do que o número selecionado, os visitantes passam por eles com paginação.

Configurar paginação

A paginação divide seu catálogo em páginas quando ele contém mais produtos do que o máximo que você definiu.

Para estilizá-lo, clique em Configurações de paginação. As opções são agrupadas em três conjuntos.

Na seção Botões da página, estilize os botões da página:

Para ajudar os visitantes a ver em qual página eles estão, na seção Botão da página atual, estilize o botão da página atual:

Para adicionar um botão que carrega a próxima página, ative o botão Próxima página. Insira seu texto e, em seguida, escolha seu estilo e tamanho. Como alternativa, você pode ativar a opção Adicionar ícone para mostrar um ícone e usar Efeito adicional para adicionar um efeito de foco.

Estilo do painel de filtro

O painel de filtros inclui um menu de categorias e um filtro de preços. Os visitantes podem procurar produtos por categoria e filtrá-los por preço usando os campos De e Para ou o controle deslizante de preço. Os campos suportam apenas números inteiros.

Para estilizar o painel, clique em Configurações de filtro. As opções disponíveis reutilizam as configurações padrão de cor, contorno e fonte e são agrupadas em três seções.

Na seção Geral, defina a cor de fundo, o arredondamento, o contorno e o preenchimento interno do painel.

Na seção Categorias, estilize o menu da categoria:

Na seção Preço, estilize o filtro de preço:

Configurar classificação e pesquisa

A pesquisa e a classificação ajudam os visitantes a encontrar produtos e a navegar no catálogo com mais eficiência. Para configurar isso, clique em Configurações de classificação.

Configurar pesquisa de produtos

O campo de pesquisa ajuda os visitantes a encontrar produtos por nome.

Ative a chave de Pesquisa e insira o texto do espaço reservado para o campo de pesquisa.

Quando ativado, o campo de pesquisa aparece acima dos cartões de produto e filtra o catálogo à medida que os visitantes digitam.

A pesquisa suporta apenas nomes de produtos.

Configurar classificação de produtos

O menu de classificação permite que os visitantes naveguem no catálogo por data de adição, preço ou nome em ordem crescente ou decrescente.

Ative a opção Ativar classificação e, em seguida, estilize o campo de classificação:

Configure o botão Adicionar ao carrinho

O botão Adicionar ao carrinho ajuda os visitantes a adicionar um produto ao carrinho diretamente do cartão.

Para mostrar ou ocultar este botão, use a caixa de seleção ao lado de seu nome no painel do widget.

Para editar o botão, marque a caixa de seleção e clique no ícone de lápis. Insira o botão Texto e escolha seu estilo e tamanho.

Para mostrar um ícone no botão, habilite a opção Adicionar ícone . Escolha um ícone, como um carrinho ou um ícone de aplicativo, e defina sua posição.

Os visitantes podem clicar em um cartão para abrir a página do produto. Quando você ativa o botão Adicionar ao carrinho , eles também podem clicar nele para adicionar um produto ao carrinho.

O widget Catálogo de produtos usa as mesmas configurações gerais que outros elementos do site.

Última Atualização: 22.07.2026