How to add conditional custom banners on product pages in Shopify

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.

{{ ‘products.product.add_to_cart’ | t }} {% if settings.product_quantity_message %} {% endif %}
{% 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 wish@thegenielab.com.