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

SpaKovsKi
Tourist
13 0 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

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

Replies 3 (3)

wo
Shopify Partner
77 20 17

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
Tourist
13 0 1

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
Shopify Partner
77 20 17

 

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