Adding banner ad amongst products on collection page
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.
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:
I am a developer and have completed the same request as per the client's requirements 🙂 Just connect with me so I can explain more 🙂
Community Blog Articles
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024