Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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.
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
{%- 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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025