how to show discount prices on shopify

Hi guys welcome back to websites pro I'm your  host Bilal Naseer and we are recording another  ,Shopify solution video in today's solution we  will learn how to add a percentage discount  ,off on our product so as you can see my screen  shows how much percent you are giving away as a  ,discount on each product and it shows a red color  banner on the product page on the collection page  ,and then on the single product page which will  look like this so without further ado let's get  ,into the tutorial but before that please don't  forget to subscribe my channel because it's free  ,yeah and you will get too many solutions which you  can implement and help your clients to earn more  ,through Shopify and also become a good freelancer  in upward or Fiverr so let's get into the tutorial,so guys, first of all, we are implementing  this solution on the dawn theme so if you're  ,using any other theme this code might not work  for you and I have this article up which I'll  ,put the link in the description below where you  can find all of the codes which you need to put  ,in the files of the themes to make it  look the way it was before which is this  ,so it will show the amount of person of how  much your discount giving on each product  ,okay now first step is to go  to the back end of our Shopify,and here we are now click on online store,after clicking on the online store you will see  a screen like this where you will need to edit  ,the code of this dawn theme to edit the code  click on actions and then edit chord before  ,editing the chord make sure to duplicate your  live theme if you're working on a live theme  ,so if you mess up anything on the code you can  easily divert it back now click on edit court  ,and as per the tutorial which i'll  put the link in the description  ,of this video you can see we need to  add this code on our price.liquid file  ,okay now let's search for price.liquid file so  here's a price.liquid file you can search it from  ,here by typing it price and you will see  the price.liquid file I go to this file,and in your price.liquid file go to the bottom  of the file where you can see if show badges  ,now from line number 85 to line number 87 we'll  replace this code with this code which we have  ,here i'll add more details on this uh blog  post so you will be easily find the line number  ,on where you need to replace the code  okay now i'll replace this and hit save,now we'll move to our next step which  is replacing this code with line number  ,94 in the cart dash product.liquidfile  now let's search for our cart,so,so here we have card dash product  dot liquid sorry its not cart its  ,card-product.liquid file I'll click on that,now let's go-to line number 94,so that's the code which we'll be  replacing let me maximize the size  ,so that's the span which we'll be  replacing from the code which we have here,copy this code,and now paste the code here,sorry,okay now hit save,and lastly we will search for base.css file,and copy the css code which we have  here for you guys now copy this code,okay now go to the bottom of our base.css  file and paste the css code there  ,there we go now click save,and now let's go to our single product  first to see if it's working fine  ,and here we go as you can see we have  an extra percentage showing up that  ,how much discount we are giving on each  product and if we refresh the home page,okay so on our home page we are seeing some  error now let's go back to guard dash product  ,file and check out the code which we put if it's  added properly or not okay so i guess we didn't  ,copy the code and we added the code which was  in price dot liquid file so if we go back to  ,this article which we have here so i'm  gonna copy this code again and paste it here,hit save now let's see if it's showing  up properly or not by refreshing,okay perfect it's working fine now  so when copying the code make sure  ,you copy the code properly otherwise  it will throw a liquid error as we  ,as we were seeing the liquid error now let's  change the pricing of the product to make sure  ,we are doing the person calculation  properly so if we go to this blue shirt and,now let's change the compare price to 20,and hit save,and now when i go back and refresh perfect  it's updating the percentage off dynamically  ,so it's showing the compare price  properly in the person mode and  ,uh telling our user that how much discount in  person we are getting from this product I hope  ,you guys like this tutorial make sure to like  comment and let me know if you want to implement  ,the same functionality on any other team so let  me know in the comment below have a great day

Congratulation! You bave finally finished reading how to show discount prices on shopify and believe you bave enougb understending how to show discount prices on shopify

Come on and read the rest of the article!