Looking for a fix or an alternative to displaying all_products for related products via metafields on the products page as we now need to display more than 20. I’ve read this can be done with collections but I could not find a solution yet. Thanks for the help.
{% comment %} custom code show spare parts metafields {% endcomment %}
{%assign spare_parts = product.metafields.spare-parts %}
{%if spare_parts.size > 0 %}
<div id="metafields-spare-parts" class="product__blocks dynamic-blocks is-flex is-flex-wrap is-justify-center has-padding-bottom">
<div class="shopify-section product__block block__recommended-products">
<section class="section is-width-wide">
<div class="container">
<div class="heading-wrapper--recommended-products heading-wrapper heading-wrapper--short one-whole column is-flex is-flex-column">
<h3 class="recommended-products__title title">
Spare Parts
</h3>
<div class="heading-divider heading-divider--short">
</div>
</div>
{% for field in spare_parts %}
{% assign site_url = shop.url | append: "/products/" %}
{% assign spare_parts_handle = field | last %}
{% assign full_url = site_url | append: spare_parts_handle %}
<div class="one-eighth medium-down--one-fourth small-down--one-half column has-thumbnail-sticker thumbnail product__thumbnail product__grid-item thumbnail__hover-overlay--false has-padding-bottom">
<div class="product-wrap">
<div class="product-image__wrapper">
<div class="image__container product__imageContainer">
<a href="{{full_url}}">
<div class="image-element__wrap" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; max-width: 1024px;">
<img alt="" sizes="341px" src="{{all_products[spare_parts_handle].featured_image| img_url: '400x400'}}" width="1024" height="1024">
</div>
</a>
</div>
</div>
<div class="thumbnail__caption text-align-center">
<div class="product-thumbnail">
<a href="{{full_url}}" class="product-thumbnail__title">{{all_products[spare_parts_handle].title}}</a>
<span class="product-thumbnail__price price">
<span class="money">
{{all_products[spare_parts_handle].price | money}}
</span>
</span>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
</div>
</div>
{%endif%}