Design Related Products Section with Product List Element

About the Related Products Preset

As a preset in the Product List element, Related Products helps you easily showcase related items on your store’s product pages. It’s an effective way to highlight products similar to the ones your customer is viewing, thus increasing the chances of boosting your average order value.

Related Products typically appear at the bottom of product pages. In some cases, they are also placed on 404 product pages, so if users can’t find the product they’re looking for, similar items are suggested instead.

How to Enable the Related Products Preset in GemPages V7?

Step 1: Open an existing product page in GemPages Editor. Or, create a new one. Use the search bar to find the Related Products preset, then drag and drop the preset onto the design area.

Step 2: Click on the product list to open its settings. Check the “Select product list” option. Choose to expand the choices and select “Related Products.”

Upon accessing the Related Products preset, you’ll encounter various settings. Here’s a breakdown of the details.

Configure the Settings Tab

Condition

This setting lets you choose how to display your products with three available options:

• Same Collection: Display items from the same collection as the main product. You can use the “Exclude Collection” option to hide products from specific collections (separate multiple collections with ‘;’).
• Same Tag: Display products with the same tags as the main product. You can use the “Exclude Tags” option to hide products with the specified tags (separate tags with “,”).
• Same Vendor: Display products from the same vendor as the main product.

Product Per Row

This option adjusts the number of products displayed in a row.

Number of Products

This setting lets you change the number of products shown.

Layout 

Here, you can select either a grid or slider layout for your related products. If you choose the slider layout, additional slider settings will expand for further customization.

Size

As usual, you can set the product list’s width and height. You can enable the “Same Height” option, which is exclusively available for the grid layout, to ensure all the shown products have the same height.

Grid

Feel free to align the row gap in the Product List in this section. For adjusting the column gap, use the column gap setting provided. 

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

Best Practices for Related Products