How To Show Discount on Product Page – Dawn Theme


If you are a Shopify store owner looking to show discounts on your product pages, look no further! In this article, we will show you how to easily set up discount codes in the Dawn theme. You will be able to change the text on your product pages to say Discount in Percentage and your customers will know exactly what discounts they are getting. Let’s get started!

 

 

Replace Line no. 85 in Price.liquid File:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      -{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF
    </span>

Replace Line no. 98 in Card-product.liquid File:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      -{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF
    </span>

Add Code in Base.css File

.card__badge .badge{
    border-radius: 0;
    font-size: 13px;
    background-color: red;
    font-weight: bold;
    border: none;
  }
  
  .price .price__badge-sale {
    border-radius: 0;
    font-size: 13px;
    background-color: red;
    font-weight: bold;
    border: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
4.9/5 - (15 votes)

About

31 thoughts on “How To Show Discount on Product Page – Dawn Theme”

  1. Just wanted to make a note, the Card-product is now apparently Product.card and the lines you’re looking for are at the very end from what I can tell, however for whatever reason the code doesn’t work with it. Throws the Shopify.liquid error.

    The other code still work, however they appear to go inline with the theme accents selected. 🤔

    1. Hello, first of all thank you very much for this useful tutorial. I had the same problem as Peter.
      I solve it in this way:

      -{{ product_card_product.compare_at_price | minus: product_card_product.price | times: 100 | divided_by: product_card_product.compare_at_price }}% OFF

  2. Hi Brother,
    First of all, bunches of thanks to you for the kind of assistance you’re giving at free of cost. And now my question is, following your assistance i’m able to see the changes only in single product view i.e in cart but not in home page or product page. Can you assistance me on this to fix it? Thanks in advance.

  3. Hey, I’m not happy with the customisations. Could you include a link to the original code snippet? There is no older version of my files available..

  4. I followed your video instructions, and it is not working for me. Fortunately, it doesn’t seem to alter the website as I still see the regular pricing on the items. I noticed that in your written instructions for card.product file you said line 98 but in the video you say line 94. I followed the video instructions and dont see the discounted price there. What am I doing wrong? I think I followed exactly as instructed in your video.

  5. I followed your video instructions, and it is not working for me. Fortunately, it doesn’t seem to alter the website as I still see the regular pricing on the items. I noticed that in your written instructions for card.product file you said line 98 but in the video you say line 94. I followed the video instructions and dont see the discounted price there. What am I doing wrong? I think I followed exactly as instructed in your video. I am very nervous as I am launching today. At least it seems is not changing anything on the website. Should I open a new Dawn template and copy whole original codes of each 3 files to put it back how it was?

    1. Hi Mayra,

      We keep telling you to always have the backup of your theme before doing code changes, did you not take the backup?

      Thanks!

  6. I use sense theme, my compare at price is not showing on my shop. I make sure i put the original price at “compare at Price” and the discounted price at the “Price” option

    How can I fixed this?
    Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *