In this snippet, the section content builds the general display by looping through each product returned through the products attribute of the recommendations object.

Add this code to sections/product-recommendations.liquid

<div
  class="product-recommendations"
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4"
>
  {%- if recommendations.performed and recommendations.products_count > 0 -%}
    <h2>You may also like</h2>

    <ul>
      {%- for product in recommendations.products -%}
        <li class="product">
          <a href="{{ product.url }}">
            <img
              class="product__img"
              src="{{ product.featured_image | image_url: width: 300, height: 300 }}"
              alt="{{ product.featured_image.alt }}"
            />

            <p class="product__title">{{ product.title }}</p>
            <p class="product__price">{{ product.price | money}}</p>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
</div>

{% javascript %}
  const handleIntersection = (entries, observer) => {
    if (!entries[0].isIntersecting) return;

    observer.unobserve(productRecommendationsSection);

    const url = productRecommendationsSection.dataset.url;

    fetch(url)
      .then(response => response.text())
      .then(text => {
        const html = document.createElement('div');
        html.innerHTML = text;
        const recommendations = html.querySelector('.product-recommendations');

        if (recommendations && recommendations.innerHTML.trim().length) {
          productRecommendationsSection.innerHTML = recommendations.innerHTML;
        }
      })
      .catch(e => {
        console.error(e);
      });
  };

  const productRecommendationsSection = document.querySelector('.product-recommendations');
  const observer = new IntersectionObserver(handleIntersection, {rootMargin: '0px 0px 200px 0px'});

  observer.observe(productRecommendationsSection);
{% endjavascript %}

{% schema %}
  {
    "name": "Product recommendations",
    "settings": []
  }
{% endschema %}