Latest news from Shopify and eCommerce

  • TheGenieLab

How to add conditional custom banners on product pages in Shopify

Updated: Mar 26, 2020

Shopify – Conditional Banners for Product Page

With Black Friday and Christmas around the corner, retailers are planning their discount and promotional strategy to implement into their ecommerce store.

One idea is to place custom banners on your Shopify product pages for products which belong particular brands or categories in order to communicate your deal or offer.

Follow the tutorial below which will show you how you can achieve this for your Shopify store.

We are going to be utilising Shopify’s product collections. You can use an existing collection if you are promoting a specific category or create a new one. The custom banners will display only for the products assigned to these collections so it’s completely flexible.

1. Prepare your promotional banners or promotional message.

2. Navigate in your Shopify admin to Online Store>Themes>Edit HTML/CSS 

3. Navigate to the Asset folder and upload your promotional banner

Promotional banners uploaded

4. Navigate to product.liquid file under the Templates folder

5. Insert the code below where you would like your banner to appear

Make sure you change the collection handle to the handle of the collection you wish to use.

{% for c in product.collections %} {% if c.handle == “dog-food” %} {{ ‘black-friday-dog-food.png’ | asset_url | img_tag’ }} {% endif %} {% endfor %} {% for c in product.collections %} {% if c.handle == “cat-food” %} {{ ‘black-friday-cat-food.png’ | asset_url | img_tag }} {% endif %} {% endfor %}

We will be placing it below the ‘Add to Cart’ button. To do this, find this piece of code below. It may differ depending on the Shopify theme you are using.

<button type=”submit” name=”add” id=”addToCart” class=”btn”> <span class=”icon icon-cart”></span> <span id=”addToCartText”>{{ ‘products.product.add_to_cart’ | t }}</span> </button> {% if settings.product_quantity_message %} <span id=”variantQuantity” class=”variant-quantity”></span> {% endif %} </form> <br> {% for c in product.collections %} {% if c.handle == “dog-food” %} {{ ‘black-friday-dog-food.png’ | asset_url | img_tag’ }} {% endif %} {% endfor %} {% for c in product.collections %} {% if c.handle == “cat-food” %} {{ ‘black-friday-cat-food.png’ | asset_url | img_tag }} {% endif %} {% endfor %}

After adding the code your banners will display on product pages if the collection handle for the product is either cat-food or dog-food.

6. The results

As you can see below we are now able to output unique banners on the product page for different product categories. This could be useful to you as a store owner if you need to make some quick changes to your store in time for Black Friday and Christmas.

If you need help implementing this on your Shopify store please speak with one of ourShopify Expertstoday on (UK) +44 (0) 2920 837 438 or (US) +1 305-762-0130, via Twitter@thegenielabor by E-mail

1,244 views0 comments

Technology Partners

Show More

Over 400+ projects delivered

Let us take your business to new heights.

(US) +1 305-762-0130   (UK) +44 2921 28 0699

  • White LinkedIn Icon
  • White Facebook Icon
  • White Twitter Icon

Our Expertise



The Company

Terms & Conditions

Privacy Policy


US Head Office:

400 NW 26th Street Miami, FL, 33127

 +1 305-762-0130

UK Office:

Falcon Drive, Cardiff, Mid Glamorgan,

CF10 4RU

+44 2921 28 0699

Subscribe for the latest news

© 2020 TheGenieLab LLC 


A Limited Liability Company | Incorporated in the State of Florida | No. L1000082688