Central de Ajuda
Como criar um bloco de estilo com produtos do catálogo de produtos
Com o Vibe Block, você pode criar um bloco de produto personalizado e conectá-lo ao Catálogo de Produtos. Descreva o design desejado em um prompt e, em seguida, exiba nomes de produtos, preços, imagens e os botões “Comprar” no bloco gerado.
Conecte o Catálogo de Produtos e adicione produtos
Acesse “Configurações do site” e, na seção “Serviços integrados”, clique em “Conectar” para ativar o Catálogo de Produtos.
Adicione produtos ao Catálogo de Produtos manualmente ou utilize o recurso de importação.
Adicione um Vibe Block à página
Acesse a página na qual você deseja exibir os produtos. Adicione um Vibe Block a partir da Biblioteca de Blocos.
Digite uma descrição do design do bloco da ficha do produto e especifique que o bloco deve estar vinculado ao Catálogo de Produtos do projeto. Aguarde até que o bloco seja gerado.
Além disso, certifique-se de especificar na instrução que o produto deve ser enviado para o carrinho de compras.
Exemplo de prompt:
Crie um bloco com cartões de produtos e conecte-o ao Catálogo de Produtos do projeto. Cada cartão deve exibir o nome e o preço do produto. Exiba três cartões por linha. Adicione um botão “Mostrar mais” na parte inferior do bloco. Ao ser clicado, ele deve carregar mais produtos do Catálogo de Produtos.
Crie um bloco com cartões de produtos e conecte-o ao Catálogo de Produtos do projeto. Cada cartão deve exibir o nome e o preço do produto. Exiba três cartões por linha. Adicione um botão “Mostrar mais” na parte inferior do bloco. Ao ser clicado, ele deve carregar mais produtos do Catálogo de Produtos.
Depois que o Vibe Block for gerado, o botão “Configurações do catálogo” será exibido. Clique nele e selecione a categoria do catálogo de produtos que deseja exibir na página.
Adicione o carrinho de compras ST100, com um bloco de formulário de pedido, à página.
Publique a página e abra-a para testar o bloco. Adicione um produto ao carrinho de compras.
Verifique se tudo está funcionando corretamente e, em seguida, conclua o pagamento. Os dados do produto serão enviados aos serviços de captura de dados conectados, como antes.
Você também pode incluir a descrição detalhada do produto no pop-up na instrução. É possível fazer isso depois que o conteúdo do bloco principal tiver sido gerado: descreva como o pop-up deve ser e quais informações ele deve exibir.
Por exemplo, o pop-up detalhado na imagem abaixo exibe todas as informações disponíveis sobre o produto no Catálogo de Produtos, controles de quantidade do produto e um botão “Adicionar ao carrinho”. Você pode escrever sua própria instrução para remover botões ou alterar as informações exibidas no pop-up.
Por exemplo, o pop-up detalhado na imagem abaixo exibe todas as informações disponíveis sobre o produto no Catálogo de Produtos, controles de quantidade do produto e um botão “Adicionar ao carrinho”. Você pode escrever sua própria instrução para remover botões ou alterar as informações exibidas no pop-up.
Os produtos também podem ser adicionados ao carrinho de compras a partir da janela pop-up com detalhes.
Se um produto não tiver sido adicionado ao carrinho de compras ou se algum dado tiver sido transferido incorretamente — por exemplo, o SKU —, descreva o problema em uma nova solicitação no editor do Vibe Block e peça à IA para corrigi-lo.
