This type of requirement is very common since many times we do not want to show the % discount in the product gallery but rather we want to put a symbol of a specific event or highlight one product over another. This video is made on the turbo template.

 v class="sale_banner thumbnail_banner"><img src="CASE YOUR IMAGE" 
align="right" style="width:60%;height:60%;" />
 I leave you the product-detail.liquid
 {% assign collection_handles = product.collections | map: 'handle' %}
 <div class="thumbnail-overlay">
 <a href=" {{ product.url | within: collection }} " itemprop="url" class="hidden-product-
 link"><h1> {{ product.title }} <h1></a>
 <div class="info">
 {% if settings.thumbnail_hover_enabled and settings.quick_shop_enabled %}
 {% include "product-info" %}
 {% include 'quick-shop-button' %}
 {% elsif settings.thumbnail_hover_enabled %}
 {% include "product-info" %}
 {% elsif settings.quick_shop_enabled %}
 {% include 'quick-shop-button' %}
 {% endif %}
 </div> 
</div>
 <div class="banner_holder">
 {% if product.available %}
 {% if settings.sale_banner_enabled and product.compare_at_price_max >
 product.price %}
 <div class="sale_banner thumbnail_banner"><img
 src="https://cdn.shopify.com/s/files/1/2656/3744/files/apoyame_redondo.png?20330"
 align="right" style="width:60%;height:60%;" />
 </div>
 {% endif %}
 {% endif %}
 {% if collection_handles contains 'new' %}
 <div class="new_banner thumbnail_banner"> {{ 'collections.general.new' | t }} </div>
 {% endif %}
 {% if collection_handles contains 'pre-order' %} 
<div class="preorder_banner thumbnail_banner"> {{ 'collections.general.pre_order' |
 t }} </div>
 {% endif %}
 </div>

DO YOU PREFER TO DO IT WITH AN APP?