Related Products Element

What is the Related Products element?

Related products typically refer to items similar or complementary to a product that a customer is viewing or interested in purchasing. These are suggested to customers to encourage additional purchases or to help them find alternatives that might better suit their needs.

Now, you can use this function with the Related Products element in GemPages Editor Version 7 to achieve better results in eCommerce: 

• Enhanced Customer Experience: Customers appreciate the convenience of finding related items that fit their interests or needs.
• Increased Sales: Your Shopify store can increase the average order value and conversion rates by suggesting additional products.
• Cross-Selling and Upselling: Related products facilitate cross-selling (selling complementary items) and upselling (selling higher-priced alternatives or upgrades).

In the sections below, we’ll review all the settings in GemPages Editor Version 7 to maximize the use of the Related Products element.

How to add the Related Products element on your product page?

Step 1: Create product collections, vendors, and tags in Shopify Admin.

The Related Products element in GemPages Editor V7 allows you to show related products under the same condition, such as the same collection, vendor, and tags.

If you haven’t added your own product collections, vendors, and tags, kindly follow the steps below: 

• To create a new collection, go to Shopify Admin > Products > Collections and click on “Create collections.”

Fill in the collection details and click “Save”. 

• To add vendors and tags, access Shopify Admin > Products, click on a certain product, and go to the Product Organization section to add the vendor’s name & tag.

In case you don’t want to show a certain collection or tag, the Related Product element allows you to exclude Collection handles and tags as you prefer.  

Step 2: In the GemPages Editor V7, search for “Related Products” in the search bar.

Step 3: Drag and drop the element into your chosen position on your product page.

Configure the Settings tab 

Products per row

Set the number of products displayed per row from 1 to 6 using the slider.

Number of products

You can set the total number of related products you want to display using the slider or the input box. The maximum is 50 in GemPages Editor Version 7, compared with only 20 in GemPages Editor Version 6. 

Layout 

• Grid: The product list will be presented in the default style.
• Slider: The product images will be displayed in a carousel.

For more information on layout style, kindly refer to this comprehensive guide about Product List. 

Size

• Full-width: Activate this option to expand the product list to cover the entire width of the page. 
• Alternatively, you can enter a specific width value in the provided box to set your preferred width in pixels.

Grid 

You can adjust the row gap and column gap in pixels as you prefer. 

Configure the Advanced tab 

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

You can also find more useful tips and video tutorials at GemPages Academy.