how to display releted product

[innois]

Hii,

I want to display releted products on product details page, so i have created metafield for that, below liquid code i use for releted product, Now code is working i am able to display the releted products but in some products only 1 or 2 releted products are display but i have assign 4 to 5 products from metafeilds for all products.

<style>
.item {
margin-top: 20px;
}
responsive-image img {
opacity: 0;
width: 100%;
}
#related-products- .sf__pcard {
position: relative;
box-shadow: 0px 4px 4px 2px #0b352238;
padding: 0px 0px 0px 0px !important;
border-radius: 15px;
overflow: hidden;
}#related-products- .ZipCodeRestrict {
width: 100%;
display: none;
}
#related-products- .sf__pcard-action-atc {
padding: 0px 20px 0px 20px;
margin-top: 20px;
}
</style>

{% if product.metafields.custom.reletedproducts %}
{% assign relatedProducts = product.metafields.custom.reletedproducts.value %}
<!-- check at least one recommended product is available -->
{%- liquid
assign has1product = false
for product in relatedProducts
if product.available == true
assign has1product = true
endif
endfor
-%}
{% if has1product %}

<div class="related-products" id="related-products-{{ block.id }}">

<div class="container">
<div class="row">

{% for product in relatedProducts %}
{% if product.available == true %}

<div class="col-lg-3 col-6">
<div class="item">

<div class="sf__pcard">
<div class="sf__pcard-image">
<div class="overflow-hidden cursor-pointer relative sf__image-box">

<div class="items-center">
<div class="spc__main-img spc__img-only">
<responsive-image class="sf-image">
<a href="{{ product.url }}" class="related-product" aria-label="{{product.title}}" title="{{ product.title }}">
<img class="related-product__image" src="{{ product.images[0] | img_url: '500x' }}" alt="{{ product.title }}">
</a>
</responsive-image>
</div>
</div>
</div>
</div>

<div class="sf__pcard-content custom-call text-center">
<div class="mt-3 lg:mt-5">
<div class="max-w-full w-full">
<h3 class="block text-base">
<a class="sf__pcard-name" href="{{ product.url }}">{{ product.title | escape }}</a>
</h3>
<a class="sf__collec-name" href="{{ collection.url }}">{{ collection.title | escape }}</a><br>
{% if product.compare_at_price_max > product.price %}
<div class="customdiscount">
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
</div>
{% endif %}
{% render 'product-prices', use_variant: true, product: product, show_sale_badge: true, price_text_size: 'text-xl md:text-2xl' %}
</div>
</div>
</div>

<div class="sf__pcard-action-atc">
<div class="sf__pcard-quick-add ">
<div class="actions-block">
{% render 'product-form',
section: section,
section_id: section.id,
product: product,
is_preorder: is_preorder,
product_form_id: product_form_id,
product_form_class: product_form_class,
current_variant: current_variant,
show_quantity_selector: false,
show_sizeguide: false
%}
</div>
</div>
</div>
</div>

</div>
</div>
{% endif %}
{% endfor %}

</div>
</div>
</div>
{% endif %}
{% endif %}