How To: Create the Related Products Section on the Product Details Page¶

Step 1. Create a Block¶

1. In the Admin panel, go to Website → Themes → Layouts and select the Products layout page.

2. Click the + icon in the desired container and click Add block.

3. Open the Create New Block tab and click Products.

4. Specify the name of the block (e.g. Related products) and click Create.

5. Click the gear icon of the created block:

   • In the Template field, select Grid.
   • In the Wrapper field, select the desired wrapper (for example, Important block).
   • If necessary, specify a CSS class in the User-defined CSS-class field.
   • Go to the Content tab and select Similar in the Filling field.
   • Click Save.
   

Step 2. Add a Block to a Product¶

Suppose you want to show a specific pair of sports shoes for a specific pair of sports pants:

1. Go to Products → Products and select the required product.

2. On the product details page, open the Layouts tab.

3. Make sure that the related products block is active.

4. Click the gear icon on the block and open the Content tab:

   • For the Filling field, select Manually.
   • Enter the product name in the search field and select it. If necessary, use the button on the right part of the search field to find the product by browsing categories.
   
   • Click Save.