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.
Site Settings > "Built-in services": the "Connect" button in the "Product catalog" section.
Adicione produtos ao Catálogo de Produtos manualmente ou utilize o recurso de importação.
In Online Store / Catalog: the product list and the "+ Add product" button at the top right.
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.
Block Library: the "VIBE Vibe Block" in the "Other" category.
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.
In the Vibe Block: the prompt input field under "GENERATE CODE FOR THE BLOCK".
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.
The "Catalog settings" pop-up window in a Vibe block with the "DISPLAY PRODUCTS FROM CATALOG" dropdown list and the "Save" button.
Adicione o carrinho de compras ST100, com um bloco de formulário de pedido, à página.
Block Library in the Page Editor: ST100 "Shopping cart with an order form" in the "Store" section.
Publique a página e abra-a para testar o bloco. Adicione um produto ao carrinho de compras.
Product catalog on a published page: the third product card in the "Our Products" section.
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.
Published page with a product catalog block and an open "Your order" cart panel showing items and a "Checkout" button.
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.
A pop-up window with a product card on an online store page, with an arrow pointing to the next product card behind it.
Os produtos também podem ser adicionados ao carrinho de compras a partir da janela pop-up com detalhes.
Online store page with an opened product pop-up window and the "Your order" cart sidebar on the right.
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.
Voltar à seção
Fabricado em
Tilda