Discount/Sale Badge

[Hesepim]

Hi everyone,

I’m looking to add a discount/sale badge to my products. Can anyone help me with this?

Thanks in advance.

[Sweans · Accepted solution]

Hi @Hesepim ,

To create a bade on your store please do the steps below:

-Create a banner image with discount/sale details.

-Upload the image to the Shopify store under Settings > Files.

-Find the file where you want to show the badge, it may be either product-grid-item.liquid, product-card.liquid, or product-template.liquid

-Add the below code:

{% if product.compare_at_price > product.price %} 
<div class="sale-badge"> 
<img src="{{ 'badge-url' | asset_url }}" alt="Sale"> 
</div>
{% endif %}

-Add the below css code to base.css

.sale-badge {
 position: absolute; 
top: 10px; 
right: 10px; 
z-index: 10;
} 
.sale-badge img { 
width: 100px;
height: auto; 
}
.product-image-wrapper { 
position: relative; 
}

If you find it difficult to update the theme file, you can also check for shopify apps to display the badge.

I hope this helps! If it does, please like it and mark it as a solution!  
If you need further assistance, feel free to reach out!

Regards,

Sweans

[Sweans · Accepted solution]

Hi @Hesepim ,

To create a bade on your store please do the steps below:

-Create a banner image with discount/sale details.

-Upload the image to the Shopify store under Settings > Files.

-Find the file where you want to show the badge, it may be either product-grid-item.liquid, product-card.liquid, or product-template.liquid

-Add the below code:

{% if product.compare_at_price > product.price %} 
<div class="sale-badge"> 
<img src="{{ 'badge-url' | asset_url }}" alt="Sale"> 
</div>
{% endif %}

-Add the below css code to base.css

.sale-badge {
 position: absolute; 
top: 10px; 
right: 10px; 
z-index: 10;
} 
.sale-badge img { 
width: 100px;
height: auto; 
}
.product-image-wrapper { 
position: relative; 
}

If you find it difficult to update the theme file, you can also check for shopify apps to display the badge.

I hope this helps! If it does, please like it and mark it as a solution!  
If you need further assistance, feel free to reach out!

Regards,

Sweans

[topnewyork · Accepted solution]

Hi @Hesepim , kindly checkout the below video

https://youtu.be/HGWcMEyVs_s?si=CXOrBGprSmlVqvzF

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[tobebuilds]

Hi Hesepim,

What theme are you on? In most themes, if a product has a "Compare at price" set, you will see discount/sale badges on its product page. This approach requires neither coding nor an app.

https://help.shopify.com/en/manual/products/details/product-pricing/sale-pricing

Can you please provide more details about what type of offer you're trying to create? Is this a discount you created in Shopify that you want to display on product pages, or are you fine with just using the compare at price to show badges?

Best,

Tobe