Adding banner ad amongst products on collection page

Ellimc
Tourist
3 0 1

I am looking for a solution in adding a banner amongst my products on all collection pages. See example below where there is an ad/call to action banner placed between products. 

 

My page is beautiful-people-jewelry.myshopify.com I am using a custom theme.

Screenshot_1.pngScreenshot_2.png

Replies 14 (14)

suyash1
Shopify Partner
8962 1113 1460

@Ellimc - can you please give reference site link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
Ellimc
Tourist
3 0 1
suyash1
Shopify Partner
8962 1113 1460

@Ellimc - actually when you click image you have a pop up which shows add to cart button

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
Ellimc
Tourist
3 0 1

It definitely doesn't do that on my side. It is just a static image with a text box on the side. Any idea on how to do this? 

I found this:

https://community.shopify.com/c/shopify-design/trick-to-incorporate-banners-within-collection-pages/...

But I couldn't figure it out on my theme

GFW-webAdmin
Shopify Partner
17 1 4

This is great! how did you get even that much? are you using a 2.0 theme? 

Nuka
Visitor
2 0 0

Hi
would you mind showing how to use it in the impulse team?

martino3
Tourist
9 0 4

Hi

 

I managed to do this using a custom blog type to use a featured image that is the same size as the collection product tile, and blog post metafields to control where in the collection the ad appears. If someone is interested I can post code for this, I'm using a custom theme.

lukasss
Tourist
7 0 2

Hey Martino3, would you please be able to post your code for this? I am looking to implement this for my theme.

martino3
Tourist
9 0 4

Set up a custom blog type, I called mine marketing-promos.
Use the featured image for the ad in the collection.
Add metafields to the blog post.
There is some css associated with the ad sizes - we're using a three-column collection grid in Bootstrap.
One thing - the 'count' variable is passed from the collection-main loop - this may be a different file in your theme but the concept is the same - to show the collection there is a loop that cycles through products:

 

 

 

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

 

 

 

 

code in product-item file:

The tag(s) in the blog post match the name of the collection the ad appears in - more than one tag the names must match exactly the collection names

 

 

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

 

 

 

 

 


Metafield definitions:
Screen Shot 2023-08-17 at 6.08.04 AM.png

 

lukasss
Tourist
7 0 2

Ahhh that is perfect!!

Appreciate that mate, your test store is exactly what we were after, just didn't know the best way to go about it but thats easy enough.

Cheers 🙂

martino3
Tourist
9 0 4

Excellent! Hope it works well for you - let me know if you need assistance with the code, and send a link when you get it going!

Martin

lukasss
Tourist
7 0 2

People like you that make this community great.

I'll let you know how I go. Legend!

martino3
Tourist
9 0 4

One thing - I'm not sure how performant this code will be at scale - we've deployed the code to our production site and are rolling out the collection ads in September and going to stress-test it. Hopefully it doesn't slow down our collection pages too much.  We'll find out. I'll post back here with results. 

martino3
Tourist
9 0 4