How to add static clickable images in product grid without buttons?

[SpaKovsKi]

Hello,

Our website collection link - https://laromes.shop/collections/women 

Website collection link that has what expected result - https://dossier.co/collections/all-perfumes 

Basically, we are looking to add static image banners in various collection product grids and in different positions with product announcements and links to other collections. These banners shouldn't have any buttons but should be clickable to a specific url path. Should have rounded corners like the standard product card. How can we achieve similar result?

Thanks in advance

[wo]

Based on your theme, I can provide a general idea

Find code similar to the following in main-collection.liquid

{%for product in collection %}
***
<div class="grid__item">***</div>
***
{%enfor%}

Add flex order style

<div class="grid__item" style="order:{{ forloop.index }}">***</div>

Then, your newly added banner can be inserted into the desired position through order.

[SpaKovsKi]

Hey Wo,

Didn't exactly work, maybe I missed a step. It is possible to be a little more detailed, please? How would I also insert it to be exact? Here is the part of the code that you are reffering to:

{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
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,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id

%}
</li>
{%- endfor -%}   

 Thanks in advance

[wo]

{%- for block in section.blocks -%}
{%- style -%}
 .promo--{{ block.id }}{order:{{ block.settings.order }};}
{%- endstyle -%}
<div class="promo promo--{{ block.id }}">
<img src="">
</div>

{%- endfor -%}


{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
style="order:{{ forloop.index }}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
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,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id

%}
</li>
{%- endfor -%}  
{% schema %}
***
"block":[
{
"name":"",
"type": "",
"settings":[
{
"type": "range",
"id": "order",
"label": "Order",
"min": 1,
"max": 100,
"step": 1,
"default"：1
}]
}
]

***
{% endschema %} 

Simple code, just adjust it yourself.