Updated on June 17, 2026

Related Products Element

Author: An Do 4524 views

1. Overview

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.

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

  • Conditions: Related products will be displayed tailored to the conditions you select here, such as Type, Vendor, 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.

  • 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 featured image (the biggest one) of the product set in Shopify Admin -> Products-> Media



  • 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 with the products that don’t have the image in Shopify media.

3. 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 them.
  • List Layout: This will be illustrated as a list of the product horizontally.
  • Slider Layout: Helps you demonstrate your connection 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:

4. 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: Allow users to add more than 1 item to the cart.
  • Badge:
    + 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.
    + Tag badge: This is a very nice feature; it helps you to display custom labels on product items through product tags.
    + Metafield badge: To show a dynamic badge per product, please check out the Metafield badge guide here

5. Third-party apps

To use these third-party apps, please click on the “settings” link to open the settings popup. You must select an app from our supported app list and install that app to your store to use it.

  • Rating app: this is an option to turn ON/ OFF review star icon. you can check the document here
  • Quick view: this is an option to turn ON/ OFF quick view button, 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 its document here
  • Compare app: this is an option to turn ON/ OFF Compare icon, you can check its document here

6. Price

  • Show price: You can show 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 login to see price text: If you hide the price for Guests, you can show a 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. Product title

  • 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 helping product cards look cleaner and more consistent.

8. Product Variant

Learn more about Variant settings here: https://help.ecomposer.io/docs/editor-elements/product-elements/variant/

Note: Here you can delete Add to cart text label to Remove the Add to cart button

9. Edit labels

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. Product card item ordering

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.

Leave a Comment

On this page
Enjoy a free 3-day trial. Then get your first month for $1. Try Now.