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 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.
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.
Exclusions
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.