Adding static image to grid in collection template

Adding static image to grid in collection template

WickedAromas
Visitor
3 0 0

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

Replies 2 (2)

Guleria
Shopify Partner
3238 630 906

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal

EBOOST
Shopify Partner
1087 292 324

Hi @WickedAromas ,

May I suggest to update code these steps :

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

2. add a  metafield for collection 

EBOOST_1-1719888332348.png

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

EBOOST_3-1719889251466.png

 

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  -%}  

EBOOST_2-1719889104778.png

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

EBOOST_4-1719889495878.png

Ex: 

Page 1: 

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

EBOOST_5-1719889590100.png

Page 2: 

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

EBOOST_6-1719889633215.png

 

 

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

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips