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

@LitExtension No worries, thank you for the code it looks great now, can I ask you 2 more questions if you don’t mind Let’s say I want to add the banner on the 3rd and 4th images (as a wide banner) how can I do that? Is it possible to show the banner on every specific collection page, let’s sa…

Hi @albertloekito , Please send me the preview link, I will check it

Hi @LitExtension here you go, please check on new arrivals collection page. Thank you https://ozm1k77wkjlocrch-1608220771.shopifypreview.com

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

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

Adding Banner Image To Product Grid In Collection Template

Store Design

albertloekito February 8, 2023, 4:03pm 12

Hi @LitExtension Sorry it did not work, see below

https://59ucm304k9f421j1-1608220771.shopifypreview.com

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