Adding static image to grid in collection template

[mandymallrat]

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

I've understood that you can add <img src="{{ 'image.png' | asset_url }}" alt="" /> to collection-template.liquid but I want it to cover the size of 2 products like the screenshot below. How can that be achieved?

[LitExtension]

Hi @mandymallrat,

Can you send me the site link or the code of the collection template file. I will check and guide you in detail.

Because if you want it to look like the screenshot you sent you to need to add a div with the appropriate outer class and put it in the "for product".

Hope it helps!

[mandymallrat]

The link is https://sokoglam.com/collections/cleansing-balms

[LitExtension]

Hi @mandymallrat,

Can you send me the link to your site where you want to add images like the demo. It's not the link that was displayed well. I will check it.

Hope it is clear to you.

[mandymallrat]

Hi, thank you for your reply.

The website I want it implemented in is at https://yaoskin.com/.

[LitExtension]

Hi @mandymallrat,

Please go to sections > collection-template.liquid file, find 'product in collection.products' and add code:

Next, go to Assets > theme.scss.liquid and paste this at the bottom of the file:

#Collection .grid{
  display: flex;
  flex-wrap: wrap;
}

Hope it helps!

[mandymallrat]

Thank you very much for the help. I've done exactly as you instructed, but the collection page still looks as usual. Here's my code:

Here's the preview link to the theme if that helps: https://2uhd1udk3ilbv9v6-30992433290.shopifypreview.com

What have I done wrong?

[LitExtension]

Hi @mandymallrat,

You need to move the code inside 'for'.

Hope it helps!

[mandymallrat]

Thank you for the quick response. I've just done that but it seems like it only made changes to some product image hover buttons. It doesn't show an image in the place of a product.

[LitExtension]

Hi @mandymallrat,

You can re-add it and send me the collection link. I will check it.

[mandymallrat]

Here's the link: https://2uhd1udk3ilbv9v6-30992433290.shopifypreview.com/collections/cosrx

[LitExtension]

Hi @mandymallrat,

I checked and it is still not added can you send me the staff account? I will help you check it quickly

[LitExtension · Accepted solution]

Hi @mandymallrat,

I checked and list products display code is loaded by app filter. So there's no way you can add the same image as the demo.

So you can just contact the app for support about it.

Hope it helps!

[albertloekito]

Hi @LitExtension  I tried to do the same with my theme, however when I enter {%- if forloop.index == 1 -%} it places the images on the second product grid instead of the first one, how do I put the images on the first one? Appreciate it if you can help me out.

[LitExtension]

Hi @albertloekito,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[albertloekito]

Done, here's the link

https://community.shopify.com/c/technical-q-a/adding-banner-image-to-product-grid-in-collection-temp...

Thank you

[johndepict]

we built a no-code collection page/grid builder so that you don't have to solve this with custom code: https://apps.shopify.com/depict

works natively, just ping me if you have any questions!