Trick to incorporate banners within collection pages

Krass
Excursionist
14 2 6

I wanted to share a trick I came up with to add banners in between products on a collection page. I wasn't able to find how to do it elsewhere so I thought it might be helpful to others. 

 

I've used it to break up a products page by putting up banners that recommend sales or other specials. That way you don't have a grid of a dozen products over multiple pages which may get boring to a customer. I'm happy to hear other people's feedback or if there is an easier way to do this!

 

 

  • For this example, I am using Debut and modifying the collection-template.liquid file 
  • Find the place in the file with the below code. This is where Shopify pulls each product to add to a collections page. The work is actually done in the product-card-grid.liquid file, but we don't need to go into it for  this case. Each of the <li> items are slots where a product goes

 

     <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>

 

 

 

  • In order to add a banner or a button where a product would usually go, we need to ad a <li> item that only occurs when we want it. I like showing it on the second or third page of a collection since that is where customers start to loose interest since they've scrolled though many products. Adding the code below immediately after will create two <li> elements after the 4th product on the 2nd page of the Sale collection. The reason we are creating two <li> elements is that our banner takes the place of two products in the grid. Note that this assumes a grid of 4 columns on large screens and 2 columns on small screens. 

 

{% if forloop.index == 4 and current_page == 2 and collection.title == "Sale" %}
        <li class="grid__item medium-up--two-quarters" >
          <div class="grid-view-item product-card " style="height: 100%;">
            {{ 'banner1.png' | asset_url | img_tag }}
          </div>
        </li>
        <li>
        </li>
{%endif%}

 

  • To add a banner or button that only takes the place of one product, we can use a similar logic. The below code will insert the banner "banner2.png" after the 1st product on the last page of the Sale collection.
{% elsif forloop.index == 1 and current_page == paginate.pages and collection.title == "Sale"%}
        <li class="grid__item medium-up--one-quarter small--one-half" >
          <div class="grid-view-item product-card" >
            {{ 'banner2.png' | asset_url | img_tag }}
          </div>
        </li>   

 

Happy experimenting!

 

Message me if it sounds like I talked about something you are struggling with
Happy to help anyone trying to improve their store
LivOliver
New Member
1 0 0

Hi, We are using the brooklyn theme which doesn't offer a banner for the collection pages.  Can you let us know if the information you provided would help us 

creating a full width banner on top of each collection page? Furthermore, if we needed editable text is this something that can easily be done? Thanks for your help :)

0 Likes
Krass
Excursionist
14 2 6

Hi, 

I think that should be even easier that what I described. If you want the same banner to appear on every collections page, the collection-template.liquid file can be edited to include it. You can either make the banner an image and include a link to that image, or you could do it with code if it's a simple one-color background.

 

Let me know if that made sense. I'm happy to chat and explain more. 

Message me if it sounds like I talked about something you are struggling with
Happy to help anyone trying to improve their store
0 Likes
taylormcgee
Explorer
56 2 9

I'm using Brooklyn theme too and would like to add four clickable pictures in a banner type to the collection pages. If you could help me out I would appreciate it. 

Here is an example of what it would look like 

Screen Shot 2020-12-13 at 3.21.30 PM.png

0 Likes
LinnN
New Member
2 0 1

Hi!

I've been looking for a similar function for ages. I'm using Prestige theme and the collection-template file looks quite different. Would you be able to help me modify the code?

Many thanks

0 Likes