Related Products element

This article will show you how to use the Related Products element in GemPages.

What is the Related Products element?

The Related Products element is one of the associated product elements of GemPages. With the Related Products element, you are able to target the selection of products that are presented to customers as relevant products.


In the GemPages editor pages, you can find it in the left sidebar.



All product elements are synced with the Shopify product database. Therefore, the Related Products element should go along with a Product Module on a product page. 

The relevant product should be in the same Shopify collection with the main product on the page.

Settings tab's parameters

Under the Settings tab of the Product module, you will see effective parameters to fine-tune content appearance for the best possible conversion rate.

  • Select product: Normally, it will be set as Auto. With this option, the product will be randomly selected to display on the current editor page. Otherwise, if you want to select a specific product as a sample for design, hit Pick a product and select one from the appearing list.

Selecting a product here doesn't mean that the current template will apply to the selected product. It visualizes how your page will look like only. If you want to assign a product template for specific products, the assignment feature will help you configure it. Click here for further instruction.
  • Dynamic: If you enable this feature, your products that are assigned to this template will be displayed with corresponding pages. If Dynamic is toggled off, the product will only show one specific thing. It means that when customers click on different products, they all display the same product.

  • Products per Row: Adjust the number of products per row

  • Number of products: Modify how many products will be displayed in the Related Products section 

  • Exclusions: If the main product is listed in multiple collections, you should exclude all the collections which are not in purpose by adding their names here.

  • Extra class: If you wish to customize the variant's content element particularly, please use this field to add a class name and then refer to it in the CSS file.

The display order of products in the Related Products

The display order of products in the Related Product is corresponding with the order in Shopify. You can set it up on the Shopify collection detail pages.


Some common issues with product modules

  • "There is no related product to display": You see this error message because the main product is not linked with any other products.
    • Solution: Try to add all of the products in a collection 
  • "I created a Products Page with a Related Products section. However, when I review my store on Shopify, the related products section is empty."  
    • Solution 1: Check if the main product is in multiple collections. If yes, you should exclude the other collections in the Exclusion setting as the instruction above
    • Solution 2: Check the URL link of your collection in Shopify admin. If it includes special names such as frontpage, default, etc.., try to re-create a new collection. 

  • Format of Related Product on the live page isn't the same as on the editor: 
    • Solution: You may be using the old version of the Related Product element. To solve this issue, try to drag and drop a new Related Products element

If you're interested in learning more about powerful, user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.

Was this helpful?