How can I add a banner image within the product grid in the collection template? (see below) [grid-1.PNG] I added this code to my collection template {%- if forloop.index == 1 -%} and it places the images on the second product grid instead of the first one, how do I put the images on the first on…

Hi @albertloekito , Sorry, you didn’t tag me, so I didn’t get the notification before. Please change all code: {% paginate collection.products by section.settings.coll_num_per_page_int %} {%- liquid if section.settings.show_image_behind_heading and collection.image assign header_image_enabled =…

Hi @LitExtension Sorry it did not work, see below https://59ucm304k9f421j1-1608220771.shopifypreview.com

Hi @albertloekito , Please change code: {% if collection.handle == 'new-arrivals' %} {%- if forloop.index == 4 -%} [ ](https://yellowboxshoes.com/collections/all-sale) [ ](https://yellowboxshoes.com/collections/all-sale) {%- endif -%} {%- endif -%}…

Hi @LitExtension Sorry still not working https://2lvpuu3rsk05tioy-1608220771.shopifypreview.com I try to make something like this below, so product 3 and 4 have full banner https://sokoglam.com/collections/cleansing-balms

Hi @albertloekito , I got the wrong information, I think you are trying to show the full banner. Are you wanting this? show only 1 image for positions 3 and 4 [Screenshot.png] Please change code: {% if collection.handle == 'new-arrivals' %} {%- if forloop.index == 2 -%} [ ](…

Hi @LitExtension The code works great, and sorry one last thing Can I show the banner only on the first page of the collection?

Hi @albertloekito , Please change all code: {% if collection.handle == 'new-arrivals' %} {%- if forloop.index == 2 and paginate.current_page == 1 -%} [ ](https://yellowboxshoes.com/collections/all-sale) {%- endif -%} …

Hi @LitExtension it works great, Thank you so much for all your help, appreciate it.

Hi @LitExtension Sorry forgot to ask you one more thing, how do I put a text overlay on the images? I try to create a text container but the text is not on top of the images.

Hi @albertloekito , You can add text and send me a link preview, I will check it

Hi @LitExtension Here’s the link https://o3rys3kj7da9h2rq-1608220771.shopifypreview.com

Adding Banner Image To Product Grid In Collection Template

Store Design

LitExtension February 15, 2023, 7:19am 22

Hi @albertloekito ,

Please change code image:

[
      
    
text

](https://yellowboxshoes.com/collections/all-sale)

Hope it helps!

Topic		Replies	Views
Add static image or text to collection grid Store Design	11	92	October 5, 2022
How can I add banner images to my collections? Store Design design , collection-page	4	81	January 20, 2023
Create a "See More" button at the end of a Featured Collection in Home Page - BROOKLYN THEME Store Design	13	90	August 26, 2021
Collection page on mobile ( Palo Alto Theme) Shopify Discussion	4	101	September 4, 2020
HELP PLS. Add Collection description to Product page Technical Q&A	0	25	April 8, 2022

Adding Banner Image To Product Grid In Collection Template

Related topics