Help Center
How to Create a Vibe Block with Products from the Product Catalog
With the Vibe Block, you can create a custom product block and connect it to the Product Catalog. Describe the design you need in a prompt, and then get product names, prices, images, and the Buy buttons displayed in the generated block.
Connect the Product Catalog and Add Products
Go to Site Settings, and in the Built-in services, click Connect to enable the Product Catalog.
Add products to the Product Catalog manually or use importing feature.
Add a 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 block design and specify that the block should be connected to the Product Catalog in the project. Wait until the block is generated.
Additionally, be sure to specify in the prompt to send the product 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 will appear. Click it and select the Product Catalog category to display on the page.
Add the ST100 Shopping Cart with an 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 everything works correctly, then complete the payment. The product data will be sent to connected data capture services as before.
You can include the detailed product pop-up description in the prompt as well. You can do this after the main block content has been generated: describe what the pop-up should look like and what information it should display.
For example, the detailed pop-up in the image below displays all available product information from the Product Catalog, product quantity controls, and an Add to Cart button. You can write your own 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 the Product Catalog, product quantity controls, and an Add to Cart button. You can write your own 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 has not been added to the shopping cart or some data has been transferred incorrectly—for example, the SKU—describe the issue in a new prompt in the Vibe Block editor and ask AI to fix it.
