Related Products Element

Related products are mostly used on the Product Detail Page to show relevant products based on the main product that a customer is interacting with. As a result, displaying related products to customers makes it easier for them to discover new products and can help to increase online store sales.

1. How to add a Related Element to your page

From the left sidebar, drag and drop a Related element to the desired position.

Note: Do not add the Related Product element into the same section that already contains the Product element or other product-related elements, such as:

• Product Image
• Product Title
• Variant Selector
• Price
• Add to Cart button
• Other main product information elements

As in the image below, adding the Related Product element together with these elements in the same section may cause conflicts. For example, the Add to Cart button may not be clickable, or the section may not display the correct product list.

To avoid this issue, please add the Related Product element in a separate section.

Similar to other elements in EComposer, the Related element provides flexible options to customize the content and design in detail, helping you control how related products are displayed on your page.

2. How to Choose Which Related Products to Display

In this option, users can set conditions to define where the related products are pulled from. If a condition is selected, the section will display products that have the same vendor, product type, or collection as the main product.

If users want to manually choose specific products to display, they should use the Product Recommendations feature of Shopify instead.

• Conditions: Related products will be displayed tailored to the conditions you select here, such as Type, Vendor, and Collection.
  + Match with the current product type.
  + Match with the current product vendor.
  + In the same collection as the current product (However, if a product is in more than one collection, there is no way to know which collection’s products will be displayed).
  

• Product recommendations: With this option, we will take product recommendations from Shopify to show in EComposer.

First, you need to install the Search & Discovery app from the Shopify App Store to your store.

Then, please check the steps in the video below to pick and set up the related products in this app and show them to EComposer.

We will take “Related products” to display:

• Show product available only (Live page only): Show only products that are in stock (It will not work if the condition is set to ‘From collection’)
• Show the featured image first: This option will show the first image from your product media in Shopify as a featured image. If you untick this option, the app will show the image of the first variant as a featured image.
  
  
  
  
• Disable lazyload image: Gives you the ability to disable lazy load for the product images. It will force all images on a webpage to download immediately, rather than loading only when they scroll into view. It could speed up image-heavy sites.
• Enable preload: You can tick this to preload the product grid.
• Placeholder image: This option allows you to select an image to show up as a featured image for products that don’t have an image in Shopify Media.
  
  

3. How to Customize the Related Products Layout

There are some other options to configure layout and style for the Related element:

• Grid Layout: Your product will be shown as a grid of cells. Each item will have a certain space between it.

• List Layout: This will be illustrated as a horizontal list of the product.

• Slider Layout: Helps you demonstrate your connected product as a slideshow. There are basic settings for the slide, such as Items per row, Column gap, Navigation, Pagination, or Transition duration.

For more details on how to set up the slider, please check out this video:

• Image ratio: determines the proportional shape (width-to-height) of the image container, such as Square or Portrait. If you want images with different dimensions to appear consistent and aligned on the storefront, you should set the image ratio here.

4. How to Customize the Related Product Card

• Open the product detail page in a new tab: Instead of showing the product details page in the current tab, tick this option to open it in a new tab.
• Product link with collection handle: Tick this option will add the collection handle in the product URL after clicking the product from the product grid.
  For example: The URL before was https://ecom.myshopify.com/products/plush-jogging-trousers
  The URL after is https://ecom.myshopify.com/collections/clothing/products/plush-jogging-trousers
• Show the second image when hovering on the product card on Desktop: When hovering on the product, the second product image (if it has any) will be shown.
• The second image appears when long-pressing on the product image on Tablet and Mobile: On tablet and mobile, instead of hovering, customers can long-press on the product page to make it show the second product image (if it has any).

• Product information: We have options available, and you just need to tick the checkboxes to show the short description, vendor, SKU, type, etc.

• Show input quantity: You can use this option to display the quantity selector on the element, to add more than 1 item to the cart.
• Badge:
  + Show Sale badge: You can set the badge to show as a percentage or an exact amount, and you can change the text of the badge as well.
  + Show when product contains tags: This is a very nice feature; it helps you to display custom labels on product items through product tags.
  + Display badge via metafield: To show a dynamic badge per product, please check out the Metafield badge guide here

5. Show/hide Rating, Quickview, Wishlist, and Compare on the Related products

We have some options to show/hide Rating, Quickview, Wishlist, and Compare here. Please click on the “settings” link to open the settings pop-up. You must select an app from our supported app list and install that app from your store to use it.

• Use rating 3rd party app: This is an option to turn ON/ OFF review star icon. You can check the document here
• Use quickview 3rd party app: This is an option to turn ON/ OFF quick view button. We support only the Quickview template built into EComposer. You can check its document here

• Wishlist app: This is an option to turn ON/ OFF wishlist icon on the Product card. You can check out the guide for the EC built-in Wishlist extension here. Or install supported wishlist apps such as Growave, Wishify, and Wishlist Hero.
• Compare extension: This is an option to turn ON/ OFF Compare icon; you can check its document here.

6. How to Configure Product Price Display

We have some options to configure for the Price on the Related products here.

• Show price: You can show the price or not
• Hide price if not logged in: If you only want to show prices to customers who already have an account, this option will help you do that.
• Show notice login to see price: If you hide the price for Guests, you can show text here to guide what they need to do to view the price.
• Show unit price: If you sell products in quantities or measurements, then you might need to display the price per unit for certain products. When you enter a unit price for a product, the unit price is displayed on the product pages, collection pages, cart page, checkout pages, and order confirmation notifications.

• First available variant: Display the price of the available variant of that item.

• Price display: Price min – max: Display the product’s top and lowest prices based on all variants.

Note: The Price min-max option will only appear if the Show variant picker is No.’

7. How to Configure Product Title Display

• HTML tag: For SEO optimization, you can modify which heading tag represents the product titles.

• Fixed number of lines: If the product title is longer than a specific number of lines, the extra text will be hidden and usually shown with… This helps product cards look cleaner and more consistent.

8. How to Configure Product Variant Display

To enable this Variant Picker on the product cards, please choose “Yes”. You can learn more details about Variant settings here.

Choose “No” to hide the variant picker if you do not want customers to select a variant in this section. In this case, you should enable the View More button so customers can be redirected to the product page, where they can select a variant and add the product to the cart.

Note: Simply, you can delete the Add to cart text label to remove the Add to cart button.

9. How to Edit Labels and Text

You’re allowed to change the text or any flexible word of the Title when no products are found, Sale badge, Sold badge, Added to cart text, Days, Hours, Minutes, Seconds.

10. How to Reorder Product Card Items

Those features are some of the most important functions that connect with our description, known as Title, Description, Vendor, SKU, Type, Price, Button action, Review, Variant form, Countdown, and Login to see price.