Uploaded June 2025 | Updated September 2026, 10 hours ago
In this tutorial i will show you how to show discount or sale badge with the exact percentage off on your Shopify product page and product cards instead of just the word Sale.
By replacing the generic sale badge with a calculated percentage discount your Shopify store can display more precise value to your customers making your deals feel more transparent and enticing Showing the discount badge with percentage directly on product cards and product pages increases conversion by letting buyers instantly see how much they’re saving especially on bigger markdowns.
In the video i will show you how to calculate the discount percentage using product pricing data apply dynamic percentage badges on both the product page and the collection cards and customize the look of your Shopify sale badge to match your theme’s style You’ll also learn where to place the code so it shows up properly whether it's a collection grid homepage or a single product view.
CODE : https://onhow.codes/shopify-show-discount-sale-badge-percentage/
If you have any questions or suggestions my Instagram : instagram.com/anas_elmedlaoui
About Me:
My name is Anas El Medlaoui, and I have dedicated the past nine years to mastering various aspects of the digital world, including Shopify store development, WordPress website creation, social media marketing, and e-commerce solutions. Throughout this journey, I have accumulated extensive experience across diverse digital disciplines, although exploring multiple projects simultaneously posed its own set of challenges.
Driven by a passion for empowering others, I launched this YouTube channel after considerable reflection, aiming to share valuable insights and practical knowledge. My goal is to equip individuals committed to achieving online success with accessible, actionable information grounded in the principle that knowledge should be available to everyone.
#shopify #discount #sale
In this tutorial i will show you how to show discount or sale badge with the exact percentage off on your Shopify product page and product cards instead of just the word Sale.
By replacing the generic sale badge with a calculated percentage discount your Shopify store can display more precise value to your customers making your deals feel more transparent and enticing Showing the discount badge with percentage directly on product cards and product pages increases conversion by letting buyers instantly see how much they’re saving especially on bigger markdowns.
In the video i will show you how to calculate the discount percentage using product pricing data apply dynamic percentage badges on both the product page and the collection cards and customize the look of your Shopify sale badge to match your theme’s style You’ll also learn where to place the code so it shows up properly whether it's a collection grid homepage or a single product view.
CODE : https://onhow.codes/shopify-show-discount-sale-badge-percentage/
If you have any questions or suggestions my Instagram : instagram.com/anas_elmedlaoui
About Me:
My name is Anas El Medlaoui, and I have dedicated the past nine years to mastering various aspects of the digital world, including Shopify store development, WordPress website creation, social media marketing, and e-commerce solutions. Throughout this journey, I have accumulated extensive experience across diverse digital disciplines, although exploring multiple projects simultaneously posed its own set of challenges.
Driven by a passion for empowering others, I launched this YouTube channel after considerable reflection, aiming to share valuable insights and practical knowledge. My goal is to equip individuals committed to achieving online success with accessible, actionable information grounded in the principle that knowledge should be available to everyone.
#shopify #discount #sale
