How to show related products on a Shopify product page (without an app)

A You may also like row on the product page is one of the simplest ways to lift average order value: it keeps shoppers browsing instead of bouncing. You do not need an app for it. Shopify even ships a recommendation engine you can call for free.

There are two routes, and the right one depends on how good you want the suggestions to be. We will build the quick version first, then the native, genuinely-related version that Shopify recommends for production.

Option 1: the quick collection-based version

The fastest approach shows other products from the same collection. It is pure Liquid, renders on the initial page load, and is good enough for small catalogs:

1{% if product.collections.size > 0 %}2  {% assign related = product.collections.first.products %}3  <div class="related-products">4    {% for related_product in related limit: 8 %}5      {% unless related_product.id == product.id %}6        <a href="{{ related_product.url }}" class="related-products__card">7          {{ related_product.featured_image8             | image_url: width: 4009             | image_tag: loading: 'lazy', alt: related_product.title }}10          <p class="related-products__title">{{ related_product.title }}</p>11          <p class="related-products__price">{{ related_product.price | money }}</p>12        </a>13      {% endunless %}14    {% endfor %}15  </div>16{% endif %}

• product.collections.first.products is the pool of candidates. The limit: 8 keeps it small (and stays well under Liquid's 50-iteration ceiling on for loops).
• {% unless related_product.id == product.id %} hides the product you are already looking at, the single most common bug in homemade related-product rows.
• The image uses image_url + image_tag with loading: 'lazy' so the thumbnails do not block the page. Prices go through the money filter, never a hardcoded symbol.

Option 2: Shopify's Product Recommendations API (recommended)

Shopify has a built-in recommendation engine that returns products genuinely related to the current one, based on real order and catalog data. You expose it through a section and Shopify fills the recommendations object. Create the section:

1{% if recommendations.performed and recommendations.products_count > 0 %}2  <div class="related-products">3    {% for product in recommendations.products %}4      <a href="{{ product.url }}" class="related-products__card">5        {{ product.featured_image6           | image_url: width: 4007           | image_tag: loading: 'lazy', alt: product.title }}8        <p class="related-products__title">{{ product.title }}</p>9        <p class="related-products__price">{{ product.price | money }}</p>10      </a>11    {% endfor %}12  </div>13{% endif %}14 15{% schema %}16{17  "name": "Related products"18}19{% endschema %}

The recommendations object only fills with data when the section is loaded through the Product Recommendations API endpoint, which keeps the recommendations fresh without slowing the main product page. You request it like this:

1const container = document.querySelector('#related-products');2const productId = container?.dataset.productId;3 4if (container && productId) {5  const url = `/recommendations/products?section_id=related-products&product_id=${productId}&limit=8&intent=related`;6 7  fetch(url)8    .then((res) => res.text())9    .then((html) => {10      const parsed = new DOMParser().parseFromString(html, 'text/html');11      const section = parsed.querySelector('.shopify-section');12      if (section) container.innerHTML = section.innerHTML;13    });14}

• intent=related asks for products related to the current one. intent=complementary asks for products often bought together (a "complete the look" row), powered by Shopify's Search & Discovery app.
• Because it loads after the page, the main product view stays fast, and the Section Rendering API returns the fully-rendered HTML so you do not rebuild the card markup in JavaScript.
• Add id="related-products" data-product-id="{{ product.id }}" to a placeholder <div> on the product page for the script to target.

Which one should you use

• Quick collection version: tiny catalog, a curated collection that is already a good "related" set, or you want something on the page with zero JavaScript.
• Recommendations API: basically everything else. Better suggestions, no performance hit, and it improves as your store gathers order data. This is the one Shopify points you to for production.

What AI tools get wrong here

• Forgetting to exclude the current product, so the row recommends the page you are already on.
• Looping a giant collection with no limit, hitting the 50-iteration cap or dumping hundreds of products into the DOM.
• Reinventing recommendations in JavaScript when Shopify's native API already returns ranked, related products as rendered HTML. Knowing the platform already solves this is exactly the kind of call that keeps a developer faster than the AI suggesting a from-scratch build.

Wrapping up

Start with the collection version if you need something today, but reach for the Recommendations API for anything real: it gives genuinely related products, keeps the page fast, and gets smarter as you sell. Either way, the win is the same, keep shoppers moving through your catalog instead of out the door.