Skip to main content

TheGenieLab Blog

How to add conditional custom banners on product pages in Shopify

20 November 2015 by Genie Lab


If you like the article, please share it!


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 our Shopify Experts today on (UK) +44 (0) 2920 837 438 or (US) +1 305-762-0130, via Twitter @thegenielab or by E-mail wish@thegenielab.com.


Enjoyed our article? Share it!

Get some advice about your project - leave a message and we'll be in touch!

Find out more about our ecommerce stores

Read about our API development services


Leave a Reply

All fields are required. We won't spam you!


Showing 1 - 0 of 0 comments

© TheGenieLab LLC

A Limited Liability Company

Incorporated in the State of Florida No. L1000082688

Head Office: 400 NW 26th Street • Miami, FL • 33127 • +1 305-762-0130

UK Office, ICE-Britannia House, Caerphilly Business Park, Van Road, Caerphilly, CF83 3GG Tel: +44 (0)3333 445 809:

Privacy Policy | Terms