Hide Product From Related Products Section - DAWN Theme

[ManuelH]

Id like to hide the products with the "hidden" tag from the related products section. I have achieved removing them by adding this code: 

{% for recommendation in recommendations.products %}
{% unless recommendation.tags contains 'hidden' %}

// CODE TO DISPLAY RELATED PRODUCTS

{% endunless %}
{% endfor %}

However the problem then is that it leaves a hole with a missing replacement for the hidden product:

Anybody know how to replace it with another recommended product?

[ManuelH · Accepted solution]

SOLVED IT!

With a bit of help by my chatty friend "General Problem Terminator" i found the solution! 

I added code that kept track of how many products are being shown and add products if the necessary amount e.g. 4 in my case is not yet reached.

Here is the code that I added:

{% assign products_shown = 0 %}
{% unless recommendation.tags contains 'hidden' %}

// COMMENT: CODE THAT SHOWS THE RELATED PRODUCTS SECTION

{% assign products_shown = products_shown | plus: 1 %}
{% endunless %}
{% if products_shown >= section.settings.products_to_show %}
{% break %}
{% endif %}

Here below you can see the code and I marked the added code as bold:

<product-recommendations
class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.products_to_show | plus: 10 }}"
>
{% if recommendations.performed and recommendations.products_count > 0 %}
<h2 class="related-products__heading inline-richtext {{ section.settings.heading_size }}">
{{ section.settings.heading }}
</h2>
<ul
class="grid product-grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
role="list"
>
{% assign products_shown = 0 %}
{% for recommendation in recommendations.products %}
{% unless recommendation.tags contains 'hidden' %}
<li class="grid__item">
{% render 'card-product',
card_product: recommendation,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
</li>
{% assign products_shown = products_shown | plus: 1 %}
{% endunless %}
{% if products_shown >= section.settings.products_to_show %}
{% break %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
</product-recommendations>

If it helped please mark it as a solution