adding Image in the product grid dawn theme

Technical Q&A

Topic summary

A user is attempting to insert static banner images at specific positions within a product grid on a Shopify Dawn theme collection page.

Initial Goal:

  • Display a single image after the 2nd product on the first page of the collection grid
  • Reference image provided showing desired placement

Progress Made:

  • Initial code attempt in main-collection-product-grid.liquid failed
  • Updated approach successfully displays images in the grid using conditional logic ({% if forloop.index == 5 %} and {% if forloop.index == 8 %})

Current Problem:

  • Images are appearing repeatedly/looping throughout the grid instead of showing only once per specified position
  • Desired layout: strategic single image placements interspersed among products (after positions 2, 4, and 8 based on the table example)

Status:

  • Issue remains unresolved
  • Another user has inquired whether a solution was found, indicating ongoing interest in the fix
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

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
ChaletEtCeci_1-1712780895104.png897×725 340 KB

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

2

*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 %}

{% if forloop.index == 5 %}

Static Image 1

{% elsif forloop.index == 8 %}

<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
ChaletEtCeci_0-1712788223665.png645×858 524 KB

3

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

Thank you for your help.