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

albertloekito February 13, 2023, 3:20pm 18

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

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

Adding Banner Image To Product Grid In Collection Template

Related topics