Help Center
How to Create a Vibe Block with Products from Product Catalog
With Vibe Block, you can create a custom product block and connect it to Product Catalog. Describe the design in a prompt, then display product names, prices, images, and Add to Cart buttons in the generated block.
Connect Product Catalog and Add Products
Go to Site Settings. Under Connected Modules, click Connect to enable Product Catalog.
Add products to Product Catalog manually or import them.
Add Vibe Block to the Page
Go to the page where you want to display products. Add a Vibe Block from the Block Library.
Enter a prompt describing the product card design and specify that the block should be connected to Product Catalog in the project. Wait until the block is generated.
You can also specify that product data should be passed to the Shopping Cart.
Prompt example:
Create a block with product cards and connect it to Product Catalog in the project. Each card should display the product name and price. Show three cards per row. Add a Show more button at the bottom of the block. When clicked, it should load more products from Product Catalog.
Create a block with product cards and connect it to Product Catalog in the project. Each card should display the product name and price. Show three cards per row. Add a Show more button at the bottom of the block. When clicked, it should load more products from Product Catalog.
After the Vibe Block is generated, the Catalog Settings button appears. Click it and select the Product Catalog category to display on the page.
Add the ST100 Shopping Cart with order form block to the page.
Publish the page and open it to test the block. Add a product to the Shopping Cart.
Check that the product data is passed correctly, then complete the payment. Product data is sent to connected data capture services as usual.
You can also define the detailed product pop-up in the prompt. You can do this after the main block is generated: describe how the pop-up should look and what information it should display.
For example, the detailed pop-up in the image below displays all available product information from Product Catalog, quantity controls, and an Add to Cart button. You can customize the prompt to remove buttons or change the information shown in the pop-up.
For example, the detailed pop-up in the image below displays all available product information from Product Catalog, quantity controls, and an Add to Cart button. You can customize the prompt to remove buttons or change the information shown in the pop-up.
Products can also be added to the Shopping Cart from the detailed pop-up.
If a product is not added to the Shopping Cart or some data is missing—for example, the SKU—describe the issue in a new prompt in the Vibe Block editor and ask AI to fix it.
