Block: Related categories

The "Related Categories" block allows you to display categories that are relevant to a specific product. This block must be configured at the product level first.

Adding the related categories block

Follow the steps below to add the block that displays related categories:

1. Open the design builder.
2. Navigate to the product page template.
3. Add the "Related products" block.
   1. This block can be added to the Product purchase and Column sections.

Configure block

Once the block is added, you can customize its appearance by changing the color, size, the number of categories per row, and more.

General settings

• Rounded corners: Apply rounded corners to the category boxes.
• Show parent categories: When activated, this will display the entire category tree. For example, if the category Books is a subcategory of Gift ideas, this will be indicated in the display.
• Background color: Change the background color of the block.
• Border color: Change the border color of the category boxes.

Advanced settings

Under Advanced settings, you can adjust the padding and margin for further customization. If you've enabled the display of parent categories, you can also adjust their font size here.

Heading

The block has a default heading, "Related Categories," but this can be changed as desired. You can also adjust the font size and title type.

Text

Adjust the font size and color of the category names.

Image

By activating "Show image," each category will display its corresponding category image. This requires that you have already uploaded a category image. If "Show image" is enabled and a category does not have an image, a placeholder image will be shown.

When "Show image" is enabled, you get the following settings:

• Size: Changes the height of each category box.
• Image fit: Choose whether the image should fill the entire area or adapt to the available space. "COVER" is recommended unless you are certain that all category images have the same size.
• Image alignment: Allows you to change how the image is placed within the category box. This setting has no effect if the image fit is set to "COVER".
• Text position: Choose whether the category name should be displayed above or below the image.
• Number of columns: Allows you to select how many categories should be displayed per row on different devices (PC, tablet, and mobile).