Upsell and Cross-sell with the Related Products element


This article will help you understand what related products are and how to use the Related Products element in GemPages.



What is the Related Products element?

Related products are recommendations to the main product that a shopper is currently viewing. They can be products that are similar, go well, or add value to the main product. When done right, related products can be very valuable in increasing your order value and conversion rate.

In GemPages, the function is represented by the Related Products element, and we’ll go over all the settings to make the most use out of it in the sections below.


Add the Related Products element to your page

Step 1: In the GemPages Dashboard, select your page and enter the Editor via the “Edit” button.

Step 2: Search for the Related Products element, then drag & drop one onto your page.

Once finished, all configurations of the element are displayed on the left sidebar.



Configure the Settings tab


The Related Products element works by fetching data from the Shopify Admin. Products displayed in this element are from the same collection as the main product.


The Settings tab is where you will find all the necessary parameters to set up the Related Products element.


Select Product

By default, the Related Products element will display products from the same collection as the main product display on the page's Product module. If there isn't a Product module, it will display your most recently added product in the Shopify inventory.

Under this section, click the “Pick a Product” button to pick the Main product from your Shopify inventory. After that, its related products will be selected for display.


Dynamic switch

On a page with both the Product module and the Related Product elements, please make sure to turn on the Dynamic feature for both. This ensures that the correct related products will appear for any chosen product.

When toggled on, the Related Products element will turn purple, indicating the function has been enabled.

Order of Products

Toggle on the Randomize switch to show the related products from different collections randomly in case your main product belongs to more than one collections.

If this option is turned off, the related products element will display the products from the first collection (collections is sorted in ascending alphabetical order). 


Please be noted that this feature only functions on live pages, not the Editor. Therefore, please publish the page to see how it works.

Products per Row

Set the number of products displayed per row from 1 to 6 in the drop-down menu.


Number of Products

Set the total number of related products you want to display using the slider or the input box. The maximum is 20.




To exclude products from a specific collection, input the collection’s URL handle here. If you have more than one collection to exclude, separate their handles using a comma.

E.g.: best-sellings, new-arrivals, high-end



Here are the steps to get your collection handles:


Step 1: Head to Shopify Admin > Products Collections and select one of your collections.


Step 2: Scroll all the way down and click "Edit website SEO"



Step 3: Copy the handle in the URL and handle field



Extra Class

If you would like to further customize the element with coding, use this field to add a class name and then refer to it later on in the CSS file.


Configure the Design tab

Before you hit “Save” and “Publish” on your page, don’t forget to fine-tune the design of your Related Products element using the Design tab!


Feel free to explore our articles for more guides and tutorials on how to use GemPages like a pro. Should you need any further assistance, please contact our GemPages Support Team any time via email or live chat.


Was this helpful?