Adding static image to grid in collection template

[WickedAromas]

How can I add a static image within the product grid in the collection template?

[Guleria]

PLease check
https://community.shopify.com/c/technical-q-a/add-static-image-to-product-grid-in-collection-be-your...

[EBOOST]

Hi @WickedAromas ,

May I suggest to update code these steps :

1. Go to Store Online-> theme -> edit code

2. add a  metafield for collection 

3. Go to collections-> collection -> add data

4. in sections/main-collection-product-grid.liquid add code below like the screenshot below

{%  if collection.metafields.custom.static_image != blank %} 
                       {% assign images = collection.metafields.custom.static_image.value %}

                      {% for image in images %}
                        {% if forloop.index ==    paginate.current_page %}
                       <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 %}>
                          <img style="max-width: 100%" src=" {{ image | image_url: width: '1640x' }}" alt="" height="" width="" />
                       </li>
                          {%-  endif  -%} 
                     {%- endfor -%}          
                       {%-  endif  -%}  

I have 4 images for this collection. So it will how at 4 pages depend on pagination

Ex: 

Page 1: 

https://d3s0qdwc7jzbft9s-32574374026.shopifypreview.com/collections/all 

Page 2: 

https://d3s0qdwc7jzbft9s-32574374026.shopifypreview.com/collections/all?page=2

You can refer code here: https://github.com/eboost10/2640367/blob/main/2642389/sections/main-collection-product-grid.liquid