Trick to incorporate banners within collection pages

[Krass]

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!

[LivOliver]

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 🙂

[Krass]

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. 

[taylormcgee]

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 

[LinnN]

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

[GFW-webAdmin]

I like this solution! However, do you have an updated draft for how to get it working on a 2.0 theme?

thank you.

[zied_drira]

Thanks a lot for sharing this.

This is exactly what I am looking for.

Any idea where to put it in Dawn theme?

Thanks

[zied_drira]

@Krass thanks a lot for sharing this.

In Dawn theme, I am able to show the banner as 1 product but when I put medium-up—two-quarters, the banner still occupy only 1 product space.

Any idea how to solve this ?
Thanks

[LinnN]

Sorry for jumping in here, but would you mind sharing where you added the code in Dawn theme?

[zied_drira]

Here is where you can add the code in Dawn theme:

File name: main-collection-product-grid.liquid

Just before this code:

          {%- endfor -%}
        </ul>

        {%- if paginate.pages > 1 -%}
          {% render 'pagination', paginate: paginate, anchor: '' %}
        {%- endif -%}
      </div>
    {%- endif -%}
  {%- endpaginate -%}
</div>

[SmallRobot]

Hi ya and how would you add the image to the page?

[Nuka]

hi
would you mind showing where can i put it in the impulse theme?

[martino3]

I did something similar but used a custom blog type and it's featured image and metafields to insert the featured image (same size as the product tile) into the collection:

I'm using a custom theme but this should apply to most themes.
In the collection-main.liquid file (or the file that your theme loops through the products for the collection), pass the count variable to the file that places the products in the collection:

  {% for product in collection.products limit: 36 %}
       {% include "product-item", count: forloop.index %}
  {% endfor %}

And then in the main loop (in this case product-item.liquid):

{% comment %}
  Using marketing-promo blog posts as marketing promos in collections. 
  Metadata fields controls positioning, URL, and promo size. 
  Tags in blog post equivalent to collection title control placement in collection.
{% endcomment %}
{% assign nowTime = 'now' | date: '%s' %}

{% for article in blogs.marketing-promos.articles %}

  {% assign adnum = article.metafields.marketing.ad_position %}
  {% assign adurl = article.metafields.marketing.ad_url %}
  {% assign adsize = article.metafields.marketing.ad_size %}
  {% assign adpages = article.metafields.marketing.ad_pages %}
  {% assign dateStart = article.metafields.marketing.ad_start.value | date: '%s' %}
  {% assign dateEnd = article.metafields.marketing.ad_end.value | date: '%s' %}
  
  {% comment %} Start/stop appearance of promos at specified date/time {% endcomment %}
  {% if dateStart < nowTime and dateEnd > nowTime %}
 
  {% comment %} Don't allow triple width promo to be placed anywhere but first column {% endcomment %}
  {% if adsize == "Triple" %}
    {% assign mod = adnum | modulo: 3 %}
    {% case mod %}
      {% when 0 %}
        {% assign adnum = adnum | minus: 2 %}
      {% when 2 %}
        {% assign adnum = adnum | minus: 1 %}
    {% endcase %}
  {% endif %}

  {% comment %} Don't allow double width promo to be placed in column 3 {% endcomment %}
  {% if adsize == "Double" %}
    {% assign mod = adnum | modulo: 3 %}
    {% if mod == 0 %}
      {% assign adnum = adnum | minus: 1 %}
    {% endif %}
  {% endif %}

  {% for tags in article.tags %}
    {% if collection.title contains tags %}
      {% comment %}count var passed from collection-main as forloop.index - index of product tile{% endcomment %}
      {% if count == adnum %}
        {% for pages in adpages.value %}
          {% if current_page == pages %}
            {% if adsize == "Double" %}
              <div class="col-xs-12 col-sm-12 col-md-8 no-padding product-list">
            {% elsif adsize == "Triple" %}
              <div class="col-xs-12 col-sm-12 col-md-12 no-padding product-list-{{ adsize }}">
            {% else %}
              <div class="col-xs-6 col-sm-6 col-md-4 no-padding product-list">
            {% endif %}
              <div class="scaleOnHover product-list-inner">
                <div class="product-area text-center clearfix">
                  <div class="ad-thumbnail-{{ adsize }}"> 
                    <a onclick="dataLayer.push({ 'event' :  'trackEvent',  'eventCategory' :  'Collection Marketing Promo',  'eventAction' :  'Click',  'eventLabel' :  '{{ article.title }}' });" {% if adurl != blank %} href="{{ adurl }}" {% endif %} id="img-{{ count }}" target="_blank" rel="noopener"><img style="max-width: unset;" src="{{ article.image | img_url: 'large' }}" alt="{{ article.image.alt | escape }}"></a>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      {% endif %} 
    {% endif %} 
  {% endfor %}
{% endif %} {% comment %}end if datetime{% endcomment %}
{% endfor %}

The metafields used are as follows:


There are options to show which page in the collection the ad appears on, a URL for the ad to link to (optional), the position in the collection that the ad appears, the size of the ad (we are using a 3-column layout for collections, the ad can be a single tile, two, or three tiles wide), the time and date that the ad begins appearing, and the ending date and time. The ad will not appear after the end time.
There are some CSS rules attached to some of this code (we're using bootstrap), reply if you'd like to see more or need info on how to add this to your theme.

[Poense]

Hi Martino,

It seems like you have created exactly what we have been looking for. Can you provide me with more details on what needs to be done after modifying the code, please?

Thank you in advance and wish you a great day. 🙂

Sincerely


Posense

[martino3]

Hi

What exactly do you need to know?  One needs to set up the metafields first, then add the code. Then the custom blog type needs to be created.  Some of the CSS may need to be modified depending on your theme.  Let me know if you need assistance

Martino

[ChrisRndr]

Hi !

Thanks for sharing your knowledge with us, it helps me a lot as a beginner. I work on a custom theme and would like to know how to create such blog posts and if we can create a specific type for promo banners/tiles ?

I hope we can work this out, thanks again !