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 get shopify theme to display msrp cross out price on product pages and believe you bave enougb understending how to get shopify theme to display msrp cross out price on product pages
Come on and read the rest of the article!