A user seeks to insert banner ads or call-to-action images between products on Shopify collection pages, providing reference screenshots and a competitor example (bynouck.com).
Proposed Solutions:
Custom blog-based approach: One developer shared detailed code using a custom blog type (āmarketing-promosā) with featured images sized to match product tiles. The solution uses:
Theme & app alternatives:
Status: The custom code solution was well-received and is being tested for performance at scale before full production deployment in September. Multiple users requested implementation assistance or quotes for custom work.
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.
@Ellimc - can you please give reference site link?
@Ellimc - actually when you click image you have a pop up which shows add to cart button
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:
But I couldnāt figure it out on my theme
This is great! how did you get even that much? are you using a 2.0 theme?
Hi
would you mind showing how to use it in the impulse team?
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.
Hey Martino3, would you please be able to post your code for this? I am looking to implement this for my theme.
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" %}
{% elsif adsize == "Triple" %}
{% else %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %} {% comment %}end if datetime{% endcomment %}
{% endfor %}
Metafield definitions:
See example on our test site here: https://test-corporatedirectapparel.myshopify.com/collections/mens-jackets
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 
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
People like you that make this community great.
Iāll let you know how I go. Legend!
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.
hi, can you help me do this customization!
can you give me a quotation , email [email removed]
I need this for one website, can you please contact me? hansr@maiservice.com
A few themes offer the functionality to add āfeature imagesā into the grid like this, such as the Impact theme. However, I found it quite cumbersome to maintain the collection pages using this method.
Thereās also an app called āDepict Custom Collection Gridsā that allows you to add images and videos with text/links into the grid. They have a really nice visual drag-and-drop grid editor - can recommend you to give it a try.
