What are Related Products?
The Related Products feature is a valuable tool for showcasing additional products within a range, or items frequently purchased together. It enhances user experience by aiding in quicker product discovery and offering suggestions to potential customers.
Adding the Related Products feature to your site is really straightforward, and comes with a couple of configuration options.
The Related Products block is dynamic, which means it only needs to be configured once on the Product Page design. It will automatically display different items based on the product being viewed on the live website.
Let's begin by adding the Related Products block to our product page layout in BlockLab.
How to add Related Products to your product pages
In your admin system, click BlockLab in the main menu.
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.
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.
In the bottom row of blocks available, you will see an array of product specific Blocks that are available to use. Click Related Products.
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 hand corner, and then Publish 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' dropdown in the bottom corner of the Related Products settings pop-up.
Tag only
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. 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.
Category only
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 ideal if you use tags sporadically throughout your system and always want to have something displayed in the related products area. Products sharing a tag will be given priority, and any remaining space in the block (based on your set limit) will be filled with products from the same category as the one the user is currently viewing on your website.