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

Technical Q&A
, , ,
1

Hello,

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

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

Screenshot at Mar 24 16-28-39.png
Screenshot at Mar 24 16-28-39.png2774×1060 229 KB

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

2

Based on your theme, I can provide a general idea

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

{%for product in collection %}

***
*** {%enfor%}

Add flex order style

***

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

3

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

4 
{%- for block in section.blocks -%}
{%- style -%}
 .promo--{{ block.id }}{order:{{ block.settings.order }};}
{%- endstyle -%}

{%- endfor -%}

{%- for product in collection.products -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- 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

  %}

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