Related Products is a really useful feature for showing off additional products in a range, or products commonly bought together. It can help users find what they were looking for faster, and help suggest items to potential customers.
Adding the Related Products feature to your site is really straightforward, and comes with a couple of configuration options.
The Block is dynamic, meaning it only has to be set up once on the Product Page design, and then it will display different items depending on the product being viewed on the live website.
Let's start by installing the Related Products block on our product page layout in BlockLab.
Adding the Related Products Block
1. In your admin system, click BlockLab in the side bar menu.
2. On the BlockLab page you will see your various layouts available to edit. In this case, Related Products is a product page specific element, so we need to access the Product Page.
3. Now you will be in the BlockLab design area for your Product Page. We need to add the Related Products block, so click the Block Tab in the menu at the top, then click New to reveal the Blocks Menu:
4. In the bottom row of blocks available you will see the array of product specific Blocks that are available to use. Click Related Products:
5. This will add the block on your product page design. Use the move controls to position the Block where you want it to appear, then double click it to configure its settings:
Here you can change the name heading of the Block (or leave it blank should you wish), and set the limit of the number of products you want to appear here. Typically multiples of 4 look best.
Press Save in the top right, and then Publish in the top right of your screen in BlockLab to push your changes to the live website.
Now we have the Block in place the next step is to configure what we want it to display.
Configuring the Related Products Block
There are 3 different ways of controlling what will appear in the Related Products block. This can be seen in the Find related products by drop down in the bottom corner of the Related Products settings pop-up.
Tag only will only display products that share the same tag as the one displaying on the website.
To add a tag to a product, go to Products, then choose the product you wish to add a tag to, and in the product edit screen, type your tag into the Tags area:
The more tags products have in common, the more likely it is the products will feature on each others related products area.
The tag only option will only show products that share the same tag.
This option will show a selection of random products from the same category (or subcategory) as the product being displayed. This is a great option to use if you do not utilise tags on your site and just want to show the extended range of your products to a customer.
Tags first, then categories
This option is great for if you use tags sporadically through your system, and always want something to display in the related products area.
Any items sharing a tag will be prioritised, and then the rest of the available space in the Block (depending on how you have set your limit) will be filled from products in the same category as the one the user is viewing on your website.