adding Image in the product grid dawn theme

[ChaletEtCeci]

Hi,

I would like to display an image in the product grid.

I would like to add the image on the first page after 2nd product.

Please see reference image below,

I've tried below code in main-collection-product-grid.liquid but did not work

{% if forloop.index == 4 and current_page == 2 and collection.title == "Sale" %}
        <li class="grid__item medium-up--two-quarters" >
          <div class="grid-view-item product-card " style="height: 100%;">
            {{ 'banner1.png' | asset_url | img_tag }}
          </div>
        </li>
        <li>
        </li>
{%endif%}

Can anyone help me find the solution?

my website is 

www.shopchaletetceci.com

[ChaletEtCeci]

*Update

with the code below, I was able to show images in the product grid.

However, I don't want to banner to be looped, only show 1 photo in the page.

I want to show image like the table below.

product	product	[Image	Here]
product	product	product	product
[Image	Here]	product	product
product	product	product	product
product	product	product	product

{% for product in collection.products %}
<!-- Render product details here -->
{% if forloop.index == 5 %}
<!-- Insert static image after every 3rd product -->
<img src="https://cdn.shopify.com/s/files/1/0767/5379/7397/files/banner1.png?v=1712786388" alt="Static Image 1" style="height:75%; width:66%;">
{% elsif forloop.index == 8 %}
<!-- Insert static image after every 6th product -->
<img src="https://cdn.shopify.com/s/files/1/0767/5379/7397/files/welcome_banner_6.png?v=1712787807" alt="Static Image 2"style="height:75%; width:66%;">
{% endif %}
{% endfor %}

This is what is currently showing with that code

[jeroenvandepol]

Hi, did you manage to fix it? If so, can you share how you did it?

Thank you for your help.