adding Image in the product grid dawn theme

ChaletEtCeci
Shopify Partner
6 0 0

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,

 

 

ChaletEtCeci_1-1712780895104.png

 

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

Reply 1 (1)

ChaletEtCeci
Shopify Partner
6 0 0

*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.

productproduct[ImageHere]
productproductproductproduct
[ImageHere]productproduct
productproductproductproduct
productproductproductproduct

 

{% 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

ChaletEtCeci_0-1712788223665.png